How to Set Up Google Analytics 4 (GA4) On Your Webflow Website

If you’re anything like most people then you're probably dreading the day that Google Universal Analytics gets permanently replaced by Google Analytics 4. If you just have one look at Google Analytics new user interface you’ll quickly realise that it’s completely different to the interface that you’re probably used to. So, in this article, we’re going to give you a brief tutorial on how to set up Google Analytics 4 on Webflow.

What is Google Analytics 4?

Google Analytics 4 (GA4) is the latest version of Google Analytics. It’s considered to be an improved version of its younger brother - Universal Analytics, which is probably the version of Google Analytics you’ve become accustomed to using so far. Although Google Analytics 4 has been out since 2020, the overwhelming majority of websites still rely on Universal Analytics to analyse their website’s performance.

While there are many reasons why many Webflow website owners are hesitant to adopt Google Analytics 4, one of the main causes of this is that they don’t know how to set up Google Analytics 4 for their Webflow websites. So, if that’s you then you’re in the right place because Setting up GA4 on a webflow website can be a fairly simple process if you follow the steps outlined in this tutorial.

2 ways to add your Google Analytics tracking code to your Webflow website

Note: before we delve into the tutorial, bear in mind that there are 2 different ways to set up Google Analytics on your Webfow site. The first way simply requires you to generate your analytics tracking code and paste the code into the "Head" section of your website.

Whereas, the second method that I'll walk you through is more technical because it requires you to add the analytics tracking code to your site using Google Tag Manager.

So, if you haven't already installed Google Tag Manager on your website, just follow the first method outlined below.

How to set up Google Analytics 4 on your Webflow website without Google Tag Manager

Step 0 - Sign up for Google Analytics if you haven't already

Before you even begin the process of setting up GA4 on your webflow site, first ensure that you already have an analytics account for the website you want to analyse. If you already have one, skip this step and create a separate property for your website

Step 1 - Create a GA4 property

To get started, you will need to create a GA4 property in your Google Analytics account. If you already have a GA4 property then you can skip this step. To create a new property, go to your Google Analytics account, select the "Admin" tab, and then click on the "Create Property" button. Next, select "Web" as the property type and enter the website's name and URL.

Step 2 - Get the GA4 tracking code

Once your property is set up, you'll have to get your GA4 tracking code. Go to your GA4 property and click on the "Tracking Code" tab to find the code. Then, simply copy the tracking code.

Step 3 -Paste the GA4 tracking code into your Webflow website

Once you've successfully found the tracking code and have copied it, simply paste the GA4 tracking code to your Webflow website.

Now make sure you pay close attention to this part because it tends to confuse a lot of people. Let's say that you were hypothetically using Universal Analytics instead of Google Analytics 4, if this was the case all you would simply have to do is paste your code inside the "Integrations" section of your webflow website settings.

‍

‍

Step 4 - Verify the tracking code

After you have added the tracking code to your site, you will need to verify that it is working correctly. To do this, go to the "Real-time" report in your GA4 property, and visit your website. You should see a session from your IP address appearing on the report.

If you see this, give yourself a pat on the back. You've successfully set up your Google Analytics 4.

Step 5 (Bonus) - Set up events and conversions

If you are running an SEO campaign or a PPC campaign on your website, then we would recommend that you track any events or conversions that take place on your website, like button clicks and form submissions.

To set up events and conversions, you will need to go back to the GA4 property and navigate to the "Events" tab. Here you can create custom events and conversions, and add the relevant code to your website.

Setting up Google Analytics 4 on your Webflow website using this way is a fairly straightforward process that can be completed in a few simple steps: creating a GA4 property, getting the GA4 tracking code, adding the GA4 tracking code to your website, verifying the tracking code, and setting up events and conversions.

‍

How to set up Google Analytics 4 on your Webflow website using Google Tag Manager

If you're an avid marketing nerd like me then you'll probably want to monitor more performance metrics on your website than just your Google Analytics. You'll probably want to monitor your Google Adwords tag and Facebook pixel data. You probably want to do this without having to continuously stuff more codes onto your website. You probably also want to have the ability to monitor all these metrics in one central location.

If that's what you want, then you should set up your website's Google Analytics 4 using Google Tag Manager. Setting up Google Analytics 4 on a Webflow website using Tag Manager can be a bit tricky, but with the right steps and guidance, it can be done in no time. In this part of the tutorial, we will show you how to set up GA4 on your Webflow website using Tag Manager.

‍

Step 1: Create a Google Analytics 4 property

The first step is to create a Google Analytics 4 property. To do this, you will need to log in to your Google Analytics account and click on the Admin button in the bottom left corner. Then, click on the Create Property button and select the Web option. Fill in the required information for your property and click on the Create button.

‍

‍

Step 2: Get your GA4 Measurement ID

Once your GA4 property is created, you will be able to see your GA4 Measurement ID. This ID will be used to track your website's data in GA4. Make sure to copy the ID and keep it safe.

‍

‍

Step 3: Create a Google Tag Manager account

If you don't have a Google Tag Manager account, you will need to create one. Go to the Google Tag Manager website and sign up for an account. Once you are logged in, click on the Create Container button and select the Web option. Fill in the required information and click on the Create button.

‍

Step 4: Add the GA4 Measurement ID to Tag Manager

The next step is to add your GA4 Measurement ID to Tag Manager. Go to the Tag Manager dashboard and click on the Add a new tag button. Select the GA4 Configuration tag from the list and enter your GA4 Measurement ID in the Measurement ID field.

Step 5: Publish your container

Once you have added the GA4 Measurement ID, you will need to publish your container. Go to the Tag Manager dashboard and click on the Submit button. This will push your changes live on your website.

Step 6: Add the Tag Manager code to your website

The final step is to add the Tag Manager code to your website. Go to the Tag Manager dashboard and click on the Install Tag Manager button. Copy the code and paste it into the header section of your Webflow website.

‍

That's it! You have now successfully set up GA4 on your Webflow website using Tag Manager. You can now start tracking your website's data in GA4 and gain valuable insights into your website's performance.