News, Articles & Knowledge

How to Implement GTM on your Site in 10 Steps

Posted by Charlie on 14-Jan-2020 11:43:38

Google Tag Manager (or for the purpose of speed GTM) is a hugely popular and powerful platform. However, it’s incredibly easy to get wrong. And if you’re using Google Analytics (which you most likely are) any mistakes you make are going to be forever visible on your account/view. This often can lead to problems comparing data, for example if you want to look at year on year (YOY) metrics, an issue with GTM tracking could easily lead to distorted and inaccurate figures.

In this post we’re going to be talking about using GTM to improve your data collection on Google Analytics. However, it’s important to note the majority of what we’re going to talk about is transferable for many other platforms. Whether you’re running your analytics off a custom database, platform or piece of software, you should find the following information useful.

We've also put together a fairly in-depth video going over a number of the steps talked about in this post here: 

How to Setup GTM on Your Website

1st Step – Define your goals

Understanding what you want to achieve with your tracking is key to successfully implementing GTM on your site. Before you get carried away with implementing a whole range of tags, custom JavaScript variables and or my personal favourite: lookup tables, you need to know what you want to learn and what that will do for your business.

GTM tracking allows you to bring in a whole heap of data in the form of events into Google Analytics. The data you could send could literally be anything (within reason). However, historically most business want to understand the same kind of stuff. So, what is it business want to see in Google Analytics, see our quick list below of some common events we’ve setup in the past here at Innovation Visual.

  • Form Submissions
  • Contact Link Clicks (split by phone and email)
  • Document Downloads
  • Outbound Link Clicks (where people leave the site)
  • Video Engagement
  • Scroll Depth
  • Engagement Timer(s)
  • Copying Text
  • Live Chat Engagement
  • CTA Clicks

The tracking needed for the above suggestions will often be similar no matter the website. However, they’ll almost always be slightly different. Each site is unique and setup in a different way. Whether it’s the way your forms are run or how your customers might download a document. This means for each site you might have or for each tracking project, you will need to customise the tags to fit your needs.

Each of the tracking options stated above would likely be interesting to understand and see in Google Analytics. However, not all are goals. This is where there needs to be an important distinction between micro-goals and fully fledged, meaty goals. A micro-goal would be something like “CTA Clicks” or “Video Engagement”. These are goals that indicate someone is engaged on the site and more likely to become, say a prospect. However, none of these are a goal.

A goal should be something that adds business value. The most common goal is a purchase (on an e-commerce site). However, in the case of the tracking options mentioned above, the most important goal would be “Form Submissions”. A form submission will likely provide a lead to the business which can then turn to customer which in turn leads to value added. Someone clicking on a CTA doesn’t provide value added to the business. Instead this metric might tell us how well the site is performing from an engagement perspective. It might tell us what’s important to a visitor (by which CTAs they click), it might tell us what pages are performing the best and it tells us what CTAs need improvement. But it’s not a goal.

Once you’ve got a clear understanding of what’s a goal to your business you can then start to progress with the setup of your tracking and your GTM container.

It’s important to note that different business will have different goals and how you split your goals might differ as well. Often business will have multiple goals for multiple key forms or events. How granular your goals need to be is another key decision you’ll need to make.

2nd Step – Do you have access?

GTM and Google Analytics have very specific access requirements. If you’re taking over a container which has already been setup before or starting from scratch you need to make sure you have the right access levels.

In GTM (Google Tag Manager) you'll want to have publishing access. This allows you to push any changes you’ve made on the account live. This level of access also gives you the ability to do things like preview changes (live on your site) and much more. Which can be extremely helpful when testing (we'll come back to this). 

In Google Analytics you want to have admin access to the account level. Google Analytics has three areas of access. Account, property and view. We usually request access to the account level for the sake of efficiency. It’s at the account level you’ll apply things like filters so it’s important to have this. However, for the setup of GTM you’ll just need admin access at the property level. Although this isn’t ideal, it’s enough to get things up and running. It’s at this level you’ll want to link the two accounts (Google Tag Manager and Google Analytics).

Not only do you need fairly high-level access to both these platforms you’ll also need access to edit the HTML code of the website in question. When installing GTM onto your website you’ll need to amend the theme’s code or install a plugin (whichever is easier). We’ll get back to the best way to install your GTM snippet on the site a little further down.

