Simo's Top 30 GTM tips

Simo’s Top 30 GTM Tips
@SimoAhava from @8_bit_sheep

Simo Ahava
Partner, co-founder, 8-bit-sheep
Google Developer Expert, Google Analytics
Blogger, developer, www.simoahava.com
Twitter-er, @SimoAhava
Google+:er, +SimoAhava

Google Tag Manager today

Google Tag Manager today
Who is it for?

Why it’s about marketing.
1. Tags collect data for digital marketing purposes, first and
foremost. 
2. TMS abstracts the underlying code — low barrier of entry
for people with little coding experience. 
3. Semantic data collection is often deprioritized by
developers who are more invested in the presentational
and experiential layers. TMS is a tool which prioritizes this
semantic data layer.

Why it’s about development.
1. It’s a freaking code injector! 
2. You can add all sorts of malicious / website-breaking /
malware-infested code with the click of a button. 
3. If something goes awry, developers will be held
accountable as they own the processes. 
4. A TMS can actually make development work easier, too.

Why it’s about organizations.
1. Data flows through the entire organization - it doesn’t
care about job titles. 
2. Data quality can be compromised at every junction of the
data process - not just collection.
3. Any company/platform/tool/service collects absurd
amounts of data each passing second - only a mature
organization can tackle this overload.

#GTMTips

#GTMTips
Learnings over the years.

#1You can add the container JavaScript anywhere on the page or 
even a linked JavaScript library. 
 
The current recommendation is to add it to the <head> of the
document, but this is by no means mandatory.

#2You can add multiple container snippets on the page, but they must 
all use the same dataLayer object name.

#3 Google Tag Manager only cares about the .push() method when 
working with the dataLayer Array.

#4Typically dataLayer digests plain objects with key-value pairs.

#5 However, you can also push a command array if you want to
manipulate structures already in dataLayer.

#6 A Command Function will work as well.

#7 Only the 'event' key in a dataLayer.push() can trigger tags.

#8 Never overwrite the dataLayer, always push().

#9 All JavaScript types are supported as values

#10 dataLayer.push() copies the pushed key-value pairs into 
GTM’s internal data model, where they (can) overwrite any pre-existing 
values for the given keys.

#11 Preview Mode shows the state of tags, triggers, and variables 
at the time of each dataLayer message.

#12 Preview Mode can be minimized.

#13To quit shared preview, you need to follow the original link.

#14 Google Tag Manager creates a new Universal Analytics tracker 
with every single tag instance.

#15 Get the object representation of GTM’s dataLayer easily.

#16 Use Data Layer in Enhanced Ecommerce settings leverages the 
Version 1 of the Data Layer Variable.

#17Version 1 of the Data Layer Variable only returns the most recent 
value stored in the given Data Layer Variable name. 
 
Version 2 provides dot notation support as well as recursive merge.

#18The Custom JavaScript Variable method for implementing 
Enhanced Ecommerce tags is more flexible than "Use Data Layer". 
 
The Custom JavaScript Variable lets you mutate the 
Enhanced Ecommerce payload in Google Tag Manager.

#19 If click propagation is stopped, use the Click / All Elements trigger.

#20 Wait for Tags pauses the original event, but be careful!

#21Type this in the JavaScript console to sort Custom Dimension fields by
index number.
var el=document.querySelector('[diff-field$="customDimensionSection"]');var rows=el.querySelectorAll(".simple-table-row[data-ng-repeat]");var newRows=[];rows.forEach(function(row){var
inputIdx=row.querySelectorAll('input[type="text"]')[0];var inputVal=row.querySelectorAll('input[type="text"]')
[1];newRows.push({idx:inputIdx.value,val:inputVal.value})});newRows.sort(function(a,b){if(parseInt(a.idx)>parseInt(b.idx)){return 1}if(parseInt(a.idx)<parseInt(b.idx)){return-1}return
0});rows.forEach(function(row,i){var inputIdx=row.querySelectorAll('input[type="text"]')[0];var inputVal=row.querySelectorAll('input[type="text"]')
[1];inputIdx.value=newRows[i].idx;inputVal.value=newRows[i].val;inputIdx.dispatchEvent(new Event("change"));inputVal.dispatchEvent(new Event("change"))});

#22 Custom HTML Tag code is automatically minified.

#23 Custom HTML Tags are appended to the end of document.body.

#24 Custom JavaScript Variables are anonymous functions with a 
return statement.

#25 Avoid side effects in Custom JavaScript Variables.

#26 In Tag Sequencing, the Setup and Cleanup tags fire with the  
main tag, regardless of their own triggers.

#27 Make sure you loosen up the Content Security Policy for GTM.

#28 Workspaces are not permanent. When you version a Workspace, 
it is subsequently deleted.

#29 customTask is your best friend when it comes to implementing Google
Analytics tracking through GTM!

#30 Google Tag Manager ease / expertise correlates directly with your 
JavaScript / HTML / CSS skills.

Thank you!
@SimoAhava | www.simoahava.com

#30: Google Tag Manager ease / expertise correlates directly with your 
JavaScript / HTML / CSS skills.
Thank you!
@SimoAhava | www.simoahava.com

Simo's Top 30 GTM tips

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Simo's Top 30 GTM tips

Ähnlich wie Simo's Top 30 GTM tips (20)

Mehr von Simo Ahava

Mehr von Simo Ahava (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Simo's Top 30 GTM tips