Google Tag Manager: Ultimate Crash Course - 2017 MnSearch Summit

GOOGLE TAG MANAGER
ULTIMATE CRASH COURSE
#MnSummit @mike_arnesen | upbuild.io

WHO AM I?

— @MIKE_ARNESEN
"I’M THAT GUY
YOU KNOW FROM
THE INTERNET!"

at UpBuild
FOUNDER/CEO

in the
REAL WORLD
MASSIVE GEEK

GET THIS DECK
BIT.LY/GTM-CRASH-COURSE

CRASH COURSE!
THIS WILL BE A

THIS IS A CRASH COURSE
IF YOU WANT A BETTER UNDERSTANDING
OF THE FUNDAMENTALS,
YOU'RE IN THE RIGHT PLACE.

IF YOU ALREADY KNOW GTM
AND WANT TO LEARN ADVANCED TACTICS,
YOU'RE ALSO IN THE RIGHT PLACE.

IF YOU'RE HOPING TO
LEARN HOW TO DO THINGS
YOU DIDN'T EVEN KNOW YOU COULD DO,
YOU'RE IN THE RIGHT PLACE!

I WANT YOU
TO GET TAKEAWAYS

TAG MANAGEMENT?
WHAT IS
TAG MANAGEMENT?

TAG MANAGER:
A SOLUTION FOR MANAGING WEBSITE TAGS
THROUGH A CENTRAL INTERFACE DECOUPLED
FROM THE SOURCE CODE OF THE WEBSITE.

* TECHNICAL DEFINITION

TAG MANAGER:
A WAY TO ADD CODE TO YOUR THING
WITHOUT CHANGING YOUR THING.
* SIMPLIFIED DEFINITION

YOUR PORTAL
INTO THE SOURCE CODE!

A WARP ZONE
TO SKIP THE HARD PARTS!

THE ULTIMATE HACK
TO OVERRIDE THE SYSTEM!

BY THE POWER  
OF GTM
ADD, CHANGE, OR
REMOVE TAGS
What

tagmanager.google.com
BY THE POWER  
OF GTM
IN A
WEB INTERFACE
Where

BY THE POWER  
OF GTM
USING A SMALL
SNIPPET OF
JAVASCRIPT CODE
How

BY THE POWER  
OF GTM
BECAUSE IT SOLVES
ALL OUR PROBLEMS!
Why?

PROBLEMS?
WHAT PROBLEMS?

– Marketing Manager
“We love that idea,  
but realistically it's not going to
happen until next quarter.  
We've run out of development
budget."

– Business Owner
“I know you checked last week,  
but our outsourced dev thinks the
semantic markup implementation  
is right this time. Can you check?"

–Director of Marketing
“Our new homepage went live  
this morning and we noticed that
analytics stopped working.  
How hard is that to ﬁx?"

– Marketing Strategist
“We need to have this new pop-up
asking for donations on our site by
the end of the week.  
I don't think it's going to happen,
but do you have any ideas?"

– Marketers
“Why is everything on ﬁre?"

THE DECK CAN SEEM LIKE
IT’S STACKED AGAINST US

WHY MUST LIFE
BE SO HARD?!

WHY MUST I FAIL
AT EVERY ATTEMPT
AT MARKETING?!

GOOGLE TAG MANAGER
SOLVES ALL OUR PROBLEMS!*

GOOGLE TAG MANAGER
* Well, a lot of things

GOOGLE TAG MANAGER
* Well, a lot of things ** Your mileage may vary

— All of us, I hope
"But how?!"

BASIC COMPONENTS
OF GTM
Tags
Triggers
Variables

TAGS
THE WORKERS,
THE MOVERS & SHAKERS,
THE STARS OF THE SHOW

TAGS
Common Tags
• UA Page View — Page View
• UA Event Tracking — Events
• AdWords — Conversion Tracking
• Facebook Pixel — Custom HTML
• LinkedIn — Insights
• DoubleClick — Floodlight Counter

TRIGGERS
EVERY TAG
NEEDS A TRIGGER

TRIGGERS
Common Triggers
• All Pages — on Page View
• All Pages — on Window Loaded
• Some Pages — Matching Certain Paths
• Link Clicks — Matching Certain Attributes
• Form Submission — Matching Certain Forms
• Custom Event — DataLayer Events

