Track Everything with Google Tag Manager - #DFWSEM May 2017

@ruthburr #DFWSEM

Track Everything with

Google Tag ManagerDFWSEM 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

http://upbuild.io

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

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

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 #DFWSEMTo start, add the container to your site. There’s a tag for the <head> and a tag

immediately after the opening <body> tag.

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

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.

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

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.

https://www.upbuild.io/blog/analytics-implementation-methods/

https://www.upbuild.io/blog/seamlessly-switch-from-hardcoded-analytics-to-gtm/

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

@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 #DFWSEMWe 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 #DFWSEMTo 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.

http://www.cheetyr.com/css-selectors

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

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.

So What?

@ruthburr #DFWSEM

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.

https://www.simoahava.com/gtm-tips/data-layer-variable-versions-explained/

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

rather than changing their names in the site code.

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.

https://support.google.com/analytics/answer/6164990?hl=en

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.

https://www.portent.com/training/connect-crm-web-analytics-platforms-actionable-insight

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

https://moz.com/blog/heres-how-to-generate-and-insert-rel-canonical-with-google-tag-manager

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.

https://moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags

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.

@ruthburr #DFWSEM

Thank You!

Track Everything with Google Tag Manager - #DFWSEM May 2017

Marketing

Transcript of Track Everything with Google Tag Manager - #DFWSEM May 2017