Google Tag Manager can do so much more than just fire your conversion tracking pixels. Learn how you can use GTM's out-of-the-box functionality, plus custom HTML and jQuery scripts, to track everything your heart desires - and even go beyond tracking to do things like personalize and canonicalize your site!
Track Everything with Google Tag Manager - #DFWSEM May 2017
Track Everything with
Google Tag Manager
DFWSEM May 2017
Today we’re talking about:
• What Google Tag Manager is and
why it’s great
• How to use its basic functionality to
track all manner of things
• How to use its customization
abilities to track EVEN MORE
• How to use it to do things besides
Ruth Burr Reedy
Director of Strategy, UpBuild LLC
Intro: What is Google
Loading a Webpage
When your browser requests a webpage from your server, it goes and gets all the
components of your site, assembles them into a site, and returns that to you. All
those component parts are called…
@ruthburr #DFWSEMThe DOM! No, not Dominic Toretto, street racer and family man.
The Document Object Model (DOM)
<title> <meta> <p> <img>
The Document Object Model is basically a branching “tree” of everything on the
site – starting with the document as a whole, then breaking into its component
parts, and their component parts, and so on for every object on the site.
“Tags” in the context of tag management systems aren’t HTML tags like e.g. your
such as conversion tracking pixels or the code that sends data to Google Analytics.
Tags are usually implemented in the <head> of your site. That means a
development ask to get them implemented, and it means that having a lot of tags
can bloat your DOM and slow down page load time.
Google Tag Manager
<title> <meta> GTM
Google Tag Manager is a container that sits in the <head>, that basically says “do
everything in this box.” Then, you can add or remove whatever you want through
the GTM interface without having to get developers involved.
Old and Busted:
GTM also means that you no longer have to manually add event tracking code to
things that you want to fire GA events. Instead, you can use GTM to add event
tracking, which really increases the number of events you can easily track.
Add the Container
To start, add the container to your site. There’s a tag for the <head> and a tag
immediately after the opening <body> tag.
If you’re on WordPress, there are plenty of plugins that will do this. The one we
use is just called “Google Tag Manager for WordPress.”
Make Sure It’s on Every Page
Use the Custom Search functionality in Screaming Frog to find pages that have
your GTM ID on them, along with any that don’t.
Figure out what you want to track! You don’t need to track everything – resist the temptation
of data for data’s sake – but in a perfect world, what questions would you be able to answer
about how people use your site, and what information would you need to answer them?
Develop Naming Conventions
Category Action Label
Site section or
Action taken Element acted
Footer Social button
Product Page Related
Write down every event you want to track and define some naming conventions around your
categories, actions and labels. Consistent naming conventions means other people at your
organization will be able to understand your data and set up tracking in a consistent way.
Built-In Tag Templates
GTM has a ton of built-in templates for commonly-used tags. Check out the tags you use and
move as many as possible into GTM. Not only does GTM make tags easier to implement, it
makes them easier to remove later. Old tags can really drag down your page load time.
Basic Analytics Tracking
Move your Google Analytics tracking into GTM by firing the Universal Analytics
tag on Page View. Note that you can enter your GA UID as a static value, or as a
Basic Analytics Tracking
Create a variable that’s your GA UID. It will make implementing Analytics tags a lot easier
so you don’t have to copy and paste it every time – plus it means you can copy tags to
other containers easily as long as the GA UID variable is called the same thing.
Make sure you don’t have hard-coded and GTM Google Analytics tracking at the same
time – it will make your data messy. Also, make sure you don’t have a gap between
removing hard-coded tracking and implementing in GTM, or you’ll have no data at all.
Analytics Implementation Methods Go Head-to-Head Seamlessly Switch from Hardcoded Analytics to GTM
Here are a couple of blog posts with additional information on implementing GA
tracking in GTM, and switching from hardcoded to GTM correctly.
Basic Event Tracking
@ruthburr #DFWSEMNow let’s track some events.
Basic Event Tracking
Your Category, Action and Label can all be static values, or variables. For the
most part, “Non-Interaction Hit” will be False, unless you want to track an event
that doesn’t require a user interaction, such as a video auto-play.
You can add custom variables, but GTM also includes a lot of built-in variables for
things like CSS Element, Click URL, Form ID, Page URL, etc. that you can use to
configure tags and triggers.
RegEx Like Crazy
As with many things related to Google Analytics, Google Tag Manager becomes a
lot more customizable with the use of regular expressions. Here’s an example of
RegEx being used to fire a tag on blog posts, but not at the main blog page at /blog.
Mix and Match
• Content expansions
• Video views
• Page Views
• Social traffic
• Page URL
• Page path
• Link text
• Site section
• Form ID
So with the built-in variables, you can already track a ton of stuff and use a ton of
other stuff as your event labels.
What is the Data Layer?
The Experience layer is everything a user can see and interact with –
“Experience,” if you will – on a site. The Application layer is the database that
drives the experience. The data layer sits between those two things.
The Data Layer
You can push information into the data layer that the user doesn’t necessarily need to see, but
that you still want to follow them. Think of it like a pocket – people can’t see what’s in your
pocket, but you still carry it with you and you can pull things out of your pocket at any time.
Passing Data In
Listen and Push
Using GTM, we can “listen” for an event and then, when it happens, push that
information into the data layer – then use GTM to get that data out and into
simpler and more pleasant to use. We use BuiltWith to see whether or not a site is
Use GTM to Inject jQuery
If your site isn’t built with jQuery, you can use GTM to inject it. This can be a bit
fiddly so I wouldn’t recommend doing it unless you’re pretty sure you know what
jQuery Selectors and Handlers
Selectors: Locations in the
Handlers: Actions on
Every location in the DOM has a unique jQuery selector, which is basically the same
thing as a unique CSS selector. A handler is an action on those locations. (The Rock
is Dom’s handler with the Domestic Security Service in the movies! GET IT?)
How to Find Your Selector
To find an element’s unique jQuery selector, we use a Chrome extension called
jQuery Unique Selector.
Cheat sheet for CSS selectors: http://www.cheetyr.com/css-selectors
The tool will give you a unique selector for an object, but they’re often inelegant
and unwieldy. If you’d like a cheat sheet to find CSS selectors without the tool,
check out this link from the folks at Cheetyr.
In addition to individual objects, you can find a selector for a group of objects, to
target all of them. The selector on this slide is for the top nav of UpBuild.io.
A handler is an action that can be taken on an object. Some common handlers
include click, submit, hover, and change, but there are lots of others.
1.with a unique jQuery selector
2.that can be interacted with
can be tracked using GTM.
@ruthburr #DFWSEMThis is my whole point.
Custom HTML Tags
Look at the links For each one, do this:
Let’s walk through the anatomy of a custom HTML tag to find an element based
on its selector, listen for an action, and then push GA event information into the
Custom HTML Tags
Listen for a click, and when
it happens, do this:
Custom HTML Tags
‘event’: ‘KPI Event’,
‘event.action’: ‘nav click’,
‘event.label’: jQuery(“ul#menu-main-menu a”)
Put this info into
the data layer:
An event called
Grab the link text and
make it lowercase
Getting Data Out
Additional Reading: Data Layer Variable Versions Explained by Simo Ahava
Now we’re going to create custom variables in GTM that match the variables
we’re pushing into the data layer with our custom HTML tag. You’ll usually want
Data Layer Version 2 – for more on the topic, check out Simo’s post.
Getting Data Out
Remember when we pushed an event called “KPI Event” in our Custom HTML tag
earlier? Now we’re going to create a trigger for a tag to fire when the KPI Event
Getting Data Out
Finally, we create a UA tag to pull our custom variables out of the data layer and
then send them into Google Analytics, and set it to trigger on our KPI Event
Sometimes when you’re using things’ IDs and selectors as your event labels, their names aren’t pretty or
easy to understand. GTM has a function called Lookup Tables that will allow you to push a different
value into GA. In this example, it’s easier to use a lookup table to give our forms understandable names
Track Form Submits
(not Button Clicks or Thank You Page Visits)
Using this methodology, we can listen for a .submit() handler on a form, tracking
the actual form submission as opposed to a click on the submit button or a thank
you page view.
Multiple Ways to Do One Thing
You may have noticed that GA’s click tracking can’t differentiate between multiple
instances of the same link on one page. Using unique selectors, you can figure
out which link people are actually clicking.
Drive a Site Redesign
If you know in advance that you’re going to be doing a site redesign, you can use
GTM event tracking to learn about how people use your site – underused real
estate, popular links, etc.
You can listen for a .change() handler on your form fields and then push that data
when a form isn’t submitted. Using nested variables, you can start to see which
fields people fill out and where they abandon the form.
Set Custom Dimensions
Additional Reading: Custom Dimensions with Google Tag Manager on Google Analytics Help
Beth asked about passing blog post dates into Google Analytics. You can set a
custom variable based on the post date’s CSS selector, then pass that to GA as a
Merge GA and CRM Data
Additional “Reading”: How to
Connect Your CRM & Web
Analytics Platforms on Portent
Since CRM software assigns users unique IDs, you can grab those IDs and pass them
into a custom dimension, then use GA’s Data Import functionality to import e.g. lead
status (no PII though!) to track users’ activities relative to their conversion behaviors.
Level 3: Beyond
You can use GTM for things besides tracking!
Here’s How to Generate and Insert Rel
Canonical with Google Tag Manager,
by Lucía Marín on Moz
You can use GTM to generate canonical tags, if you don’t have access to add
them manually or at the template level.
Update Element Styles
You can use GTM to update element styles! Don’t do this a lot, or for everything, but if you know a
change is scheduled, you can make it now in GTM while you wait for it to be deployed. Note that if you
fire at Page View, the original version will display until the page is loaded, so fire on DOM Ready instead.
Inject semantic markup
Additional Reading: Using Google Tag
Manager to Dynamically Generate Schema.org
/ JSON-LD Tags
by Chris Goddard on Moz
You can use GTM to inject semantic markup! We’ve been able to get markup to
validate in the testing tool, show up in GSC and generate rich snippets with no
inline markup at all.
@ruthburr #DFWSEMUse GTM to set cookies based on user behavior…
@ruthburr #DFWSEM…Then listen for those cookies and use GTM to personalize your site!
A Word of Warning
Live by the DOM, die by the DOM. If a redesign or other change causes your
elements’ selectors to change, your tracking will break! Make sure you document
what you’re doing, so you can easily update your tracking as needed.
Time to Test
All this customization means you’re going to need to do a lot of testing and
tweaking to get everything just the way you want it.
GTM’s Preview environment allows you to test changes and see their effect, to
make sure the data you need is being passed the way you want it to be, before
you publish your tags.
The Workplaces function means that if more than one person/team is accessing
GTM, they can build tags separately without worrying that publishing their
changes will publish someone else’s incomplete work.
The Environments functionality means that if you have e.g. different dev, staging
and production environments, you can publish the same tags to each environment
one at a time, allowing you to test and maintain consistency.
GTM’s Preview functionality doesn’t work as well when you click a link, because it loads a
new page before you can see what fired on the page you were just on. The GTM Sonar
extension is a click listener that will record the click without following the link.
If you’re waiting on a container to be implemented but want to get started
configuring your tags, you can use the GTM Injector extension to inject GTM onto
a page, so you can test.