Google Tag Manager

Avoiding Anti-Patterns

Advanced Auto-Event Tracking

​

​

@fastbloke #SPWK

​

• Tagging…

​

• Tagging…
• It’s moved on from the early days

• Tagging…
• It’s moved on from the early days

<a href="http://www.example.com" onclick="_gaq.push(blah);"> Click Here</a>

• Tagging…
• It’s moved on from the early days

<a href="http://www.example.com" onclick="_gaq.push(blah);"> Click Here</a>

• Tagging…
• It’s moved on from the early days

<a href="http://www.example.com" onclick="_gaq.push(blah);"> Click Here</a>

Confession

​

I <3

Why?

• Measurement with NO CODE
• Tagging
• Speed
• Accuracy
• Quality
• Reduced risk
• Less time
• More time for REAL analysis

​

• This is still possible

​

Why?

The temptation of the dark side is strong

• 5 minutes developing = job done?

Not True!

5 minutes developing without thought now = hours of pain later

​

​

Regular Face Palms

Key DOM elements with no id

Generally poor markup

Forms that post to themselves

Build THAT goal!

Site search with no keyword

Fail to see on site search metrics

Auto firing events

Bye bye bounce rate

TMS misuse

Using GTM to fix site behaviour to improve measurements

​

​

Coming up...

• We’ll see how GTM doesn’t do some of the things we want it to
• Auto-event tracking
• We’ll see how we want to do certain things with GTM in a certain way
• Development
• Debugging

​

• We’ll see how to do these things
• the right way
• without causing future pain, suffering and expense

​

​

Ground rules

• Establish some best practices
• THINK about measurement upfront
• During the design & build phase
• Naming convention
• Don’t abuse your TMS
• Use the measurement layer to measure
• Don’t use the measurement layer to fix your site
• No code is better than no code
• Avoid custom HTML tags

​

Example

• Good markup
• clean
• lightweight
• SEO
• Measurement
• Think in page analytics
• Uses unique element ID
• Uses unique parent element ID
• Think this through early
• Do it RIGHT
• Extract massive value from this diligence

​

Example

<a class="action secondary" href="http://shop.mysite.com/">Buy now</a>

<a class="action secondary"

rel="Name and category of the product" href="http://shop.mysite.com/">Buy now</a>

Use Naming Conventions

• You will quickly build a large repository of
• Tags
• Rules
• Macros
• Maintenance and Management
• Ensure only required entities and the right entities are used
• Find what you need to use quickly and easily
• Testing
• Help the testing team
• Help yourself
• Re-use assets!
• Don’t reinvent the wheel
• Think DRY
• Be specific
• Don’t write an essay!
• Including reams of detail is counter productive

​

• Accounts
• Name the account according to the site

​

​

​

• Containers
• Name the container according to the site and environment

​

​

​

​

​

Use Naming Conventions

• Search by tag type - GTM

• Search by functional area - Homepage

• Search by tag function - click

Tag Naming Conventions

• Search by functional area - Homepage

​

​

​

• Search by rule function - URL

Rule Naming Conventions

• Macros - typically general usage
• Use macro name to explain usage - general or specific
• Use macro name to explain macro type
• Define variables/constants
• Closely related to methods/variables

​

​

​

​

​

Macro Naming Conventions

Look where we’re going...

Avoid anti-pattern usage

• GTM - <2 years old
• SERIOUS pace of change
• Not all features supported
• We need to extend GTM in specific areas
• Adopt intelligent design patterns now
• Don’t bake in anti-patterns
• Smart design now = fewer headaches later

• Automatic tracking for
• Clicks
• Links
• Buttons
• Any DOM element
• Form submissions
• Timing events
• Polling

​

Current Auto Event Tracking

• Automatically decorate your page(s) with click listener
• No jQuery (or similar) dependency
• Any DOM element
• Use on all pages or fire/block based on rules
• Use rules to discriminate between element clicks
• (complexity!)

​

• Pattern
• Build Click Listener Utility tag
• Avoid jQuery dependency

Click Listeners