VARIABLES
ANY DATA SUBJECT TO
CHANGE.
MOST TRIGGERS LEVERAGE
SOME TYPE OF VARIABLE.

VARIABLES
Common Variables
• Page Path, URL , & Hostname — Built-Ins
• Google Analytics Tracking ID — Constant
• Click Classes & Click IDs — Built-In
• Click Element — For CSS Selection
• Form ID — Built-In
• GA Settings — Settings Conﬁguration

BY THE
POWER OF JAVASCRIPT

GOOGLE TAG MANAGER
IS AN ABSTRACTION OF JAVASCRIPT

FROM GTM INTERFACE
Tag
Trigger
Variable

TO JAVASCRIPT CODE
$(document).ready(
function() {
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send','pageview', 
location.pathname);
}
)
Tag
Trigger
Variable
Variable

TO JAVASCRIPT CODE
$(document).ready(
function() {
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send','pageview', 
location.pathname);
}
)
Tag
Trigger
Variable
Variable
Sorry, purists. jQuery is way easier to look at.

TO JAVASCRIPT
THE CAUSE OF,
AND SOLUTION TO,
ALL OF LIFE’S PROBLEMS

LIMITATIONS OF GTM
IT’S A CLIENT-SIDE APPLICATION

SERVER-SIDE
RUNS ON A SERVER
BEFORE IT GETS
TO THE BROWSER

CLIENT-SIDE
RUNS IN A USER’S BROWSER
AFTER INITIAL DELIVERY

AJAX
Asynchronous
JavaScript and XML

AJAX
Asynchronous
JavaScript and XML
JSON!

ENTER,  
THE DATALAYER

DATALAYER
MAKE IMPORTANT DATA
AVAILABLE TO YOUR
CLIENT-SIDE APPLICATION
Server
Client
DataLayer

DATALAYER
SLIDE THINGS THROUGH
TO THE OTHER SIDE OF
THE BULLETPROOF GLASS
Server
Client
DataLayer

GET THE
DATA OUT
OF THERE!
BECAUSE BEING
TRAPPED ON
THE WRONG SIDE OF
THE GLASS SUCKS

Client
THE
DATALAYER
IS VERSATILE
IT CAN BE USED TO
PASS DATA FROM THE
SERVER THROUGH
TO THE CLIENT
ServerDataLayer

Client
THE
DATALAYER
IS VERSATILE
OR PUSH CLIENT-SIDE
DATA INTO AN EASY-
TO-ACCESS POCKET
ServerDataLayer

DATALAYER BASICS
<script>
dataLayer = [];
</script>
Goes ABOVE your
GTM snippet!

DATALAYER BASICS
<script>
dataLayer = [{
'userType': 'registered',
'lifetimeValue': 108.00,
}];
</script>
Pass through data from
your server

DATALAYER BASICS
<script>
dataLayer = [{
'userType': 'registered',
'lifetimeValue': 108.00,
}];
</script>

ADVANCED DATALAYER
<script>
dataLayer.push({
'event': 'KPI Event',
'eventCategory': 'nav click',
'eventAction': 'about us'
});
</script>
Pass in
your own data

HOW TO USE GTM
LIKE A PRO
IMPRESS YOUR COWORKERS

HOW TO USE GTM
LIKE A PRO
IMPRESS YOUR FRIENDS

HOW TO USE GTM
LIKE A PRO
IMPRESS YOUR FRIENDS
IMPRESS YOUR SIGNIFICANT OTHER

MY BEST  
GTM PRO TIPS

MY BEST GTM PRO TIPS
1. Track Clicks, the basic way
2. Track Clicks, the UpBuild way
3. Page-Level Custom Dimensions
4. Implement JSON-LD, at scale
5. Analyze Form Abandonment
6. VPVs for Single-Page Experiences
7. Make Website Changes, without
developers
8. Recruiting Technical Talent, bonus!

Goal: Understand which clickable
elements get the most (or least)
use. Optimize accordingly.
TRACK CLICKS

elements get the most (or least)
use. Optimize accordingly.
Approach: Tell GTM to listen for
clicks on the elements we care
about and then send readable
data to Google Analytics.
TRACK CLICKS

TRACK CLICKS
1. Enable built-In Variables
2. Create new GA (Universal) Tag
3. Create new Trigger
4. Preview (Test), Submit, & Publish

TRACK CLICKS
nav > ul > li > a