3rd Step – Setting up your GMT account and container

A container is where you keep all your tracking and code for a single website or domain. Your GTM account allows you to have multiple containers in order to help businesses which might work on multiple domains or sites. It is possible to have multiple domains on one container with the use of cross-domain tracking; however, this is a slightly complex process that we’ll go over in a separate post.

Setting up your account/container is a fairly straightforward process. You’ll want to go Google Tag Manager and click create account. You then need to fill in some basic details such as your company name and country. Once you’ve done this, you’ll be prompted to setup your container.

Here you’ll need to enter your domain and the platform you intend to use GTM on. In this case (and most others) you’ll want to select “web”.

new gtm account container

And that’s it, you’ve setup your GTM account and container.

4th Step – Installing GTM on your site

When installing GTM on your site the most important thing to remember is that it needs to be on all pages of your site. This is essential for proper tracking, especially if you’re implementing the standard Google Analytics tracking through GTM (which you probably should). Otherwise you could stop tracking visitors on certain pages of the site. You can segment any pages you want or don’t want GTM to fire on within GTM, so there’s no need to limit GTM at this step.

To find your GTM snippet you can navigate to Admin > Install Google Tag Manager. From here you can copy the code snippets for both the <head> section of the page and the <body> section of the page. We’d recommend you save a copy of this code in a HTML document for quick and easy access later on.

Depending on your CMS you’ll need to install GTM in a different way. As most sites are on WordPress, we’re going to be using this platform as a guide. Many sites hosted on platforms like HubSpot, Squarespace and Shopify often have a custom HTML area in their settings which allow for the implementation of this kind of code snippet fairly easily. However, for others such as Drupal you’ll need to install a custom module (which might require developer work).

For most businesses/websites on WordPress there’s two ways to install GTM on their site. The first is by adding the code directly to the theme header. The second is through installing a plugin - there’s plenty out there so you’ve got a lot to choose from.

Theme Header Implementation:

To hard code GTM into your WordPress site you’ll need to navigate to Appearance > Theme Editor > Header. From here you can copy the code into the right section. The <head> code should be as high up on the page as possible. You should also be able to implement the <body> tag in this same section of WordPress. This <body> snippet again needs to be as high up as possible “immediately after the opening”.

section of wordpress site for theme editor

head html code for installing gtm

Plugin Implementation:

There are hundreds of plugins for installing GTM and other code snippets in the header and footer/body of your website. However, we’ve found the following three plugins to be the best. You really can’t go wrong with any.

  1. Header and Footer Scripts
  2. Head, Footer and Post Injections
  3. Insert Headers and Footers

We currently use “header and footer scripts” the most. This is due to the additional feature of adding additional code to the header and footer of individual pages. This can be particularly useful when implementing additional scripts which can’t be added through GTM. Scripts like the Google Optimise Anti-Flicker snippet.

Once you’ve installed one of these plugins (you only need one), you can then copy the GTM snippet code you accessed earlier and implement it on your site.

It should look something like this:

head and footer plugin for installing gtm

To test your GTM code has been added to the site correctly and working as it should, we would recommend you do the following.

Check the GTM code snippet is appearing in the source code of your site pages. We would recommend you check a number of pages to ensure it working on all pages of your site. To view your site pages source code, you can right click on the page and select “view page source”. Or you can navigate to View > Developer > View Source. You can then search for the code snippet by searching on the page (command + f) for “gtm”.

You should then be able to locate the GTM snippet. If it’s not there somethings not right. The first thing to check would be the changes you implemented have been saved. Plus, a simple reload of the page might do the trick.

gtm in source code of site

You can additionally use the Google Tag Assistant plugin for Chrome to locate if GTM has been installed correctly. Please note if you haven’t published anything to the container you may see an error pop up.

google tag assistant

Now it’s time for the hard bit, time to add the tracking.

5th Step – Basic GA Tracking Setup

When starting GTM tracking for the first time, the best thing to setup is your generic Google Analytics Page View tag. If you’ve previously ran Google Analytics tracking directly on the site, this pageview tag simply replaces the piece of code you would otherwise hardcode on the site.

