Oct 31, 2014

Getting Started with Google Tag Manager

Google Tag Manager is a free tool that works in conjunction with your Google Analytics account. It records both your normal Analytics data, as well as those things that Analytics doesn't track so easily, like downloads, external link clicks, and form submissions (events).

While there is a little bit of work to be done upfront, in the long run, this means that you can easily measure the effect of any extra content that you add.

This means it's perfect for those of you who aren't into coding – Google Tag Manager allows you to fill in the fields required, and the magic happens behind the scenes. You can also test the tags by using the special ‘Preview and Debug' function, making sure that everything is actually working before pushing it live.

Our Google Tag Manager guide can help you get started; alternatively, if you would like us to implement a solution for you, please email or give bwired a call on 03 8563 9100.


Getting started with Google Tag Manager

Tracking events like downloads, sign-ups, button clicks and link clicks is made easy with Google Tag Manager. It works by inserting some code on every page you'd like to track (usually every page on your site), then setting up rules that fire tags whenever an ‘event' occurs.

Let's say you want to know how many people download your catalogue. Adding a pdf download tag to Google Tag Manager will create an event that you can track in Google Analytics every time someone downloads the PDF. In the past, you had to add a code snippet to every single event you wanted to track – now, you create tags and rules for all the events you're likely to need, and let Tag Manager and Analytics do the work for you!

N.B. The first thing you'll need to do is get your Google Analytics code and make a note of it – you'll need this for most of the tags we set up. If you don't have one, create a new Analytics account and get your code (which will look something like UA XXXXXXXX-XX)

Register with Google Tag Manager

https://www.google.com/tagmanager/web/

Click to add a New Account

Add all your details as directed, and set up a container for Web Pages.

Click Create Account and Container. This will bring up the Tag Manager code.

Within the header of your site (either in a template, or on every page), you should already have some Google Analytics code. You need to delete the old code first of all.

Then, just after the opening <body> tag (on EVERY PAGE you will be tracking – generally this is every page), add the Google Tag Manager code which will look like this

<!-- Google Tag Manager --><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><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= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})window,document,'script','dataLayer','GTM-XXXXX');</script><!-- End Google Tag Manager -->

Now you're set up for Google Tag Manager – the next step is adding in your tags. Follow the steps below to add a basic tracking tag; next/previous tags; buy button tracking; pdf downloads; and form submits (like a newsletter registration). 

Adding a basic tracking tag

Go to New > Tag

Tag Name: Page View

Tag Type: Universal Analytics

Tracking ID: UA XXXXXXXX-XX

Track Type: Page View

Firing Rules: All Pages

Adding a Link Click Listener

This essentially 'listens' to every page for clicks. Once you have this tag installed, you can start recording clicks.

Go to New > Tag

Tag Name: Link Click Listener

Tag Type: Link Click Listener

Wait for Tags: Check

Check Validation: Check

Firing Rules: All Pages

Save

Adding a link click listener to Google Tag Manager

Adding a Previous/Next Tag

Go to New > Tag

Tag Name: Carousel

Tag Type: Universal Analytics

Tracking ID: UA XXXXXXXX-XX

Track Type: Event

Category: Carousel

Action: Click

Label: {{element text}} – NB: This will bring in text that's behind the next/previous arrows

Firing Rules:

Create New Rule

Rule Name: XXX

{{event}} equals gtm.linkClick

{{element text}} contains Next (or whatever the text for your next/previous buttons is called)

Save

Tracking Previous and Next in Google Tag Manager

Rules for Previous and Next in Google Tag Manager

Adding an event to a Buy button

This is useful, particularly if you want to measure how many people are clicking to buy versus actual sales, or if the buy function leads to an external site.

Using your browser's Inspect function, hover over the button you want to track, right-click and choose ‘Inspect Element'. This will show you the element's details that you'll need to know for the firing rule.

My ID is buy.

Create New > New Tag

Tag Name: Buy Button

Tag Type: Universal Analytics

Tracking ID: UA-XXXXXXX-XX

Track Type: Event

Category: Buy

Action: Click

Label: Buy Now Footer

Firing Rules: Add

Create New Rule

Rule Name: buy now

{{element id}} contains logo-footer-buy (or your ID, or class (make sure you choose {{element classes}} if you choose class) +

{{event}} equals gtm.linkClick

Save (rule)

Save Tag

Buy tag to Google Tag Manager

Buy rule Google Tag Manager

Adding event tracking to downloads

One of the most common complaints about Google Analytics is its inability to track common downloads like PDFs and MP3s. Google Tag Manager makes this relatively easy.

Again, this is a Universal Analytics tag with an event track type.

Go to New > Tag

Tag Name: PDF Download

Tag Type: Universal Analytics

Tracking ID: UA XXXXXXXX-XX

Track Type: Event

Category: Download

Action: Download

Label: PDF {{element url}} – NB: This will bring in the file's name

Firing Rules:

Create New Rule

Rule Name: PDF click

{{event}} equals gtm.linkClick

{{url}} contains pdf

Save (rule)

Save Tag

Event on PDF download

Download tracking for Google Tag Manager

Repeat this process for any other download types you need, such as mp3 or doc. Just be sure to change the tag name, label (to MP3 {{element URL}}), and create a new rule with a different name and {{url}} contains mp3 (or doc). 

Tracking form submits

Another frequent use for Google Tag Manager is looking at how many people are actually filling in your form. GTM has created a special macro for this, called a Form Submit Listener.

You first need to add this tag to all your pages.

Create Tag > New Tag

Tag Name: Form Submit Listener

Tag Type: Event Listener > Form Submit Listener

Wait for Tags: Check

Max wait time: 2000 milliseconds

Check Validation: Check

Firing Rules: All Pages

 

Form Submit Listener for Google Tag Manager

Tracking a particular form

To incorporate tracking of a particular form, you'll need to create a new tag.

Create Tag > New Tag

Tag Name: Enquiry

Tag Type: Universal Analytics

Tracking ID: UA XXXXXXXX-XX

Track Type: Event

Category: Form

>Action: Submit

Label: Contact {{element url}} – NB: This will bring in the URL of the page the form was submitted on - useful if it's on all pages

Add a form tag with Google Tag Manager

Firing Rules:

Create New Rule

Rule Name: Contact Form

{{event}} equals gtm.formSubmit

{{element id}} equals *contact (or your ID, or class (make sure you choose {{element classes}} if you choose class)

Save (rule)

Save Tag

*At the top of the form (in the source), it will have an action and (hopefully) an ID or class - this is what you use for the element ID (or class).

Add a rule for form submission for Google Tag Manager

Previewing and Testing 

Once you've added all the tags, you're ready to test.

Go to Overview > Create Version

Choose Preview > then click Debug

Preview and Debug in Google Tag Manager

Open your site, and it will show you which tags are firing when you open the page, then those that fire on the events that you've tagged.

In Google Analytics, click on Real-Time > Events. Now you'll be able to see the events that you've fired within the last 30 minutes. This is a great way to test that you've got all the correct data coming in, and that it's labelled as expected.

Find Real-Time Data in Google Analytics

 

Events in real-time

Now you can return to Tag Manager, and publish your container. Data will start filtering through into Analytics from then on.

If you would like us to implement a Google Tag Manager solution for you, please email or give bwired a call on 03 8563 9100.


Hayley is bwired's Marketing Manager, and handles the Services division. She splits her time between marketing campaigns, delving into clients' data, making stats presentable, and trying to compile pithy sentences. Read her Services blog, Digital Marketing blog, or Google Analytics blog.

Leave a comment