Back to top button

Adding Google Analtyics to Webflow using Tag Manager

Adding Google Analtyics to Webflow using Tag Manager
In part 1 we covered installing Google Tag Manager in your Webflow Project. In part 2 we'll cover adding both Google Analytics 4 and Univeral Analytics to your site using Tag Manager.

Usually it's very simple adding Google Analytics to a Webflow Project, you copy the tracking ID, open up your Webflow settings and paste in the tracking ID. With the launch of Google Analytics 4 things have however changed a bit, most notably because Webflow's easy implementation doesn't support Google Analytics 4 yet, you can only add Universal Analytics.

Apart from that using Google Tag Manager gives you a ton of freedom when it comes to advanced tracking features and easily implementing event tracking etc. We'll cover why you should always use Tag Manager in another post and some more posts about using events in Tag Manager and advanced ad and conversion tracking, but that's for another day. For Part 1 of Installing Google Tag Manager and Google Analytics in Webflow head here.

But first:

Step 1 - Setting up Google Analytics

We'll take a quick look at setting up your Google Analytics 4 account and your Universal Analytics account (Stay tuned for another post about the advanced settings for GA4 and UA).

Creating a Google Analytics 4 account. (and if you want an Universal Analytics Account)

Sign up and hit Create Account, then give it a name.

Google Analytics 4 Setup Step 1

Now hit next and enter a name for the property, select your country (country of the site), timezone, currency and hit advanced if you'd like to set up a UA (Universal Analytics account, you'd want this if you're gonna be using things like Google Optimise and Google Ads' Smart Ads, yet another post coming on these).

Google Analytics 4 Setup Timezone

Go ahead and tick the box under advanced for the UA Account if you're gonna need that (may as well go ahead, not gonna cost you anything).

Google AnalyticsUniversal Analytics Setup

I'm just gonna skip the next step, but you should go ahead and tick the boxes that apply, then hit create.

Now we're gonna create your Datastream, select Web.

Google Analytics4 Stream

Now you can go ahead and enter your URL, select https for Webflow as you get an SSL certificate, and another name. Everything else you can keep checked, you'll need them.

Google Analytics 4 Stream Setup

And you're set up, copy the Measurement ID on the next page and head to Tag Manager.

Google Analytics 4 ID

Step 2 - Setting up your Google Analytics 4 Tag

Open up the Tag Manager Container from the 1st post. Now go to the Workspace, then Tags and create a Tag.

Tag Manager GA4

Now give your Tag a name and choose the type of tag you'd like to add.

Tag Manager GA4 Tag

Select the GA4 Configuration Tag.

Tag Manager GA4 Selection

Paste in the Measurement ID from GA4 and select a Trigger.

Tag Manager GA4 Tag Config

Select the All Pages Trigger.

Tag Manager GA4 Tag Trigger Setup

Now Save and create a new Tag if you're going to be adding a Universal Analytics account as well.

Tag Manager GA4 Setup Complete

Adding Universal Analytics

If you're doing this step head back to Analytics, switch Properties, open Tracking and copy the UA tracking code.

Universal Analytics Setup

Now head on back to Tag Manager and create a new Tag, name it and select the Tag you want to use.

Tag Manager Universal Analytics Tag

Create a new variable in the dropdown.

Tag Manager UA Variable

Give the variable a name and paste in the tracking code.

Tag Manager GA UA Variable

Hit save and select the All Pages Trigger.

Tag Manager  Universal Analytics Tag Complete

1 will be your variable and 2 will be the All Pages Trigger. Hit Save.

Now go ahead and publish by hitting Submit.

Tag Manager Submit

Then hit Pubish and you're done.

Tag Manager  Publish

Let's test

Make sure you've installed the Tag Assistant. More on that here in part 1. Go to your page. Hit Enable on the plugin and refresh the page (command+R). The Plugin should show an the number of tags it's picking up and your brand new analytics tags.

Tag Manager GA4 Test

1 is my GA4 Tag, 2 is My Universal Analytics Tag and 3 is my Tag Manager Container. Below them you'll see the the container IDs that'll match with what you have in Google Analytics.

Congrats, you're done. Hit me up in the comments if you have any questions, and remember to check out the How-To section of our blog for more tutorials. Your next should be linking your Google Analytics 4 account to BigQuery, you can find the how-to here. To find out more about speeding up Tags by deferring them, check out this post.

recent projects