Google Tag Manager Training

ABQ Web Geeks Google Tag Manager Training

Peter HowleyJanuary 9, 2016

Peter Howley

[email protected] These slides I will work into the GTM slides so that we can explain some of the GTM checkboxes and fields in more detail; we won't present these first slides as-is, in other words.

ABOUT US➔ Web analytics, market research and

campaign measurement consulting➔ Founded in Washington DC in 2002➔ Atlanta, NM and DC offices➔ Founders Harvard and Georgia Tech

MBAs➔ Consultants came from Bain, CNN.com,

washingtonpost.com, Yale.edu, Advertising.com

About Us: Clients➔ Media & Publishing➔ Financial Services➔ Ecommerce➔ Business-to-Business➔ Government & Not-for-Profit➔ Agencies

About Us: Alliances & Tools➔ Web analytics➔ Conversion optimization➔ Tag management➔ Testing➔ APIs➔ Heat maps➔ Dashboarding

Peter Howley ➔ Leads Reporting Practice➔ MBA from Harvard Business School➔ Google Analytics Individual Qualification

Previously:➔ Led web analytics at washingtonpost.com➔ Advertising.com➔ Strategy consultancy Bain & Company

Expertise:➔ Web analytics strategy➔ Data visualization➔ Media, government, B2B sectors

Jim Snyder➔ Leads Analytics Implementation Practice➔ MBA from Georgia Tech ➔ Google Analytics Individual Qualification

Previously:➔ Data foundataion at Weather.com ➔ Yale University➔ Launch team for CNN.com

Expertise:➔ Tag management➔ Mobile analytics➔ CRM integration➔ Healthcare, media, higher ed, tech sectors

About Us: Team

Patrick McWilliams➔ Tag Management & Integration Lead

Previously:➔ Led E-commerce integrations at Tealium

Platforms:➔ Google Tag Manager➔ Tealium➔ Segment➔ Mixpanel➔ Google Analytics

Expertise:➔ Tag management➔ CRM integration➔ Javascript development➔ Ecommerce sector

Justin Marciszewski➔ Data Reporting, Analysis &

Interpretation

Previously:➔ Principal Data Analyst at Harbor Island Analytics➔ Co-Founder of Sweetmetrics

Platforms:➔ Google Analytics➔ R➔ MySQL/SQL➔ BigQuery➔ Klipfolio

Expertise:➔ Data warehousing➔ Data mining & statistical analysis➔ Ecommerce, publishing sectors➔ A/B split testing

About Us: Team

Google Tag Manager➔ Overview➔ Tags➔ Triggers➔ Variables➔ GA Tag Options➔ DataLayer➔ Auto-Event Tracking➔ Mobile➔ Blacklists & Whitelists➔ Troubleshooting & Validation

Agenda

➔ Deployment mechanism to load:◆ DOM content◆ javaScript

➔ Supports a number of built-in integrations➔ Supports infinite number of customized integrations via custom image and HTML

containers

Overview

➔ Automation of almost all tags:◆ GA

●Events, Custom Vars/Dims, Virtual Pageviews, etc.◆ Other Analytics◆ AdWords & DoubleClick◆ Other ad tags◆ Notably not split testing

➔ Faster implementation➔ Does not require technical resources to add, remove, modify tags➔ Speeds up site by firing only needed tags through Rules➔ Greater flexibility to track and target key segments

Benefits

➔ Launched in Q4 2012◆ GA Classic, Adwords, Doubleclick◆ Managing JS

➔ Auto Event Tracking Q4 2013◆ Listen for on-page events◆ Eliminates need for most hard-coding

➔ v2 released in Q3 2015◆ Event listeners already enabled box checks

➔ Greater flexibility to track and target key segments

History

➔ Developer Guide◆ https://developers.google.com/tag-manager/

➔ Help Center◆ https://support.google.com/tagmanager/?hl=en

➔ Tag Manager Official Website◆ http://tagmanager.google.com

Documentation

https://developers.google.com/tag-manager/

https://developers.google.com/tag-manager/

https://support.google.com/tagmanager/?hl=en



➔ Container◆ JavaScript code block you should add on every page

