track everything with google tag manager - #dfwsem may 2017
TRANSCRIPT
![Page 1: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/1.jpg)
@ruthburr #DFWSEM
Track Everything with
Google Tag ManagerDFWSEM May 2017
![Page 2: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/2.jpg)
Hello DFWSEM!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
things
• How to use it to do things besides
tracking
@ruthburr #DFWSEM
Ruth Burr Reedy
Director of Strategy, UpBuild LLC
https://upbuild.io
@ruthburr
![Page 3: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/3.jpg)
@ruthburr #DFWSEM
The Tracked and the
Curious
![Page 4: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/4.jpg)
@ruthburr #DFWSEM
Intro: What is Google
Tag Manager?
![Page 5: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/5.jpg)
Loading a Webpage
@ruthburr #DFWSEM
Styles
Scripts
Fonts
Assets
Content
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…
![Page 6: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/6.jpg)
@ruthburr #DFWSEMThe DOM! No, not Dominic Toretto, street racer and family man.
![Page 7: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/7.jpg)
The Document Object Model (DOM)
@ruthburr #DFWSEM
Document
HTML
<head> <body>
<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.
![Page 8: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/8.jpg)
Tags
@ruthburr #DFWSEM
“Tags” in the context of tag management systems aren’t HTML tags like e.g. your
title and description tags. They’re little bits of JavaScript that send data to a 3rd party,
such as conversion tracking pixels or the code that sends data to Google Analytics.
![Page 9: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/9.jpg)
@ruthburr #DFWSEM
Document
HTML
<head>
<title> <meta>
tag tag
tag tag
tag tag
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.
![Page 10: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/10.jpg)
Google Tag Manager
@ruthburr #DFWSEM
Document
HTML
<head>
<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.
![Page 11: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/11.jpg)
Old and Busted:
<button
onClick=“ga(‘send’,
‘event’, ‘whitepapers’,
‘download’, ‘tracking-
guide’);”>Tracking
Guide</button>
New Hotness:
@ruthburr #DFWSEM
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.
![Page 12: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/12.jpg)
@ruthburr #DFWSEM
Components of GTM
![Page 13: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/13.jpg)
Tags
@ruthburr #DFWSEMWe talked about tags already.
![Page 14: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/14.jpg)
Triggers
@ruthburr #DFWSEMTriggers tell tags when to fire. This can be on something like a page view, or an
action such as a click, an event or a form submission.
![Page 15: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/15.jpg)
Variables
@ruthburr #DFWSEMVariables are pieces of data with names. A custom variable basically tells Google,
“when I say this name, I mean this piece of data.”
![Page 16: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/16.jpg)
Nested Variables
@ruthburr #DFWSEMGTM also allows for nested variables. You can set variables A, B, and C; tell GTM
that A+B+C=X, ask for X, and GTM will return A+B+C.
![Page 17: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/17.jpg)
@ruthburr #DFWSEM
Let’s Do This!
![Page 18: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/18.jpg)
Add the Container
@ruthburr #DFWSEMTo start, add the container to your site. There’s a tag for the <head> and a tag
immediately after the opening <body> tag.
![Page 19: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/19.jpg)
@ruthburr #DFWSEMIf 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.”
![Page 20: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/20.jpg)
Make Sure It’s on Every Page
@ruthburr #DFWSEMUse the Custom Search functionality in Screaming Frog to find pages that have
your GTM ID on them, along with any that don’t.
![Page 21: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/21.jpg)
Dream Big
@ruthburr #DFWSEM
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?
![Page 22: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/22.jpg)
Develop Naming Conventions
@ruthburr #DFWSEM
Category Action Label
Site section or
content area
Action taken Element acted
upon
Footer Social button
click
Product Page Related
products click
{{page path}}
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.
![Page 23: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/23.jpg)
@ruthburr #DFWSEM
Level 1: Standard
Features
![Page 24: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/24.jpg)
Built-In Tag Templates
@ruthburr #DFWSEMGTM 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.
![Page 25: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/25.jpg)
Basic Analytics Tracking
@ruthburr #DFWSEM
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
variable.
![Page 26: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/26.jpg)
Basic Analytics Tracking
@ruthburr #DFWSEM
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.
![Page 27: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/27.jpg)
Basic Analytics Tracking
@ruthburr #DFWSEM
![Page 28: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/28.jpg)
Caution!
@ruthburr #DFWSEM
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.
![Page 29: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/29.jpg)
Additional Reading
@ruthburr #DFWSEM
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.
![Page 30: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/30.jpg)
Basic Event Tracking
@ruthburr #DFWSEMNow let’s track some events.
![Page 31: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/31.jpg)
Basic Event Tracking
@ruthburr #DFWSEM
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.
![Page 32: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/32.jpg)
Built-In Variables
@ruthburr #DFWSEM
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.
![Page 33: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/33.jpg)
RegEx Like Crazy
@ruthburr #DFWSEM
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.
![Page 34: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/34.jpg)
Mix and Match
Track…• Clicks
• Content expansions
• Video views
• Events
• Page Views
• Conversions
• Social traffic
• etc.
By…• Page URL
• Page path
• Link text
• Referrer
• Site section
• Form ID
• etc.
@ruthburr #DFWSEMSo with the built-in variables, you can already track a ton of stuff and use a ton of
other stuff as your event labels.
![Page 35: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/35.jpg)
@ruthburr #DFWSEM
Level 2: Customization
![Page 36: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/36.jpg)
What is the Data Layer?
@ruthburr #DFWSEM
Experience
Data
Application
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.
![Page 37: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/37.jpg)
The Data Layer
@ruthburr #DFWSEM
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.
![Page 38: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/38.jpg)
Passing Data In
dataLayer.push({
‘event’:’something happened’
});
@ruthburr #DFWSEMWe can use a bit of JavaScript called dataLayer.push to push information into the
data layer.
![Page 39: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/39.jpg)
Listen and Push
@ruthburr #DFWSEM
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
Google Analytics.
![Page 40: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/40.jpg)
jQuery
@ruthburr #DFWSEM
https://builtwith.com
The best way to do this is with jQuery, which is a library that makes JavaScript
simpler and more pleasant to use. We use BuiltWith to see whether or not a site is
built using jQuery – most sites with JavaScript functionality are.
![Page 41: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/41.jpg)
Use GTM to Inject jQuery
@ruthburr #DFWSEM
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
you’re doing.
![Page 42: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/42.jpg)
jQuery Selectors and Handlers
@ruthburr #DFWSEM
Selectors: Locations in the
DOM
Handlers: Actions on
those locations
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?)
![Page 43: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/43.jpg)
How to Find Your Selector
@ruthburr #DFWSEMTo find an element’s unique jQuery selector, we use a Chrome extension called
jQuery Unique Selector.
![Page 44: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/44.jpg)
@ruthburr #DFWSEM
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.
![Page 45: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/45.jpg)
@ruthburr #DFWSEMIn 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.
![Page 46: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/46.jpg)
Handlers
@ruthburr #DFWSEM
.click() .submit()
.hover() .change()
SUBMIT
SUBMIT
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.
![Page 47: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/47.jpg)
So What?
@ruthburr #DFWSEM
![Page 48: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/48.jpg)
Anything:
1.with a unique jQuery selector
2.that can be interacted with
can be tracked using GTM.
Anything.
@ruthburr #DFWSEMThis is my whole point.
![Page 49: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/49.jpg)
Custom HTML Tags
<script>
jQuery(“ul#menu-main-menu a”).each(function(index){
@ruthburr #DFWSEM
Unique selector
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
data layer.
![Page 50: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/50.jpg)
Custom HTML Tags
<script>
jQuery(“ul#menu-main-menu a”).each(function(index){
jQuery(this).click(function(){
@ruthburr #DFWSEM
Listen for a click, and when
it happens, do this:
![Page 51: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/51.jpg)
Custom HTML Tags
<script>
jQuery(“ul#menu-main-menu a”).each(function(index){
jQuery(this).click(function(){
dataLayer.push({
‘event’: ‘KPI Event’,
‘event.category’: ‘nav’,
‘event.action’: ‘nav click’,
‘event.label’: jQuery(“ul#menu-main-menu a”)
[index].text.toLowerCase()
@ruthburr #DFWSEM
Put this info into
the data layer:
An event called
KPI Event
Grab the link text and
make it lowercase
Custom
variables!
![Page 52: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/52.jpg)
Custom HTML Tags
<script>
jQuery(“ul#menu-main-menu a”).each(function(index){
jQuery(this).click(function(){
dataLayer.push({
‘event’: ‘KPI Event’,
‘event.category’: ‘nav’,
‘event.action’: ‘nav click’,
‘event.label’: jQuery(“ul#menu-main-menu a”)
[index].text.toLowerCase()
});
});
})
</script>
@ruthburr #DFWSEM
![Page 53: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/53.jpg)
Getting Data Out
@ruthburr #DFWSEM
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.
![Page 54: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/54.jpg)
Getting Data Out
@ruthburr #DFWSEM
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
tag fires.
![Page 55: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/55.jpg)
Getting Data Out
@ruthburr #DFWSEM
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
trigger.
![Page 56: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/56.jpg)
Lookup Tables
@ruthburr #DFWSEM
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
rather than changing their names in the site code.
![Page 57: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/57.jpg)
Track Form Submits(not Button Clicks or Thank You Page Visits)
@ruthburr #DFWSEM
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.
![Page 58: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/58.jpg)
Multiple Ways to Do One Thing
@ruthburr #DFWSEM
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.
![Page 59: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/59.jpg)
Drive a Site Redesign
@ruthburr #DFWSEM
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.
![Page 60: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/60.jpg)
Form Abandonment
@ruthburr #DFWSEM
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.
![Page 61: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/61.jpg)
Set Custom Dimensions
@ruthburr #DFWSEM
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
custom dimension.
![Page 62: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/62.jpg)
Merge GA and CRM Data
@ruthburr #DFWSEM
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.
![Page 63: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/63.jpg)
@ruthburr #DFWSEM
Level 3: Beyond
Tracking
You can use GTM for things besides tracking!
![Page 64: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/64.jpg)
Generate rel=canonical
@ruthburr #DFWSEM
Additional Reading:
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.
![Page 65: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/65.jpg)
Update Element Styles
@ruthburr #DFWSEM
Before: After:
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.
![Page 66: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/66.jpg)
Inject semantic markup
@ruthburr #DFWSEM
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.
![Page 67: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/67.jpg)
Set Cookies
@ruthburr #DFWSEMUse GTM to set cookies based on user behavior…
![Page 68: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/68.jpg)
Personalize
@ruthburr #DFWSEM…Then listen for those cookies and use GTM to personalize your site!
![Page 69: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/69.jpg)
A Word of Warning
@ruthburr #DFWSEM
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.
![Page 70: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/70.jpg)
@ruthburr #DFWSEM
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.
![Page 71: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/71.jpg)
Preview
@ruthburr #DFWSEM
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.
![Page 72: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/72.jpg)
Workspaces
@ruthburr #DFWSEM
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.
![Page 73: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/73.jpg)
Environments
@ruthburr #DFWSEM
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.
![Page 74: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/74.jpg)
GTM Sonar
@ruthburr #DFWSEM
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.
![Page 75: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/75.jpg)
GTM Injector
@ruthburr #DFWSEM
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.
![Page 76: Track Everything with Google Tag Manager - #DFWSEM May 2017](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a6dbe217f8b9a484d8b4e65/html5/thumbnails/76.jpg)
@ruthburr #DFWSEM
Thank You!