For any one who wants to enhance the tracking of their website, and is seeking for an easier way to manage tags, the Google Tag Manager (GTM) is a great tool. GTM helps you to track and implement numerous marketing tags, including Google Analytics and Facebook Pixel, without toggling between the code each time. In this guide, I will explain how easy it is to implement GTM in your Webflow site.
What we do at Fivertu Digital Agency is to focus on how to create and optimize online presence for our clients, and although this is a simple guide on how to install GTM in Webflow, it is going to be very helpful. Using our detailed guide, you don’t have to be a programmer to install GTM and begin collecting valuable information without any hassle.
What is Google Tag Manager (GTM) and Why Should You Use It?
Google Tag Manager (GTM) is a free tool which enables you to implement and manage marketing tags (including analytics, ad conversion pixels, etc.) on your website without altering the site’s code. Using GTM, it is possible to append, modify or delete tags, monitor events and the collection of data in the site.
Why must you use GTM?
No coding required: The addition and modification of tracking codes is made easier through GTM. After installation, all the controls are available from the GTM’s interface.
Centralized tag management: All your tracking tags are in one place and you do not have to change your website’s code every time you want to add more tags or make changes to them.
Faster website updates: Marketers can track without having to wait for the developers since GTM supports quick alterations.
For Webflow users, GTM is useful for tracking setups such as Google Analytics or Facebook Pixel and provide you with the freedom to make adjustments without having to edit the code frequently.
Pre Requisites for how to install GTM in Webflow
Before you can install Google Tag Manager on your Webflow site, there are a few things you’ll need
A Google Tag Manager Account
If you don’t have a GTM account yet, you can easily create one for free by visiting Google Tag Manager. Once created, you’ll need to set up a container for your Webflow site, which will hold all the tags you want to implement.Access to Your Webflow Account
Make sure you have access to the Webflow project where you want to install GTM. You’ll be adding code to your site’s custom code section.Basic Understanding of Tags and Triggers
While no coding is required, having a basic understanding of tags (such as Google Analytics, conversion tracking, etc.) and how triggers work within GTM will help you make the most of this tool.
Once you have these prerequisites, you’re ready to begin the installation process. Don’t worry, we’ll guide you through each step to make it as easy as possible!
Do You Want Us to Manage and Scale Your Campaigns?
Step-by-Step Guide to Install GTM in Webflow
Step 1: Create a Google Tag Manager Account
- Go to the Google Tag Manager website and sign in with your Google account.
- Click Create Account and enter the required details:
- Account Name: Choose a name that represents your website.
- Container Name: Typically, this would be your website URL.
- Select Web as the platform.
- Once created, GTM will provide you with two snippets of code (one for the
<head>and one for the<body>). Keep these handy — you’ll need them in the next steps.
Step 2: Add GTM Code to Webflow
- Log into your Webflow dashboard and open the project where you want to install GTM.
- Go to Project Settings > Custom Code.
- In the Head Code section, paste the first GTM code snippet (the one for the
<head>tag). - Scroll down to the Body Code section and paste the second GTM snippet (for the
<body>tag). - Save the changes.
Step 3: Publish Your Changes in Webflow
After adding the GTM code, you need to publish your website to make sure the changes take effect.
- Click the Publish button in your Webflow dashboard.
- Select the domain where the changes should go live.
Once published, GTM is now active on your Webflow site, and you can start adding and managing tags without touching the code again!
Step 4: Test and Verify GTM Installation
It’s important to verify that GTM has been installed correctly. Here’s how:
- Open your website in a new tab.
- Use Google Tag Assistant (a Chrome extension) to check if GTM is firing properly. Alternatively, you can use the Preview Mode in GTM to test whether the container is functioning as expected.
- If the GTM code isn’t working, revisit the steps to ensure you’ve placed the snippets in the correct sections of Webflow.
Do You Want Us to Manage and Scale Your Campaigns?
Troubleshooting GTM Installation Issues in Webflow
Even though installing GTM in Webflow is straightforward, issues can arise. Below are some common problems and solutions to help you troubleshoot:
GTM Code Isn’t Firing Properly
- Check Code Placement: Make sure the GTM
<head>and<body>snippets are correctly placed in Webflow’s Custom Code section. The<head>code goes in the Head Code section, while the<body>code goes in the Footer Code or immediately after the opening<body>tag. - Publish Changes: Always publish the changes in Webflow after adding or updating the GTM code. Unpublished changes won’t take effect.
GTM Preview Mode Not Working
- Use Incognito Mode: If Preview Mode isn’t working, try using an incognito browser window to avoid conflicts with extensions or cache issues.
- Clear Browser Cache: Sometimes old versions of your site may still be cached in your browser. Clear the cache to ensure that you’re seeing the latest version of your site with GTM installed.
Tags Not Firing Correctly
- Check Triggers: Make sure the right triggers are attached to your tags in GTM. A tag without a trigger won’t fire.
- Test in Preview Mode: Always use Preview Mode in GTM to test your tags before publishing them. This will show you exactly which tags are firing and when.
Webflow Site Not Loading Properly After Installing GTM
- Check for Code Errors: If the Webflow site breaks or loads incorrectly after adding the GTM code, it’s possible the snippets were not pasted correctly. Double-check that the code is complete and placed in the correct sections.