➔ Tags◆ Javascript, iFrame, image DOM elements that add some function to a site

➔ Triggers (Rules)◆ User-defined action that will cause a specific tag to be loaded on the page

➔ Listeners◆ Every click, link click and form submission is automatically ‘listened’ for, once

enabled➔ Data Layer

◆ Object that contains all of the information that you want to pass to Google Tag Manager

Building Blocks

➔ Container Size◆ The container size limit is ~ 200K◆ The number of tags is roughly limited to 200

➔ Consolidation◆ Consider consolidating tags, rules and variables◆ For example - have a look-up table to handle

Special Considerations

Old way: add once, then again with each upgrade or

customization

New way: add once & only once across

all pages

Implementation


Agenda

➔ GTM enables management of Google and third-party tags in its interface

◆ Both versions of GA

➔ Each Tag fires based on one or more Rules

◆ Typically based on page URL or Element clicked

◆ Can be based on events like time passing or user clicks

◆ Boolean logic

➔ Tags can use data in Macros to send details to GA

◆ E.g., built-in Macro can pass URL of downloaded file as Event Label

Tags

Tags

Choose a native ‘Product’ to apply to your container

Tags

Many other tags are integrated, so consider consolidating tags in

GTM & removing hard-coded

For Products not on this list, cut & paste

HTML and JS in Custom HTML Tag

Tags

Creating Tags

Provide a name using conventions

Creating Tags

For many vendors, choose a

Tag Type

Creating Tags

Click Continue

Creating Tags

Configure the Tag based on

vendor instructions or

code

Creating Tags: Adwords Tags

From var google_conversio

n_id =

From var google_conversio

n_label =

➔ In AdWords account:◆ Navigate to Tools and Analysis >

Conversions

◆ Click the Code tab

➔ Select an action name on the left and select “I make changes to the code”

◆ In the code box, find "var google_conversion_id = ". Enter the number you find into the google_conversion_id field on this page.

◆ In the code box, find "var google_conversion_label = ". Enter the number you find into the google_conversion_label field on this page


Agenda

➔ The rule(s) attached to a tag govern when the tag is fired or not fired

◆ Tag must have at least one rule in order to fire

◆ Rules are evaluated during runtime and associated tags are fired when conditions are met

➔ A Trigger is composed of one or more conditions

◆ Each condition takes the form: [Variable] [Operator] [Value]

Triggers

PDF Download

Triggers

Triggers

Set Triggers here

Triggers

Link ends in PDF

Operator types: equalscontainsstarts withends withmatches CSS selectormatches RegExmatches RegEx (ignore case)does not equaldoes not containdoes not start withdoes not end withdoes not match CSS selectordoes not match RegExdoes not match RegEx (ignore case)less than or equal togreater thangreater than or equal to

List of all Variables

Triggers

Trigger Applied Blocking rules enabled here


Administration & Implementation: Agenda

Variables➔ Name-value pairs for which the value is

populated during runtime◆ E.g., predefined Variable “url” has

value of the current page URL

➔ GTM has predefined Variables◆ Enable creation of the most

commonly needed Tags and Triggers

◆ You can create additional Variables to suit specific requirements

Variable types

➔ Uses◆ Enable Triggers that are based on

dynamic conditions

◆ Pass values from one Tag to another during runtime

➔ Tips◆ Since Variables can help many

Triggers and Tags, name descriptively

◆ Select the Variable Type that tells GTM where to find the Variable value at runtime

● (e.g. JavaScript Variable, DOM Attribute).

Variable can “pipe in” label

Variable can define a Trigger

Variables

Enable Built-In Variables

Enable these to ‘listen’ for types of

clicks

Enable these to ‘listen’ for types of Form submissions

For Ajax sites with no change in URLs

Scraping

Scraping

Using built in attributes on

page to ‘Scrape’ into GTM

➔ Cons:◆ As the site changes your tracking

breaks if you’re depending on it to track key actions

➔ Pros:◆ Easy to configure right out of box◆ Don’t have to bother developers

➔ Best Practice:◆ Build out a site tagging guide for

developers for key site actions because your site WILL change

