Adding Google Tag Manager and Google Analytics to Webflow

Adding Google Tag Manager and Google Analytics to Webflow
In Part 1 of this post, we'll look at setting up a Google Tag Manager container and quickly and easily installing it in Webflow. In Part 2, we'll add Google Analytics 4 and Google Universal Analytics to Tag Manager, and test that everything's running smoothly in Tag Manager and Webflow.

While Webflow is usually the simple no-code solution of choice for quick and easy website design, and dare I say development, getting Google Tag Manager installed properly can be a bit of a hack. But don't fret, today we'll walk you through the simplest solution for getting Tag Manager up and running as quickly as possible while still functioning 100%.

But first things first:

Set up a Tag Manager Container

If you haven't done this yet we'll run you through this really quickly. (We'll do a separate post on why you should be using Tag Manager and not just the vanilla Google Analytics installation by pasting in the GA UA tracking code on Webflow and a myriad of other Tag Manager benefits).

Step 1 - Create a Tag Manager Account

This bit is super easy. Sign up for Tag Manager and hit Create Account.

Tag Manager Create Account

Give the account a name, select the country, stick in your URL and hit Web.

Tag Manager New Account

After you accept the user agreement you'll end up with the installation instructions. The first bit will just be a copy and paste, but the second bit that goes in the <body> tag will be a bit harder.

Step 2 - Installing Tag Manager in Webflow

Tag Manager Embed Code

Once you've reached the above screen you'll want to copy the code that goes in the <head> and head on over to your Webflow Project settings page.

Tag Manager Embed Webflow

Once you're in Settings, open up Custom Code and paste the Tag Manager Container code into the Head Code section and save. This bit's as easy and 1, 2, 3.

Next stop's the Designer. Add a new HTML Embed.

Tag Manager Webflow Embed

Paste in the second bit of code from Tag Manager that's supposed to go in the <body>. Save and Close.

Tag Manager Webflow Custom Code

We recommend turning this into a Symbol as you're gonna reuse this on every page in your Webflow Project.

Once you've turned into a Symbol, drag it all the way to the top so it sits just under your Body element. You always want this to be right at the top of every page's list of elements.

Tag Manager Webflow Navigator

And that's it. Tag Manager is now safely embed in your Webflow Project. Just remember to make sure it's sitting at the top of each page in your element list under Navigator and publish the container in Tag Manager before you publish your Webflow Project.

But wait, there's more:

Step 3 - Testing

Naturally you want to make sure Tag Manager is installed, so let's test.

You're going to want to install this plugin for Chrome (sorry Safari users).

Make sure you've published Tag Manager and then Webflow, now head over to your site.

Open the plugin and hit Enable.

Tag Assistant Webflow Tag Manager Test

Once you'e done that refresh the page (command+R).

The Plugin should now show a little number (this will differ on the amount of Tag loaded):

Tag Manager Tag Assistant

You'll notice mine has 4. Number 4 is my Tag Manager container, the blurred bit is my container ID that should match my Tag Manager Container in Tag Manager itself.

No 1 is my Google Analytics 4 Tag, no 2 is my old Google Analytics Tag (Universal Analytics), and no 3 is Google Optimise. We'll do more posts about setting all these up in Tag Manager so don't worry, if you've just created your container you won't see any of these.

But yeah, that's it, well done, you've set up Google Tag Manager in Webflow. As a side note, don't worry about the sad little blue face next to the Tag Manager container, that's just because this is a non-standard Tag Manager implementation. Sadly this is pretty much as good as it gets, until Webflow changes things you're not gonna see a green smiley, but everything works just fine, trust us.

In part 2 of this series we'll cover setting up Google Analytics in Tag Manager. You can find Part 2 here. You can also check out how to link your GA4 account to BigQuery here. and a guide on speeding up your site using deferred Tags here.

Got any questions, hit us up in the comments, and remember to check out the How-To section of our blog for more tutorials.

*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 updated content.

Video Transript

Accordion Arrow

Hey there. So today we're going to do a quick rundown of the analytics tutorials on the site. We're going to start with tag manager and getting Google analytics on webflow. We've been getting a lot of emails and some on Facebook posts about how to do it. So we're just gonna do the I think first two and then I'll start rolling out some more about the risk just so you don't have to read my long ramblings on the site and keep everything really simple. So I'm going to switch over to tag manager now to get us started. So you're gonna need a tag manager Google Analytics. And you're probably gonna need these plugins. I'll just give you a run. Now. This is the old Google tag manager assistant Legacy plugin. still with while getting because it just makes it easy and then you're going to want to install what is this tag? Assistant video conversions? Tag assistant companion DaVinci's probably nice. It's somewhere in here. Anyway, the links are all in the blog post. What is rapalizers are really important? Oh, okay. So just quick rundown. I grabbed some template of with flowers. We have something to work in. Here it is. Let's see who made this those template this. There we go. Incredible multipurpose website templates just a free one that we're going to use to work with. So to get you started. First thing we're gonna have to do is get tag manager installed the second part of our video which will put in the second blog post will be getting Google analytics into tag manager onto the side. So tag manager, you're going to want to open an account. tag manager or google.com and then your intact manager going to want to create a new account. So new account and we're just going to call this tests site. We are in South Africa. Container name so we'll just grab milkmoon. Yes, don't wait for it. I O. That's our container. It's actually just the name. It doesn't really matter. And we want web. We're gonna go create. Accept everything. Yes. loading Okay. Now I've got our container we want to install tag manager. So we're going to Grab these two Snippets. This will go in the head. In your webflow settings so that it's applied to everything. This has to go in the body tag. Not as easy because you can't actually get it in the body tag and webflow, but essentially you'll see here at iframe. No script. So it's the failover for when the guy on top here stops working. So we're just going to stick that into every page on the website using Assemble, so we're gonna grab it. Let's grab this guy. Head over to the side. We want to install it in go to custom code. Paste it in here. save And we'll publish. It's thinking it's thinking. We're gonna go into the designer. and once we're in the designer We're going to want to put HTML embed on every page. In the site, so we're going to go in bed. We'll just call the embed. tag manager it's whoops will open it up again. We'll grab the second piece here. paste that in and all you want to do now. Right click on here create symbol. Or call it tag manager. And then you want to make sure that tag manager is at the very book back is at the very top. On every page on the site. So let's see. What do we have in this template? Terms of pages. We got home and utilities. So we're just gonna drop this. In here when it's finished, it's loading. So again just click body add the instance. Drag it up. Drag it up. and one on the password page one on the 404 and utility Pages just so you know traffic sites are Have issues and whatnot. And we're going to go ahead. And publish it. And essentially that is and all that tag manager should be installed. So we're going to go over here. This is the page. We just installed it on we're going to go enable. This won't work if you don't do it beforehand. and oh, sorry. Whoops forgot. Yeah, so we have to publish always publish. So in tag manager go hit submit. You can fill in changes for the version that you're doing. We don't need to do that with actually. Done anything yet. I'm just gonna go hit publish thing like no one's listening. We are now on Virgin 2 and version 2 is the loading. Give it a thick. and now if we Make sure this is enabled that I enable it. It's this and emerald. We're gonna refresh. And you'll see there's one now. It's picking up a tag Google tag manager installed. It's gonna moan. That's the second but is not in the body. Don't worry. Everything will work just fine and that's getting tag manager and stalled simple as that. I'm gonna switch over to the second part, which is in the Bottom of the blog post you'll see getting Google analytics into tag manager. That's that cheers.

recent projects