Google Tag Manager and Event Tracking Setup


by in Tutorials


Google Tag Manager (GTM) is quickly becoming the go-to solution for all digital marketing agencies and teams. Quite honestly, it’s awesome and you should already be using it!

GTM lets you add custom HTML tags and other “pixels” without touching the source code of your website. This is true for most basic implementations.

The new version 2 interface of GTM makes using this seamless solution even easier. This guide is going to help with the initial setup of GTM. If you have tag manager already setup with Google Analytics, some of this will be a nice review.

Also, I wrote a post a while back on SEMRush that dives into the SEO benefits of GTM. Check that out after completing this guide, as it has some great search engine optimization tips.

The purpose of this tutorial is to help you setup “event tracking” with GTM. Let’s get started!

How Event Tracking Collects Data

With Google Analytics (GA), you can take advantage of “events” with your website data. What are events?

In the most simple explanation, events are a way to collect data about visitor behavior with your website content and various web page elements. Configuring “events” in GTM can be intimidating, and I hope to help clear some confusion.

There are many cases where you would want to collect data on how a visitor interacts with your website. The most common interaction is “click” behavior, and using event tracking is the perfect way to collect these metrics.

Configuring GTM with events will require you to modify your website’s source code. However, since this is an intermediate to advanced topic, basic HTML should be something you’re already familiar with.

The Data Layer

As brilliantly discussed by Sumo Ahava, the Data Layer is a data structure that holds all data you want to process from your website to another application. More specifically, it’s a JavaScript array that holds data in key-value pairs.

Moving forward, I will refer to this array object as dataLayer for simplicity.

We will configure a “container” in GTM that will hold “tags”, and the dataLayer is how your website will communicate with this container. More on this in a bit.

To create the dataLayer for processing events, you will need to add the following code just before the closing </head> element on your website:

<script type="text/javascript">
dataLayer = [];
</script>

Now, the “events” will be collected properly, and we can move over to Google Tag Manager to configure the container and associated tags.

Setting up GTM

Ok, let’s finally head over to Google Tag Manager and create a new account and container. It’s very straightforward, as you can see from the image.

GTM account setup

Make sure you choose the “web” option for the container, and hit create. You will then see and need to accept Google’s terms. After that, you will receive the installation code.

Copy and paste the provided code before the closing </head> element again on your website, but make sure this goes before the small dataLayer script we added in the previous step. This is a very important step.

Deploying Google Analytics

If you’re not currently using GTM for Google Analytics, now’s the time to switch. Creating a new tag is simple. You will need your tracking ID from GA to create your first tag.

If you already have GTM setup for GA, then skip down to Creating the Event Tag.

The analytics tracking ID is the familiar looking UA-123456789-1 number, and you can simply copy it from your GA interface.

Log into Google Analytics and go to Admin → Property → Property Settings or in Admin → Tracking Info → Tracking Code to get your tracking ID.

Click the “add a new tag” link from the overview tab on your new GTM container. Next, you will select Google Analytics, then Universal Analytics.

Edit the tag name, enter your GA tracking ID, and select the checkbox to enable display features (optional). The track type will be Page View. Now, click continue, and we have one more step to complete this GA tag setup.

GTM Tag Setup

On the next screen, you will choose which page to “fire” this new tag. Of course, we want to select all pages. Finally, click create tag!

GTM Fire On All Pages

For more detailed instructions on deploying Google Analytics via GTM, you can view the official Google Help page.

Creating the Event Tag

Ok, so now we’re ready to create the event tag that will be used to collect data in Google Analytics.

But first, we need to setup a “trigger” for our tag to fire on. Navigate to “triggers” in the left menu, and create a new trigger.

GTM Custom Event Trigger

Choose Custom Event, they type trackEvent for the event name field. Last, you will want to name your trigger to something you can reference in the next step. This completes the trigger setup.

Next, you will go through the EXACT same process as above for setting up Google Analytics.

Once you get to “track type”, choose “event” instead this time. Below is what the event track type setup looks like.

GTM Event Tag Setup

Let me briefly discuss what everything after track type means. First, we have four event tracking parameters. These are variables that can be anything you want within the curly braces. I’m choosing names that will be easy to implement later on your website.

I’ve outlined the next parameter in red. This non-interaction hit can be set to true or false. It comes down to whether this click will take the user to a new page within your site. If yes, we would set this tag parameter to false.

However, most event tracking will take place on some other type of object. The object might be a click to some type of download, and AJAX request, or even tracking the outbound clicks to your social media sites. Therefore, this is set to true.

We will also need a “trigger” for this tag.

Once you have this configured based on your needs, click continue. On the next step, it will ask you to choose a trigger to fire on.

Select “more” then find the custom event trigger we created previously. Make sure you give your new tag a title, such as Event Tracking.

Event Tracking Website Integration

Here’s where everything comes together, and we actually start tracking the “events”. The previous step to setup the event tag is how the user behavior will interact with the dataLayer and collect our array data.

I’ll use the previous mention of collecting “clicks” for our social pages, since most sites have their social media buttons in the website footer. Our site does as well, and 2 snippets of code are here:

<a onclick="dataLayer.push({ 'event' :  'trackEvent',  'eventCategory' :  'Social',  'eventAction' :  'Footer',  'eventLabel' :  'Facebook' });">Facebook</a>
 
<a onclick="dataLayer.push({ 'event' :  'trackEvent',  'eventCategory' :  'Social',  'eventAction' :  'Footer',  'eventLabel' :  'Twitter' });">Twitter</a>

It should be pretty obvious that you will be adding the onClick event to your footer links. Let’s review what is going on with the rest.

First, we are “pushing” new data into our dataLayer array. Google Analytics will understand the event variable and “fire on” the trigger we created above using the trackEvent value.

Next, we have our custom variables that were created in the step above.  I like to use eventCategory as a high-level grouping, then eventAction as a sub-group. I always use eventLabel to differentiate items within the group. However, the action could be “click” or another high-level grouping that makes sense with your specific strategy.

Google Analytics Events Overview

I left off eventValue as it’s optional, and I’m not interested in assigning value for this quick example. If you’re tracking customer acquisition costs for a particular behavior, the value is something you will want to use.

Once you have everything setup properly, you can open up Google Analytics and go to Behavior → Events → Overview to see the data being collected.

If your site’s traffic is low, this might take some time. Keep in mind that GA is always about a day behind with providing data.

However, you can also test your tag directly in GTM to see if everything is working correctly. There was a Chrome extension that worked well in the past, but it stopped working for some reason, and I would love to hear any replacements.

Conclusion

Google Tag Manger is a great way to organize all of your website tracking codes. You can add Facebook pixels for retargeting, AdWords conversion tracking pixels, and so much more.

Give it a spin and definitely let me know if I left anything off that might help this guide. My goal was to keep this guide short and simple to follow, and hope it helps you setup event tracking quickly.

Please, rate this post:

1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 5.00)
Loading...
Tags: ,

Discussion (2)


  • yogesh agarwal

    Hey Dario,

    Thanks for the post.
    I have added some onclick dataLayer.push events on my page and GTM container code is located in the tag and these events are in somewhere body tag.
    Google suggests having dataLayer.push event above GTM container code. how could I achieve this?

    Reply

    • Dario Zadro

      The “push” events need to come after the GTM container code. Make sure your datalayer variable is set right before the closing “head” tag. I put the GTM container code right after the opening “body” tag. You can view the source on this page to see how everything is structured.

      Reply