Scraping


Administration & Implementation: Agenda

Creating GA Tags

Provide a name using conventions

Creating GA Tags

Almost always use Universal

Analytics

Only use on sites using legacy GA

tracking (deprecated)

Click continue

Creating GA Tags

Creating GA Tags

Need at least one Pageview on every page

Creating GA Tags

Event tracking

Creating GA Tags

Ecommerce (legacy)

Creating GA Tags

Social Actions (shares on your site via plugins)

Creating GA Tags

Cross-domain tracking

(mostly classic GA)

Cross-domain tracking

(mostly classic GA)

➔Track user activity on pages separately from pageviews

◆ Any Flash-driven element, like a website or Movie player

◆ Embedded AJAX page elements◆ Page gadgets◆ File downloads◆ Clicks on links to other domains◆ Load times for data

➔Correct Bounce Rate by defining visits with these user activities as not Bounces

Events

Variable can “pipe in”

Parameters

Can also be strings

➔To track pageview-like activity related to content not already tracked as Pageviews

◆ Best to use when part of navigation-driven elements on your site

◆ Example: form confirmation page that is has the same URL as the form itself and needs to be differentiated in GA

➔ Add to Pageview total

Virtual Pageviews

Type in “page”; don’t use

Variable of that name

Form the URI to appear in GA via

Variables and strings

➔ Integration of DoubleClick with GA enables:

◆ Demographics reports in GA◆ Retargeting to GA Segments in

AdWords◆ Google Display Network

impressions in GA➔ Requires

◆ Change to Privacy Policy◆ Change to GA Tracking Code

Display Ad Features

Links to Privacy Policy guidance

Custom Dimensions➔ Show visitor activity by custom

segments created by modifying GTM◆ E.g. Generation Users,

(potentially Practice Users, Leads not yet signed up).

➔ 20 Custom Dimensions in (UA Upgrade required)

➔ Use name-value pair tags in GTM to refine tracking

➔ Traits become another Dimension in GA that can:

◆ Be a Secondary Dimension in most reports

◆ Be added to a Custom Report◆ Be the basis of a Custom Segment◆ Custom Dimensions CAN be the

basis of views and Filters

➔ Visitor◆ the client that visits the site, such as the browser or mobile phone operated by a

person◆ e.g., Customers that purchased a subscription. Differentiate from non-subscribers

➔ Session◆ the period of time during which the visitor is active on the site◆ e.g., visits that included making a comment on an article. How many average do

per session?➔ Hit

◆ activity on the user's behalf which sends a GIF request to the Analytics servers➔ Product

◆ Requires Enhanced E-Commerce◆ Metadata about a purchase◆ e.g. Out Of Stock SKU, ◆ Combined with Product Revenue to compare

Custom Dimension Scope

Define your Custom

Dimensions within the

Admin

Enter an Index (1-20) and Value

(usually a Variable)

Custom Dimension Setup

➔GA is designed to track single domains in individual Properties◆ Multiple domains can share a

Property ID and Views◆ But by default, each visit that

views more than one domain is counted as:● 2 visits ● by 2 unique visitors● with 1 visit reported as referred from

the first domain ➔A Tag customization is required to

integrate such visits into one session

➔Examples◆ Cross-subdomain

● www.client.com > blog.client.com● www.client.com > cart.client.com

◆ Cross-domain● www.client.com > www.client-

blog.com● www.client.com > www.client.co.uk● www.client.com > client.cart-

vendor.com

Subdomain & Cross Domain Tracking

➔Cross-domain Tracking◆ Use the Linker plugin on all domains

● define all domains to be linked● this will decorate all links with the proper

parameters◆ On each site/domain, set allowLinker

to true◆ Create Views for each domain

● filter by hostname● exclude all linked domains to prevent self

referrals◆ Create a Rollup View of all domains

Comma- separated list

of domains

Subdomain & Cross Domain Tracking

➔ Enhanced Funnels Analysis➔ Attribution to Promotions and

Banners➔ Accounting for Refunds➔ Product Impressions and Clicks

Added to Cart Purchased

Got Refunde

d

Promotion Viewed

