Track Everything with Google Tag Manager - #DFWSEM May 2017

@ruthburr #DFWSEM
Track Everything with
Google Tag Manager
DFWSEM May 2017

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

@ruthburr #DFWSEM
The Tracked and the
Curious

@ruthburr #DFWSEM
Intro: What is Google
Tag Manager?

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…

@ruthburr #DFWSEMThe DOM! No, not Dominic Toretto, street racer and family man.

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.

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.

@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.

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.

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.

@ruthburr #DFWSEM
Components of GTM

Tags
@ruthburr #DFWSEMWe talked about tags already.

Triggers
@ruthburr #DFWSEM
Triggers 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.

Variables
@ruthburr #DFWSEM
Variables are pieces of data with names. A custom variable basically tells Google,
“when I say this name, I mean this piece of data.”

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.

@ruthburr #DFWSEM
Let’s Do This!

Add the Container
@ruthburr #DFWSEM
To start, add the container to your site. There’s a tag for the <head> and a tag
immediately after the opening <body> tag.

@ruthburr #DFWSEM
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
@ruthburr #DFWSEM
Use the Custom Search functionality in Screaming Frog to find pages that have
your GTM ID on them, along with any that don’t.

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?

Develop Naming Conventions
@ruthburr #DFWSEM
Category Action Label
Site section or
content area
Action taken Element acted
upon
Footer Social button
click
Facebook
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.

@ruthburr #DFWSEM
Level 1: Standard
Features

Built-In Tag Templates
@ruthburr #DFWSEM
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
@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.

@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.

@ruthburr #DFWSEM

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.

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.

Basic Event Tracking
@ruthburr #DFWSEMNow let’s track some events.

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.

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.

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.

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 #DFWSEM
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.

@ruthburr #DFWSEM
Level 2: Customization

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.

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.

Passing Data In
dataLayer.push({
‘event’:’something happened’
});
@ruthburr #DFWSEM
We can use a bit of JavaScript called dataLayer.push to push information into the
data layer.

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.

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.

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.

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?)

How to Find Your Selector
@ruthburr #DFWSEM
To find an element’s unique jQuery selector, we use a Chrome extension called
jQuery Unique Selector.

@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.

@ruthburr #DFWSEM
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.

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.

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.

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.

Custom HTML Tags
<script>
jQuery(this).click(function(){
@ruthburr #DFWSEM
Listen for a click, and when
it happens, do this:

Custom HTML Tags
<script>
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!

Custom HTML Tags
<script>
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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

@ruthburr #DFWSEM
Level 3: Beyond
Tracking
You can use GTM for things besides tracking!

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.

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.

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.

Set Cookies
@ruthburr #DFWSEMUse GTM to set cookies based on user behavior…

Personalize
@ruthburr #DFWSEM…Then listen for those cookies and use GTM to personalize your site!

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.

@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.

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.

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.

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.

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.

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.

Track Everything with Google Tag Manager - #DFWSEM May 2017

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Track Everything with Google Tag Manager - #DFWSEM May 2017

Similaire à Track Everything with Google Tag Manager - #DFWSEM May 2017 (20)

Plus de Ruth Burr Reedy

Plus de Ruth Burr Reedy (9)

Dernier

Dernier (20)

Track Everything with Google Tag Manager - #DFWSEM May 2017