TRACK CLICKS

QUICK TESTING FOR SELECTORS
function testSelector (s){
var te = document.querySelectorAll(s),
prettyData = "Includes: ";
for (var i = 0; i < te.length; i++) {
prettyData += te[i].innerHTML
+ " (Link " + (i+1) + ")";
if (i < te.length-1) {
prettyData += ", " }
}
return prettyData;
}
1. Ctrl + Shift + J / Cmd + Option + J in Chrome
2. Copy + Paste
3. type: testSelector('your css');
codepen.io/mike_arnesen/pen/mwMqee/

QUICK TESTING FOR SELECTORS

elements get the most (or least) use.
Optimize accordingly.
TRACK CLICKS
The UpBuild Way!

Approach: Collect the same data, but…
TRACK CLICKS
The UpBuild Way!

Approach: Collect the same data, but…
A. in the most efﬁcient way possible
B. with the fewest GTM tags
C. in a way that scales
TRACK CLICKS
The UpBuild Way!

1. Create 3 New DataLayer Variables
2. Create a Tag to Send All Event Data
3. Create a Trigger for "KPI Event"
4. Establish an HTML Tag to Manage Click
Tracking
TRACK CLICKS
The UpBuild Way!

1. Create 3 New DataLayer Variables
2. Create a Tag to Send All Event Data
• use {{dataLayer variables}}
3. Create a Trigger for "KPI Event"
4. Establish an HTML Tag to Manage Click
Tracking
TRACK CLICKS
The UpBuild Way!

ADVANCED CLICK TRACKING
<script>
// Primary navigation
jQuery("nav > ul > li >
a").each(function(index) {
jQuery(this).click(function() {
dataLayer.push({
'eventCategory': 'Navigation',
'eventAction': 'Primary Nav Click',
'eventLabel': jQuery("nav > ul > li
> a")[index].text.toLowerCase()
});
});
});
</script>
1. Find a selector for the tracked element
2. Define your data labeling
3. Use jQuery to build dynamic event values
codepen.io/mike_arnesen/pen/OgjOXb

ADVANCED CLICK TRACKING
<script>
// Dropdown nav items
jQuery(".sub-menu > li >
a").each(function(index) {
jQuery(this).click(function() {
dataLayer.push({
'eventCategory': 'Navigation',
'eventAction': 'Dropdown Nav Click',
'eventLabel': jQuery(".sub-menu > li
> a")[index].text.toLowerCase()
});
});
});
</script>
4. Add a new block for each KPI group
5. Put everything within one <script> tag.
codepen.io/mike_arnesen/pen/OgjOXb

Goal: Enable GA segmentation by
page attributes like author,
publication month, word count, etc.
PAGE-LEVEL CUSTOM DIMENSIONS

Goal: Enable GA segmentation by
page attributes like author,
publication month, word count, etc.
Approach: Use GTM variables to
harvest on-page information and
pass in back with our analytics
page view tag.

1. Create a New Custom Dimension in GA
2. Create a New "DOM Element" Variable,
based on the CSS selector of attribute
3. Update your GA Settings variable to set
the Custom Dimension based on the
Variable from Step 2
upbuild.io/blog/track-post-publish-date-custom-dimension-google-analytics/

Goal: Improve SEO by delivering
structured data to Googlebot in
JSON-LD format
IMPLEMENT JSON-LD

Goal: Improve SEO by delivering
structured data to Googlebot in
JSON-LD format
Approach: Use GTM variables to
harvest on-page information (a lot of
it), assemble everything in a JSON-
LD template, and make available to
Google.
IMPLEMENT JSON-LD