Product Impression

Viewed

Product Detail Viewed

Checkout

StartedBilling Shippin

gPayme

nt Review

Product Clicked

Promotion Clicked

Enhanced Ecommerce

GTM Configuration Ecommerce Data Layer (Usually on Thank You Page)

Enhanced Ecommerce

Box Check to enable

Enhanced Ecommerce

Data from transaction passed into

GTM

Variables that are passed into

the E-commerce

script


Agenda

➔ Google Tag Manager functions best when deployed alongside a data layer◆ Is an object that contains all of the information that you want to pass to Google

Tag Manager.◆ Ensures maximum flexibility, portability, and ease of implementation◆ Passes information such as events or variables to Google Tag Manager ◆ Avoids referencing variables, transaction information, page categories, and other

important signals scattered throughout page➔ Explicitly declaring the data layer is optional

◆ Can still access values from the page using the the Variables feature◆ Can not use events without the data layer

➔ The data layer:◆ Uses W3C data layer standard◆ Can be defined on page load◆ Can be appended on event actions◆ Can use other standards and transform in GTM◆ Can be populated from on-page variables or DOM elements

Data Layer

https://support.google.com/tagmanager/answer/6106899

➔ Data Layer Variables◆ Must be above Container code on

page

➔ Data Layer with HTML Event Handlers◆ Instead of using dataLayer.push()

for each variable and event, you can push multiple variables and events at once

Data Layer

Social Tag (on your site)

Data Layer

DataLayer for Thank You

Page

GTM Snippet - goes on EVERY

PAGE


Agenda

➔ No longer have to base Rules on GTM Events fired by Listeners◆ gtm.linkClick◆ gtm.click ◆ gtm.formSubmit

Auto-Event Tracking

Auto-Event Tracking: Listeners➔ No longer required to add listeners

➔ Instead add a Trigger with the type of listener you want◆ Click◆ Form◆ History Change (VPV)◆ JS Error◆ Timer◆ Custom

Google Tag Manager ➔ Overview➔ Tags➔ Triggers➔ Variables➔ GA Tag Options➔ DataLayer➔ Auto-Event Tracking➔ Mobile➔ Blacklists & Whitelists➔ Troubleshooting & Validation

Agenda

➔ Implement to Mobile SDK to manage tracking codes on mobile apps

➔ Also manages configuration values ◆ that you want to change in the future◆ that can change conditionally◆ Instead of defining constant values in

your mobile app, ◆ Examples:

● dimensions and locations of ads served in your application

● game settings● user interface settings, such as differences

between platforms● localized strings determined by device

language

Mobile


Agenda

➔ Added to page dataLayer for control & security

➔ Able to block or allow ◆ specific tags or macros◆ classes of objects (groups of tags,

triggers, and variables that have the same capabilities)

➔ Rules that govern whitelists and blacklists:◆ When a whitelist has been set,

relevant tags, triggers, and variables will only execute if they are in the whitelist

◆ When a blacklist has been set, tags, triggers, and variables will only execute if they are not in the blacklist

◆ When both have been set, blacklists take precedence

Blacklists and Whitelists

➔ Available tags, triggers, and variables, their types, and the classes that they belong to


➔ Available classes and their relationships to other classes◆ The Whitelisted

Automatically column represents the list of classes that will be implicitly whitelisted when the class from that row is whitelisted

◆ Blacklisted Automatically column represents the list of classes that will be implicitly blacklisted when the class from that row is blacklisted.



Agenda

➔ Previewing ◆ See site & tags via unpublished

version of container◆ No need to create a version first with

Quick Preview➔ Debug mode

◆ See an additional GTM debugging overlay to site

➔ Share ◆ Get link to send to non-GTM users◆ They can preview and debug

container without login to GTM

Troubleshooting & Validation


Status of each Tag

Value of each

Variable

➔ WASP Chrome Extension debugs GTM dataLayer to show GTM Events◆ gtm.linkClick◆ gtm.click◆ gtm.timer

➔ Details common Triggering hooks for each◆ elementTarget◆ elementUrl

WASP Chrome Extension


Internet

Google Tag Manager Training