We find implementing this through GTM helps to keep all your tracking in one place and keep the amount of code directly on your site to a minimum.

The setup of this tag is very easy and should only take a few minutes. It’s important to note if you’re already running Google Analytics tracking on your site you want to get GTM ready to go before you remove it from your current site, as you could end up with a period of no traffic on your site (effecting the validity of your data). In continuation you don’t want to have two GA code snippets, one directly on the site and one GTM, as this could led to errors with reporting and double counting users, unless you want to inflate your figures!

If you’re not already aware it’s important to go over the structure and vocabulary of GTM. In short there are three different kinds of GTM tag (I can’t think of a better word for this).

  1. Tags – these are where GTM packages the data you’re going to send to Google Analytics (or whatever platform your using) together and where you’ll manage the majority of the code/tracking you add to the site. There are many different kinds of tags (not just for tracking or analytics purposes). GTM can be used for any kind of code you want to add to the site. Whether it’s adding a cookie handler, external plugins from platforms like Hotjar and more. However, for the purpose of adding additional tracking to the site we only care about the “Custom HTML” and “Google Analytics: Universal Analytics” formats.
  2. Triggers – these are what cause a tag to be fired. If someone fills out a form on your site we’d want the trigger to be when someone clicks on the submit button or when an AJAX event confirms an email has been sent. One of the most important (built-in triggers) is “All Pages”. This allows the tag to fire on all pages, you might use this for a chatbot, the Google Analytics Page View tag as well as many others.
  3. Variables – these capture data from the page. This could be the page url, text on the page, specific form names, video duration or click text to name a few. This is where you’re going to pull through a lot of the insights you’ll later see in Google Analytics. There’s a large quantity of built in variables that GTM can automatically detect, but the more advanced you start to become the more you’ll be able to capture.

structure of gtm

Setting up your first tag: Add images on site

You can follow to steps below to quickly setup your first GTM tag. We’re going to be implementing the standard Google Analytics Pageview tag.

Firstly, you’ll want to select “New”. You’ll then want to select the correct tag type by clicking in the tag configuration box. From here you’ll want to select Google Analytics: Universal Analytics.

Make sure the track type box is set to “Pageview”

applying a new variable in gtm

You’ll need to create your first variable now. This will be your GA (Google Analytics) ID. You can find this in the admin section of your Google Analytics property. You’ll need to navigate to Admin (cog button) > Property > Tracking Info > Tracking Code. On this page you’ll then see your “Tracking ID” in the top left corner of the page. It’ll start with “UA-“… If you’ve ever hardcoded your Google Analytics tracking code to your site, this page will be familiar to you.

google analytics tracking id

You’ll now want to copy the tracking ID and paste it in the “Google Analytics settings” variable. You don’t need to change anything else on this variable. GTM understands its purpose. Once you save you should be directed back to your Pageview tag.

setting up gtm tracking id

Next up is the trigger. GTM has a number built in but you’ll likely only see the one at this stage. The one you should see will be called “All Pages”. You’ll want to select this in the triggering box.

adding a new trigger

You can now save the tag.

To test the tag is working properly at the GTM you should now preview the tag. This will tell us if everything is working correctly.

previewing gtm container

If everything looks good this end you can submit the tag. Naming it appropriately will help down the line when you want to see when and what changes took place on the account. Completing this step makes all the changes in the container live. So be sure you’re happy with what you’re submitting first.

You can see in the below screenshot the Page Views tag alongside some additional tags we have live in our container. Yours will likely be less crowded. 

example preview on site

Once you’ve checked it’s working at the GTM end it’s time to test Google Analytics is tracking correctly. To do this navigated to your Google Analytics view (ensuring it’s not filtering out your IP address). We suggest you create a test view for this purpose (it can be very helpful for testing GTM events). From here you’ll want to navigate to the “Real-Time” > “Content” report. If you now go on a specific page of the site, you should see yourself as a user on that page. If yes, you’ve successfully implemented your first GTM tag.

testing pageviews tag on google analytics

As an additional test you can now refer back to your Google Tag Assistant. On the extension you should see both your GTM container and your Google Analytics account. Remember as Google Analytics is implemented through GTM you’ll only see GTM directly in the source code of your site pages.

6th Step - Additional Tracking

