How Do I Add Google Tag Manager to Webflow?

by

Google Tag Manager is a powerful tool that allows you to manage and deploy various tracking codes on your website without having to manually add them to your codebase. If you’re using Webflow as your website builder, integrating Google Tag Manager is a straightforward process. In this tutorial, we’ll walk you through the steps of adding Google Tag Manager to your Webflow project.

First, log in to your Google Tag Manager account and create a new container. Give it a descriptive name related to your website or business. Once you’ve created the container, Google Tag Manager will provide you with a container ID that you’ll need to add to your Webflow project.

Now, open your Webflow project and navigate to the Project Settings. Scroll down until you find the Custom Code section. In the Head Code section, paste the following code:

<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’YOUR_CONTAINER_ID‘);</script>
<!– End Google Tag Manager –>

Remember to replace YOUR_CONTAINER_ID with the actual container ID generated by Google Tag Manager.

Save the changes and publish your Webflow project. Now, let’s move on to setting up a data layer and integrating Google Analytics using Google Tag Manager.

To set up a data layer, add the following code after the opening <body> tag in your Webflow project:

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘GA_TRACKING_ID’);
</script>

Replace GA_TRACKING_ID with your actual Google Analytics tracking ID. If you don’t have a Google Analytics account, create one and obtain the tracking ID.

Now, let’s create a new tag in Google Tag Manager to track pageviews using Google Analytics. In your Google Tag Manager container, go to the Tags section and click on New. Give your tag a descriptive name like “Google Analytics – Pageviews”.

Under Tag Configuration, select “Google Analytics: Universal Analytics”. Configure the tag by entering your Google Analytics tracking ID under Tracking ID.

Next, set the Triggering option to All Pages. This ensures that the tag fires on every page of your website.

Save the tag and submit the changes to your container. Publish the changes in Google Tag Manager.

Congratulations! You’ve successfully added Google Tag Manager to your Webflow project and integrated it with Google Analytics. Now you can utilize all the features and benefits that come with using these tools for tracking user behavior, conversions, and more on your website.

In summary:

  • Create a new container in Google Tag Manager.
  • Add the generated container ID to your Webflow project’s Head Code section.
  • Create a data layer in your Webflow project.
  • Add code for integrating Google Analytics.
  • Create a new tag in Google Tag Manager to track pageviews using Google Analytics.
  • Configure the tag and set it to trigger on all pages.
  • Save and publish the changes in Google Tag Manager.

Now you’re ready to take advantage of the powerful tracking capabilities provided by Google Tag Manager and Google Analytics. Happy tracking!