An Intro to Google Tag Manager

Connected_Four_Way_Lanes_With Cars_Top_view

If you’ve looked into setting up Google Analytics before or you’re working with us, you’ve probably heard of Google Tag  Manager. In today’s blog, I’ll explain what Google Tag Manager is, why it’s important and run through how to use it to setup a basic Google Analytics tag.

What is Google Tag Manager?

Google Tag Manager (GTM) is a platform that allows you to deploy and update marketing or measurement tags on websites with minimal changes required to the site. In practical terms, this means that, once installed, Google Tag Manager allows you to quickly and easily setup website tracking, reducing the back and forth between marketers and developers that can delay these deployments. It’s most commonly used in conjunction with Google Analytics (and is one of the preferred methods of implementing it), but can be used with other services such as Facebook Pixels, Google Ads Remarketing and Conversion Tracking.

From a developer’s perspective, Google Tag Manager is a platform that allows you to inject various analytics and Javascript snippets into a website through a single snippet, reducing the complexity of installing all of them directly onto the website.

As an example of what Google Tag Manager can do, I recently deployed a tracking scheme on a client’s website, including tracking conversions for Google Analytics such as Link Clicks, Form Submissions, PDF downloads and Video Plays, while only adding the GTM snippet and less than 10 lines of code to the website itself.

How Does Google Tag Manager Work?

Google Tag Manager works off of Triggers and Tags, with Variables used to support both:

google_tag_manager_flow_chart

The basic process of firing a tag in GTM is as follows:

  • An “event” occurs on a web page. This event can be almost anything, from loading a web page, clicking a link, downloading a file, scrolling to a certain point on the website, submitting a form, pressing play on a video, etc.
  • A Trigger, setup in GTM, listens for the event. When it occurs, the trigger then “fires” the tags which are associated with it. You can place various clauses and restrictions on the trigger to specify exactly when you want it to fire.
  • When fired, a Tag will gather relevant information and then send it off to Google Analytics or any other service using GTM. The relevant information is usually the metrics you are trying to track, such as what web page is currently being viewed, what link has been clicked or what file has been downloaded.
    For more advanced users, Tags can also be used to execute JavaScript snippets, making GTM even more flexible.

Throughout the process, Variables can be used to support Triggers and Tags. Variables can be simple information, such as the current page’s URL which can be used as a Trigger (fire a tag when this page is loaded) or a Tag (send the current page URL to Google Analytics). They can also be more complex, from DOM Elements to JavaScript Variables, Data Layer Variables and even Lookup/Regex Tables.

Initial Setup

Setting up Google Tag Manager on a website is simple and just requires cutting and pasting two bits of code into your website’s header and body. It’s very straightforward, but if you’re uncomfortable with your website’s code, you can ask a developer to do this for you.

In the example below, I’ll show you a simple way of adding the GTM code snippet on a WordPress website:

Account_Set_Up_Container_GTM

1. Firstly, you’ll need to head over to Google Tag Manager. If you don’t already have an account, create one with a Google Account. Once you’re in GTM, click Create Account in the top right, then fill out the details. Make sure to choose Web as your target platform.

Install_google_tag_,manager_code_snippet

2. After creating the account, you should be prompted with two code snippets. You’ll need them later, so you can either save them now or come back to them later (you can find them under Admin -> Container -> Install Google Tag Manager).

3. Once you’ve created the account, go ahead and publish an empty container by clicking Submit in the top right and then Publish again. If you don’t publish a container, you’ll receive a 400 Bad Request error message later when testing. Once you have published, enter Preview mode by clicking the button next to Submit.

Google_Tag_Manager_Insert_Header_Footer_Scripts
4. Next, in your WordPress CMS, you’ll need to add the code snippets from earlier into the header of your website. If you don’t know how to do this, I suggest downloading the plugin Insert Headers and Footers. Even if you’re a developer, I suggest you use a plugin or something similar as it decouples the GTM setup from the theme. Once installed, go down to Settings -> Insert Headers and Footers, then paste the first code snippet into the top field and the second snippet into the middle one. Click Save when finished.
Banner_Vector_Graphics_Lets_Get_Virtual_Coffee

5. You can now test your installation by refreshing your website. If you see the GTM Debug Panel at the bottom, your installation has worked!

Deploying Your First Tag

Now I’ll show you how to deploy the Universal Analytics tag. This will replace the Google Analytics .gtag that you may have been using if you had already implemented Google Analytics without GTM.

Google_Analytics_Page_View_Tag
  1. In Google Tag Manager, go to Tags and then click New.
  2. Give your tag a name. We use GA – Google Analytics Page View Tag, GA for Google Analytics and then a description of what the tag is used for.
  3. Click on Tag Configuration and select Google Analytics: Universal Analytics.
  4. A few new options should appear below it. For the Track Type, choose Page View. For the Google Analytics Settings, click New Variable.
  5. Name your new variable, we named ours GA Tracking ID. Then insert your Google Analytics Tracking ID (You can find this in your Google Analytics Dashboard under Admin -> Property => Tracking Code. Click Save once you’re done.
  6. Now click on Triggering. You should see an option of various triggers appear. Choose All Pages – Page View. This trigger will fire on all pages on your website upon loading the page.
  7. Click Save at the top. Now your first Trigger and Tag should be setup. To test it, click Preview and then refresh your website. You should see the GTM debug pane at the bottom of the page, and it should indicate that the Tag was fired. You can also check your Realtime charts in Google Analytics to see it working.
  8. Once you’ve confirmed its working, in Google Tag Manager, click Submit and deploy the container to set the tag live.

What Next?

Using Google Tag Manager for the Universal Analytics tag is just the very basics of what Google Tag Manager can do for your website. I encourage you to play around with triggers and tags to see just what’s possible within GTM.

With GTM, you can more accurately measure the user behaviour across your website and gain better insights on your website’s performance. At more advanced levels, you can even track what items in an online store are being viewed the most and how far down your purchasing funnel customers are getting. If you want something measured on your website, then Google Tag Manager can probably do it.

If you have any questions about Google Tag Manager or any topics you want explored, drop a comment below or give us a yell on Twitter, Facebook or Linkedin.

rotating_orange_square_giphy

Like this blog post? Sign up to our email newsletter – Lab Report – and never miss a new one. Or, get it sent straight to your Messenger!