Now you’ve setup the standard Google Analytics tracking you can get started on developing your additional tracking. Unlike a pageview tag, this kind of tracking usually has the “track type” of “event”. Events have a slightly different structure to “pageview” tags.

Events are made up of three main parameters.

  1. Categories
  2. Actions
  3. Labels

structure of a ga tag in gtm

You’ll see a 4th parameter for “Value”, however, you can ignore this, unless your setting up Enhanced Ecommerce tracking.

These three parameters represent how the information is shown in Google Analytics. When looking at event data in Google Analytics you’ll see all events have three levels which correspond with the parameters above.

An example setup for a form submission tag is the following:

gtm tag example

This setup uses two variables to fill in the data for the “Action” and “Label”. This allows us to dynamically fill in data. uses a lookup table to tell us which form has been completed i.e. a newsletter form or a contact us form. gives us the page the action took place on. This is helpful as it lets us know which pages are the most effective (for forms which are in multiple locations).

Using this structure also allows us to group events together. By grouping all forms under “Form Submission” we’re able to see a sitewide view of performance. Often being too granular can be a detriment when looking for trends. Similar setups can be used for things like “Document Downloads” where you have the individual downloads as an “Action” or “Label”, keeping the data as streamlined as possible.

Dynamic variables in these parameters also help to streamline the number of tags you need in a container. Instead of having 10 tags for individual document downloads you can have one that dynamically fills in the correct information.

Once you’ve setup your event parameters as you’d like you can then start work on the triggers for your tag.

Unfortunately, “All Pages” won’t work very well for most event tags. In order to work out the best trigger you’ll want to use “preview”.

Preview will look something like this on your site. However, you’re unlikely to have some many tags on your account at the moment.

preview on site

When making a trigger you want to locate a unique identifier for the event you want to track. In the case of a form submit this might be something like the Form ID or the Click Class.

GTM automatically recognises a number of form submissions. These will appear on summary panel as a “Form Submit”. If you select this action you can then see the details of this event.

form submit in summary area

Once you’ve selected the event “form submit” can click on “Variables” in the header of the preview panel.

In the case of this form we can use “Click ID” to identify the form engagement on the page.

Copy the “Click ID” value as we’ll now use this to make a trigger for the Form Submission Tag. Unfortunately we've hidden the exact value for security reasons. 

variables on event in gtm

Go to triggers and select “New”.

Click on the trigger configuration box and select from the User Engagement section “Form Submission”. This trigger automatically has selected “all forms”. We now want to change this to some forms and enter the “Click ID” we just located.

You’ll then want to select “Click ID” as the variable. If it’s not shown natively you can choose it from “Choose Built in variable” in the dropdown.

You can now update the condition to whatever suits your form best. In the case of our form I know all the forms we want to track have a “Click ID” which starts with “hsForm_”. This is because our forms are from HubSpot (all HubSpot forms follow this structure). The number afterwards can then be used to define specific forms. As we want to track all forms on the site through this one tag, I’ll change the value in the box to just “hsForm_” – ensuring the condition is “contains”.

gtm trigger for form submission

Your trigger may look different depending on what type of forms you want to track. It’s important to change the tag from “all forms” to “some forms”, as GTM has been known to get it wrong. In some cases, Google might think a submission which isn’t from a form happened. Ensuring you specify something like the “Click ID” ensures this doesn’t happen.

You can now save this trigger.

You can now return to your tag and select this as your trigger. This tag will now fire whenever a form is submitted.

tags on gtm container

Now we want to be able to see which specific forms have been fired as the “Action”. To do this we want to create a “Lookup Table” variable.

Navigate to the variable section of GTM.

Click new under user-defined variables. Then want to select Lookup Table.

lookup table in gtm

From here select the correct input variable. In the case of the forms we want to track it’s the “Click ID” which is the defining aspect of the form. So, you’ll need to select this as the input variable.

In the input section you’ll want to put the exact “Click ID” for each form you want to see. In Output you want to put the descriptive value you want to see in Google Analytics. This might be something like Contact Us, as this is much more helpful then a random number.

example lookup table for gtm

Save the variable.

Return to your form tag and click the Lego piece in the Action parameter box. From here you can select the variable you just made. Save the tag.

variable as action parameter in gtm

