Adding Google Analytics to Webflow using Tag Manager

Apr 26, 2021

· 5 min

2021-04-26

March 3, 2023

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 Universal 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.

*Update* - GA4 works fine in Webflow these days, but Tag Manager still offers so much more flexibility.

Here at Milk Moon Studio, we're a design focussed Webflow Studio and as a Webflow designer you're going to want the neat solution, and Tag Manager is it. Apart from the fact that using Google Tag Manager gives you a ton of freedom when it comes to advanced tracking features and easily implementing event tracking etc, it keeps things clean, no more junk in you <head> tag, just Tag Manager, the rest, in Tag Manager. 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)

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).

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.

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.

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

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.

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

Select the GA4 Configuration Tag.

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

Select the All Pages Trigger.

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

Adding Universal Analytics

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

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

Create a new variable in the dropdown.

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

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.

Then hit Publish and you're done.

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 a the number of tags it's picking up and your brand-new analytics tags.

1 is my GA4 Tag, 2 is My Universal Analytics Tag and 3 is my Tag Manager Container. Below them you'll see 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.

*Update* We have added some video content at the top of the post to make it easier to follow along, so hopefully that helps. Please subscribe to the channel to stay up to date with our latest how-to's and updates.

Okay, so we installed tag manager on. The first video the previous blog post. So if you're on this post and you need to know how to install tag manager, you can just find the link in the post go back to the other blog post and you'll see how to do tag manager. You'll see and the Legacy assistant tag manager is installed. What I want to do now is create a Google analytics for account and a universal analytics account. So you're gonna hop into Google analytics analytics.google.com. You're gonna sit up. For the first time and then you're going to go and create an account. So we're going to create a new account. your company mock taste account We don't really care about any of this too much. You can switch all of this off if you want makes no difference. And we're gonna go next the property name is just test account. We're in South Africa. So we're going to switch to South Africa. Important to get your time zones, right your currency, especially if you're doing e-commerce. We want our South African Rands. Advanced options if you want to switch on universal Analytics Um, so Universal analytical C here is being deprecated in 2023 at this stage just about every Google product has switched over to using Universal. Sorry Google analytics for so you can link your Google analytics for account to your Google search console. You can link your analytics account to Google ads. You can link it to Google optimize you might still want to install Universal analytics because in Google optimize some features Still only work in Universal analytics. I haven't been ported over yet. And then tools like Microsoft Clarity that as behavioral analytics, I think at this stage still only links with universal analytics and maybe one or two other tools. So Yeah, maybe get you know vessel analytics. Well, it's still available. But definitely definitely focus on Google analytics for as this is falling away. There's no way to merge any of this thought if you switch over later to Google analytics for right so you're gonna be just losing it. There's no way to get the universal analytics thought that in Google analytics for as it's a completely different methodology. It's no longer, you know, looking at all the all the hits and stuff. Everything is an event now, so it's the same as the old Firebase system. It's like running an app. Everything is a page view a click is an event. Everything is an event. So we're gonna grab the URL here. Which is the sky we're gonna go in you we're gonna go in here. and so that is our URL. It's https clean that up. So yeah, don't use this. next small what we want to do. We want to do all of this. Oh, let's click everything. This isn't a store or app installed but it makes no difference other. It's it's basically a survey. create we want to accept. And that's it Universal analytics Now set up. So now we are by default in. The what we were saying the Google analytics for account. Um movement Studio artist you can see over there. We're gonna want to turn everything on we're just double checking. Yes, everything is on what is advanced settings? Yeah. No, this is all good site search I think. Webflow just uses query. So it'll track the Searchers on your site as well. We're going to save that. So to get it installed. We're going to grab the measurement ID here copy that Going to go over to tag manager. We're gonna go to workspace. That's the tag manager account. We set up earlier. We're going to go to tags. Create a new tag and we'll just call this GA for config. Ooh. big hit the tag configure attack configuration we want to do a configuration tag events will push to the configuration tag later on when we do things like track clicks on a button or form submissions that kind of thing. We're going to go in here. Add that. So that's our measurement ID. It'll be pushing to our Google analytics for account. The trigger the configuration tag is simple. It's going to be all pages. We're gonna save that. and then we are pretty much set with Google analytics for you can submit publish. continue Thing like no one's listening. Always remember to publish so our tag is in for head over here now. We'll see. Our tag assistant is enabled links to all the tools you need or in the blog post refresh this page. I mean another refresh. Might take a little while to come across not there. Being particularly long. Maybe it's a caching issue. Yeah, it's definitely picking up tag manager. And it is installed. Sorry about that. We'll give that some time to think in the meantime. Let's go ahead and set up the rest. Of our property you can use the setup assistant. Turn on Google signals. We want to do this definitely. What is this Market complete? Okay. Manage Google signals. So this is where you're getting some data from the advertising signals. We want to enable this because it gives us much more insight. about our users you'll see this is all the regions and it's happy to do it with that's fine. That's fine, and we're going to accept. The Collection agreement go back to set up assistant. So signals is on I haven't set up conversions. We'll do all of that. Later. the property settings That's all good. property access that's all good. a lot of streams as just the stream we're getting the data from you can have multiple ones. So measurement ID we've already used that. thought of settings collection. Okay, so granular location controls on all of that on Data retention. So how long do we want to keep? Well this data right? Let's make it 14 months and reset. So if the guy comes back at nine months and hasn't clear discussion the cookies all in there. It'll start counting from one again. So 14 months from there. So you're aggregate DOTA does stay. It's just the unique identifiers and stuff that gets done after 14 months. Data filters right here. You can set up internal filters. So for example, you can set up a testing one or internal traffic. We don't need to worry about that now, but yeah, you can exclude yourself. from what did I just click you can exclude Yourself by creating a filter so that you missing around on the side doesn't count. Reporting identity Blended. So that's your the user ID that's generated signals device ID everything to try and track him across. everything Attribution settings you will want cross-channel data-driven. So not lost click not first click based combination of it everything here. You can go in link your Google and we'll get into linking ads and bigquery and stuff and later stage same with search console. Honey, how good click out of that. Let's set up. Universal Analytics So I want to go to property settings first. We want to grab the tracking ID it back over to tag manager create a new tag. We're going to call this Universal analytics. Config you a Cone big ooh on big tag. And we're going to add that in Universal Analytics. You'll see it stays. Oh, there's no variable. We want to create a new variable that stores are tracking code so you a packing tag, whatever you want to call it. Add that in. More settings. So let's say you want to do cross the main tracking you've got blog dot whatever.com or share or Shop or anything like that? You can come in here. And you can list the domains. And it can do cross device tracking across domain tracking. Sorry g84 will sort that out for you. So use this create a new stream on G4, but in here you'll actually have to add that in we're gonna go ahead with added this we're gonna save this. Exciting loading. So now you'll see it's filling in the variable for our tracking tag. We're going to go ahead again and say all pages. And we're going to go ahead and Save. Now if we got a variables right that variable that's pretty good and picking up in there. You'll see user defined variables. There's our tracking tag. That's what it's using. So you can leave all of this over here. If you're gonna start doing events, which we'll get to another video. I'm gonna want to go in here and literally take all of these on because they become very handy when we are Tracking event. So see like clicks you're going to need to click ID or the text or the targets. Yeah, sorry. There's no really quick way of doing this, but we're taking it on now so that we can just Use it in our next video. Okay, we've got all of it. So now if we go back over here. We want to submit and publish. You'll see all the changes we've just made. Again, if you're really tedious about this kind of thing, you can go ahead and document everything that you've done so that if you ever want to roll back, it's really simple. You'll see what did you do and your description of what you did? now Let's just complete this setup. So. taste account you can add an industry, which is nice. I don't know. We're just gonna go with Computer and electronics for benchmarking and whatnot again. We want to add the advertising features. We want to use enhanced link attribution. We don't have search console. We'll do that in another video. We're going to save this. Then we're gonna go to property actions management again. You want to add people And so on. tracking info I don't think there's anything we need to do in here. That's just your tag. It refresh. Go back. Connected tags. Yeah. No, we're good to go here daughter collection. You'll see you've got a lot more grace here, but let's activate signals again Done. Of course. These things are all much more complicated for gdpr if you have to give consent and so on. We're not going to stress about that now we'll do confident in another video. To save that daughter retention will see much more time here. Same thing though. Reset on your activities. So the guys 20 months and it comes back for the first time starts counting from one month one again. User ID much more complicated. This only works. If you have a site for example, like you're using member stack you can push the user ID to the data layer grab it as a variable sign it as a user ID so that when he is then let's say log out on Google but is on his iPhone and it logs into the site it'll identify as the same user login yesterday from this web browser on the computer. We're not going to sit that up now, maybe do a video about that in future. But I mean at this stage, it's pretty much did. Again here you can add the queries like we did before. Oh, we actually didn't add it, but you can go ahead and add it there. And then there's no bigquery linking for a universal analytics. Like I said just search console. So now let's go see if there's anything else we want to do here. We'll get to goals when we do conversions and so on. So there's no there's nothing else we need to do here. Yes, okay, we can get rid of this warning about Universal Analytics. Let's go to home And real time. We're going to go try and see if this is working. Overview. Oh there we are one person logging in from swollen down South Africa. The tracking code has started working if you use the Legacy assistant here now, we'll see Google analytics Universal analytics is installed days are tracking ID. There's our tag manager ID. There is global site tracking and now If we go back into analytics, we'll see that we're browsing the site. Let's switch over. to the ga4 test account It's loading. It's loading. It's loading reports. real time this guys seems to be there we go. That was us we can refresh over here. Around a bit sometimes signal to the side. and there's our first page and everything. if we do Do something. Let's go in here. We're gonna say record. and restart this page click click There's a button there's a button. Well in a form. is just I send Oh, that's my email address. fine you all can me Oh, what moon? studio.com Send a message. and We're just gonna. Let's go to the 404. I've got the tracking code installed on there as well. It's it's picking it up. So now if we stop the recording. We can go to full report here. We can see everything that happened. On the side, so what it was sending where? and now oh my computer saying someone was detected at the gate. Alexa Anyway, GA 4 seems to be working just fine. Now. You can see all the events pouring in that it let me know in the comments if you have any questions and we'll try and help you out. Cheers.

‍

Adding Google Analytics to Webflow using Tag Manager

Step 1 - Setting up Google Analytics

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

Step 2 - Setting up your Google Analytics 4 Tag

Adding Universal Analytics

Let's test

Related Posts

Creating Text Spans in Dynamic CMS Text Elements in Webflow

Boost Your SEO by Creating Programmatic Webflow Landing Pages That Target Your Competition

Boost Your Website's Performance with Cloudflare's Zaraz Tag Manager: A Step-by-Step Guide to Implementing Zaraz and Adding Google Analytics 4 on Webflow

Web Design Rebels Unite. Join Our Newsletter.

Step 1 - Setting up Google Analytics

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

Step 2 - Setting up your Google Analytics 4 Tag

Adding Universal Analytics

Let's test

Video Transcript

Related Posts

Creating Text Spans in Dynamic CMS Text Elements in Webflow

Boost Your SEO by Creating Programmatic Webflow Landing Pages That Target Your Competition

Boost Your Website's Performance with Cloudflare's Zaraz Tag Manager: A Step-by-Step Guide to Implementing Zaraz and Adding Google Analytics 4 on Webflow

Web Design Rebels Unite. Join Our Newsletter.