1. Map out all the data points you need
2. Create a new "DOM Element" (or "Custom
JavaScript") variable for each
3. Get a JSON-LD template from schema.org
4. Replace placeholder values with
{{variables}}
5. Place within a <script> that outputs
indexable JSON-LD
IMPLEMENT JSON-LD
moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags

6. Get rich snippets!
• Take over world.
IMPLEMENT JSON-LD
moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags

Goal: Understand when users stop
ﬁlling out forms to improve form ﬁll
conversion rate.
FORM ABANDONMENT

Goal: Understand when users stop
ﬁlling out forms to improve form ﬁll
conversion rate.
Approach: Use GTM to deliver
JavaScript that will progressively log
interactions and, upon
abandonment, send a record to GA.
FORM ABANDONMENT

1. Modify the sample script
2. Create a new analytics tag in GTM
3. Create three new DataLayer
variables
FORM ABANDONMENT

variables
4. Use your existing Click Tracking tag
& DataLayer variables
FORM ABANDONMENT

variables
4. Use your existing Click Tracking tag
& DataLayer variables
FORM ABANDONMENT
Learn more
JavaScript!

FORM ABANDONMENT
<script>
var formSelector = "#wpcf7-f511-p15-o1 >
form";
var submitSelector = ".wpcf7-submit";
var formInteractions = [];
var attribute = "name";
var pagePath = window.location.pathname;
...
1. Specify your form selector
2. Specify a submit selector
3. Specify the attr you want as a label
codepen.io/mike_arnesen/pen/gRxorv

FORM ABANDONMENT
...
document.querySelector(formSelector).addEv
entListener("change", function(e) {
var input =
e["target"].getAttribute(attribute);
if (formInteractions[i] !== input) {
formInteractions.push(input);
}
});
... 4. This listens for changes to the form
5. Each change is stored in
"formInteractions"

FORM ABANDONMENT
...
function pushToDataLayer(cause,
formInteractions) {
var prettyPath;
if (formInteractions == "") {
prettyPath = "Nothing set";
} else {
prettyPath = formInteractions.join(" > ");
};
dataLayer.push({
event: "KPI Event",
eventCategory: "Form Abandon Contact Us",
eventAction: prettyPath,
eventLabel: "form abandoned on " + pagePath
+ " triggered by " + cause
});
}
...
6. This lets you push all
interactions to the dataLayer
7. Change "eventCategory" to
suit your needs

FORM ABANDONMENT
...
jQuery(window).on('beforeunload',
function(){
pushToDataLayer("page bounce",
formInteractions);
});
...
8. Before anyone leaves, call pushToDataLayer
function (previous slide)
9. You can provide a custom "cause"

FORM ABANDONMENT
...
jQuery("submitSelector").on("click",
function(){
jQuery(window).off('beforeunload');
});
</script>
10. On submission, remove
abandonment monitoring

Goal: Deﬁne checkpoints in single-page
experiences (e.g., one-page checkout,
conﬁgurators, wizards, long forms) to
understand how they perform.
VIRTUAL PAGE VIEWS

Goal: Define checkpoints in single-page
experiences (e.g., one-page checkout,
configurators, wizards, long forms) to
understand how they perform.
Approach: Use GTM to sent page view
info to the dataLayer, fire a dedicated VPV
tag to send info to GA as pageviews, and
set up a traditional GA goal funnel for
analysis.
VIRTUAL PAGE VIEWS

VIRTUAL PAGE VIEWS
1. Break the process into deﬁned steps.
Decide on virtual titles & URLs
2. Set up the goal in GA
3. Create 2 new "DataLayer" variables
(pagePath & pageTitle)
4. Build new Conﬁg variable for VPVs
5. Set up a VPV Analytics Tag
6. Deploy JS that attaches handlers to the
breakpoints and pushes to the dataLayer.

breakpoints and pushes to the dataLayer.
VIRTUAL PAGE VIEWS

breakpoints and pushes to the dataLayer
VIRTUAL PAGE VIEWS

VPV TRACKING
<script>
var vpvData = [
{selector: "#serviceneed >
input[type='submit']",
title: "Create a Project Form - Step 1",
path: "/vpv/create-project/step-01/"},
{selector: "#gform_next_button_1_27",
path: "/vpv/create-project/step-02/"},
{selector: "#gform_next_button_1_28",
path: "/vpv/create-project/step-03/"}
];
...
1. Define three things for each virtual step
• Selector for click activation, Virtual title,
Virtual page path
codepen.io/mike_arnesen/pen/GEvgww

VPV TRACKING
...
function pushToDataLayer(i) {
dataLayer.push({
event: "vpv",
pageTitle: vpvData[i].title,
pagePath: vpvData[i].path
});
} 
... 2. Write another pushToDataLayer function

VPV TRACKING
...
jQuery(vpvData[0].selector).click(function
(){
pushToDataLayer(0);
});
(){
pushToDataLayer(1);
});
(){
pushToDataLayer(2);
}) 
...
3. Do this for as many steps as you have,
starting at zero.