Now it’s time to test. To do this select preview, again. If it’s already active, then you’ll need to click refresh – otherwise the changes you made won’t become active in the preview.

Now trigger the tag by clicking submit on the form (depending on your setup you may need to fill out the form fully). From here you can select “Form Submit” from the summary tab. You should then see your tag firing. If it fired now, click on the tag.

Looking at the tag that fired on “Form Submit” you should now be able to see the properties (click show more if needed). Here you can check the lookup table is working and saying the right form. Anything you see here will go into Google Analytics (so check everything looks right). In the screenshot below the lookup table has been used for the label and not the action. How you order these is up to you. 

example data sent to google analytics

If you’ve got a field coming up as undefined then you need to double check your setup and the attributes you selected (whether it’s “Click ID” or another attribute) are exactly correct. The nature of GTM is you can easily make mistakes and the tag won’t work if one thing or character is wrong.

7th Step – Selecting Objects

Being able to select an object on your website is key to tracking specific events. Whether it’s a form submission button, a CTA button, video element or link.

When selecting an object for a trigger in GTM you need to make sure you're selecting something that’s unique. This way you can ensure that your tag won’t misfire on something you don’t want to track. A great example of this is with AJAX events. When an AJAX event happens something, which might usually require a page reload to trigger will happen on the current page automatically. This often happens when a form is filled out or you select a filter option from a dropdown on a page.

So, if you want to track when a form is submitted (that uses an AJAX event) you’ll need to specify another detail, not just that it’s an AJAX event. Otherwise you could be sending data to Google when someone selects something from say a dropdown menu item. Doing so will then potentially affect the validity of your data. Something you could select as a requirement on an AJAX event to select a form only could be its “Form ID” or “Click Class”. It’s unlikely a dropdown and a form will have the same “Click Class” so this can be a great option in some cases.

Listeners, what are they?

Listeners in Google Tag Manager allow you to see and select certain objects which otherwise might be invisible to GTM. An AJAX for example isn’t natively tracked in GTM, unlike say a normal Form Submit. Because of this is you trigger a form, and nothing happens you might need to install something like an AJAX tag on GTM. This is fairly straightforward if you use a plugin such as the one provided by Lunametrics.

See below video for how to install one of these plugins from an already made recipe:

[INSERT VIDEO]

8th Step – Governance & Structure

When you start to build you GTM account up it can be very simple and clean. However, the longer you have said account you can find it becomes harder to manage. Although GTM will almost always be easier to control then if all the code on your account was directly on your website, following some best practices can ensure the longevity of the account.

  1. Follow defined naming conventions
  2. Use folders – group by channel or use i.e. Google Analytics, Plugins, Google/Bing Ads, Facebook
  3. Streamline Tags – if possible, combine multiple tags into a single dynamic tag.
  4. Keep multi country sites in one container – in practice we’ve found this to be easier.
  5. Keep tags, triggers and variables under similar names (that way you can easily find what you need).
  6. Delete redundant and old tags – if they’re no longer needed streamline your account and do a bit of spring cleaning.
  7. Backup – in case
  8. Keep your version stack clear – name each version correctly with something like “Website Tracking – V1” or specific to the change you made “Facebook Pixel Implementation”. This way if you need to revert back to a previous version you can easily find it. You can also use descriptions for a more detailed explanation.

By following these tips you can help to ensure your container stays well organised and any mistakes can be easily amended.

See below an example of a fairly mature account that's been structured well.

example of mature gtm account

9th Step - Test, Test, Test

Once you’ve implemented the tracking you want on GTM and tested it in ‘Preview’ you can then start testing how your tracking is coming through on GA.

When doing this you should repeat the steps mentioned in the “first tag” section of this post.

Whilst in preview trigger the tags you want to test on your website. Checking they fire correctly and send the right data in preview.

In Google Analytics look at the ‘Real-Time’ > ‘Events’ report to see the events coming through. You can’t see all the data, but you should be able to see the event category and action. This is enough to test everything is coming through correctly in GA. You’ll have to wait for Google Analytics to populate to standard ‘Behaviour’ > ‘Event’s’ report to see the labels of your events.

checking events on google analytics