• Utility Click Listener

Click Listeners

• Automatically decorate your links with click listeners
• More specific
• Less flexible

​

• Pattern
• Build Click Listener Utility tag
• Avoid jQuery dependency

Link Click Listeners

• What happens on drop downs?

Problem

• Can’t use linkClick for obvious reasons
• Click
• Highly specific rule needed
• gtm.element.selectedOptions.0.label = currently selected option - not the option being selected

​

Problem

Meh...

• What about
• hover?
• change?
• keydown?
• mouseout?
• etc.
• We need more event types to be handled

Problem

• Adding support for other events is quite easy
• jQuery
• Doing this the lazy way is not good
• Baking in anti-patterns!
• Brian Kuhn works fast…
• Chances are they’ll build a solution quickly
• Adopt this change when it becomes available
• Do so cleanly
• Think about it now to reduce effort & risk later

Challenge

Extending Listeners

//no changes here

function addListener(element, type, callback) {

if (element.addEventListener) element.addEventListener(type, callback);

else if (element.attachEvent) element.attachEvent('on' + type, callback);

}

​

//change as required

var myLinks = document.getElementsByTagName('a');

linkIndex=myLinks.length;

while(--linkIndex >= 0){

addListener(myLinks[linkIndex],'mouseover', function(){

customEvent = {

"event": "gtm.mouseover",

"gtm.element": this,

"gtm.elementClasses": this.className,

"gtm.elementId": this.id,

"gtm.elementTarget": this.target

};

dataLayer.push(customEvent);

});

};

As used in Google documentation for Action Script event listeners

Custom HTML tag template - change as required

• A gold mine of information
• Good markup will be decorated with relevant and appropriate meta data to aid measurement
• Access meta data here
• Be aware of traversing too far
• More traversal = more risk

​

Preserving ‘gtm.element’

• Use customEvent data structure to make gtm.element available
• Harder to do this cleanly & consistently using jQuery
• Used in gtm.js

​

Preserving ‘gtm.element’

customEvent = {

"event": "gtm.mouseover",

"gtm.element": this,

"gtm.elementClasses": this.className,

"gtm.elementId": this.id,

"gtm.elementTarget": this.target

};

dataLayer.push(customEvent);

Extending Listeners - example

Extending Listeners - example

Extending Listeners - example

Extending Listeners - example

• New event listeners will be supported in the future
• What happens when they are?

Extending Listeners - the future

• Anti pattern
• Removal of jQuery - custom HTML
• Build new listener
• Changes in multiple tags
• Design pattern
• Tweak listener - 1 tag to update

• Adding tags - fast
• Testing tags - rigor and discipline required
• How did we test & debug prior to GTM?
• Charles
• Fiddler
• Live HTTP Headers
• Web Developer toolkit
• Chrome debugger
• WASP
• etc.
• All still valid
• More support from GTM
• Test tags, rules and macros without deploying containers

Testing GTM

• You’ve developed a tag
• You want to test it on a client site
• They’re slow/reluctant
• no container tag...
• How do you get the container in place to prove the concept?
• Chrome extension...

Injecting a container tag

The Container Tag again

<!-- Google Tag Manager -->

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KDV4BF"

height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-KDV4BF');</script>

<!-- End Google Tag Manager -->

​

​

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-KDV4BF');

​

The Container Tag again

• It’s just a chunk of javascript…
• So just execute it

chrome.tabs.executeScript

GMT Injector Extension

The Container Tag Injector

• White noise
• Timing
• Proof of concept
• Debug with caution
• Choose GA account carefully
• Let me know if you want to use it...

In summary

• GTM is a great tool
• It’s not perfect
• We keep changing the rules
• We keep moving the goal posts
• We can keep up with demands by extending GTM

BUT

• Correct use of GTM is essential to success
• Use sound software development principles
• Use design patterns
• Don’t bake in anti-patterns
• Apply thought now to save time later
• Saving time means saving money
• Less time wasted on tagging is more time to spend on analysis
• Use Chrome Extensions to supercharge the tool

Questions?

FIN