Goal: Make updates to the website
without having to wait for developers
or use budget prematurely.
UPDATE YOUR WEBSITE

Approach: Use GTM to deliver a
custom HTML tag containing site-
modifying JavaScript to update the
site as the page loads.
UPDATE YOUR WEBSITE

UPDATE YOUR WEBSITE
These changes are
indexable!*

UPDATE YOUR WEBSITE
These changes are
indexable!*
* usually

UPDATE YOUR WEBSITE
These changes are
indexable!*
* usually ** your mileage may vary

UPDATE YOUR WEBSITE
These changes are
indexable!*
* usually ** your mileage may vary *** a lot.

1. Write your HTML and CSS
2. Determine where you want it on the page
& ﬁnd a CSS selector for that spot
3. Remove line breaks from your new code
at http://removelinebreaks.net/
4. Deliver another <script> via a GTM HTML
tag on applicable pages
UPDATE YOUR WEBSITE

4. Deliver another <script> via a GTM HTML
tag on applicable pages
UPDATE YOUR WEBSITE
#about > .col > .vc_col-sm-6:first

4. Use a <script> to combine your selector
with .append() or .prepend() on
applicable pages
UPDATE YOUR WEBSITE

CHANGE PAGE CONTENT
jQuery(yourSelector).prepend('<h
1 id="awesomeHeading">How do we
not have an H1 yet?</h1>');
Definitely this easy. ;-)
codepen.io/mike_arnesen/pen/GEvyYX

Goal: Bury some treasure for
those who might come looking.
Encourage them to apply within.
GEEKY RECRUITING

Goal: Bury some treasure for
those who might come looking.
Encourage them to apply within.
GEEKY RECRUITING
Approach: Use GTM to print out a
message in the developer console
and link to our jobs page.

1. Come up with your message
2. Format according to these specs
3. Test in your own console
4. Deploy as a custom tag through GTM
5. Wait for awesome applicants to come
knocking
GEEKY RECRUITING

1. Come up with your message
2. Format according to Chrome’s specs
3. Test in your own console
4. Deploy as a custom tag through GTM
5. Wait for awesome applicants to come
knocking
GEEKY RECRUITING

PRINT CONSOLE MESSAGES
console.info(
"%cOne of us!! n%cIt looks
like you love poking around in
the console. Us, too!…",
"color: blue; font-size:
25px;text-transform:
uppercase;",
"color: green; font-size:
12px;"
);
codepen.io/mike_arnesen/pen/owepqe

PARTING THOUGHTS
AS WE WRAP UP

TACKLE ANY GTM CHALLENGE
1. Deﬁne the goal ﬁrst
2. Determine where in GA you want
data to go
3. Establish a data-labeling convention
4. Understand the available
components & functions
5. Test, fail, learn, repeat
6. Learn more JavaScript

TROUBLESHOOT
ANYTHING IN GTM
1. Use preview mode liberally
2. Run your code in the dev tools console
3. Is the tag ﬁring too soon or too late?
4. Read blog posts and comment with questions
5. When all else fails, StackOverﬂow

QUICK TIPS & TOOLS
1. Cmd + Click to follow links without leaving the
page
2. Use GTM Injector to access preview mode
without having a container live on the site
3. Use GTM Sonar to see how/if clicks & forms
register
4. Scroll Depth Tracking by Parsnip.co
5. YouTube Tracking on Cardinal Path

DIG DEEPER
1. Google Tag Manager Fundamentals
2. Simo Ahava’s Blog
3. UpBuild’s Blog
4. MeasureSchool on YouTube

THANK YOU!
GET THIS DECK: BIT.LY/GTM-CRASH-COURSE
READ OUR BLOG: UPBUILD.IO/BLOG
FOLLOW ME: @MIKE_ARNESEN | MIKEARNESEN.COM

Google Tag Manager: Ultimate Crash Course - 2017 MnSearch Summit

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie Google Tag Manager: Ultimate Crash Course - 2017 MnSearch Summit

Ähnlich wie Google Tag Manager: Ultimate Crash Course - 2017 MnSearch Summit (20)

Mehr von MnSearch, The Minnesota Search Engine Marketing Association

Mehr von MnSearch, The Minnesota Search Engine Marketing Association (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Google Tag Manager: Ultimate Crash Course - 2017 MnSearch Summit