Go through each tag you want to fire and ensure you’re seeing these events come through in GA. If anything doesn’t look right or doesn’t appear, you’ll want to check how it’s firing in the GTM Preview mode. The best way to look at this is under the specific tag and then ‘Firing Triggers’. You can then see a tick or an ‘x’ for what worked and what didn’t. If you’re seeing an ‘x’ you’ll need to amend how the event fires.

Once you’ve checked everything is correct you can now click “Submit” on your GTM container. This will now set live all your tracking!

10th Step – Implement Goals

With your tags and tracking live on your site you can now look to setup some goals. Remember from earlier on we talked about how we only want to setup ‘proper’ goals and not micro-goals. We would also recommend leaving your tracking to run for a week or so on a test view in Google Analytics. This ensure you don’t mess up and data on your master or filtered views. In this period, you can review the data sent to GA and ensure there’s no mistakes.

When setting up a goal you will want to complete the following process. For this explanation we’ll go over setting up a goal for the Form Submission tag we looked at earlier.

Go to your Google Analytics view (or test view if you’re being careful). Go to the admin section. Under the view column select goal. Click “+ NEW GOAL”. Then select “Custom” under Goal set-up and click continue.
Name your goal (preferably something descriptive that will make sense to everyone) in this case we’ll name it “Form Submission – Contact Us”.

goal description on google analyticsSelect “Event” from the type options and click continue. Another common option is destination which can be used for order confirmation pages etc…
Under Goal details you’ll now need to define the event conditions to trigger the goal. In the case of the Form Submission we’ll want to add in:

  • Fill in the Category of the event you want to set as a goal. For this goal we’ll add in “Form Submission”.
    Fill in the Action you want to set as a goal. For this goal we’ll add in “Contact Us”
    We can leave the label blank as this will be the page path. This isn’t needed for this goal.
    If you have a value associated to a Form Submission lead you can fill this into the value section. However, you can leave this blank if not.

goal setup and details on gaIf this event/goal has happened on your site previous and you’ve put in the right details, you can then verify the goal with the link at the bottom of the page. You can then see the conversion rate of this goal on your site for the last 7 days. If this is above 0% your goal is likely working.

Now save your goal and your goal is done.

The next step is to test the goals you’ve created in the same way as your events. I know it might seem like we’ve talked about this a lot, but it really is essential! You’ll want to run through each goal one by one and check the real-time report. To see real-time goals, you’ll just want to use the Real-Time > conversions report. Remember Google Analytics will only track unique goal completions in a session. So, if you trigger a goal twice you might only see one conversion in GA.

testing goal conversions on google analytics

After you’re happy with this, I’m happy to say you’ve now successfully implemented and tested your website tracking.

Other Resources

Getting started with GTM can seem like a daunting and overwhelming task to start with. However, it’s fairly straightforward once you get the hang of the basics. Hopefully this post has helped with this, but if you’d like any more information there’s a massive community of GTM enthusiast which are always ready to provide information and a wealth of resources for free.

Simo Ahava – this guy is a GTM legend and if you’re looking for anything GTM he’s probably written about it. Some of his posts can be quite complex but he has tips and tricks for all levels.

Bounteous (previously LunaMetrics) – this is a great website with a heap of knowledge for everyone. It also provides a large selection of plugins for GTM. Reducing the amount of time, it takes to setup your account. They might take a little bit of customisation, but we’ve never experienced any issues.

People – Whether it’s on Twitter or Stack Overflow there’s a whole community of developers who work on GTM and love the platform. Be sure to do some research and follow these types of people. They’ll often provide the latest news and updates and much more. You can also follow the Innovation Visual Twitter for regular updates on GTM as well. Some ideas for people to follow below.

  • Lukas Bergstrom
  • Julien Coquet
  • Jeff Sauer
  • Doug Hall,
  • Claudia Kosny

Google – unsurprising Google itself is always a good place to start. They have a lot of documentation on all the basics. However, for more complex and custom solutions you’ll likely need to look at people like Simo Ahava.

Additionally, here at Innovation Visual we work on GTM on a daily basis and have worked on a whole range of projects, large and small. If you’d like some advice on GTM or would like to tell us about a tracking project we’d love to hear it. Feel free to get in touch with one of our experienced GTM developers here.

Topics: Website, GTM, Google Analytics