Quick Start Implementation Guide
Why webmasters and IT love Google Tag Manager
- dataLayer - On Page Load
- GTM Container Code
- dataLayer.push() - On Events
- Accounts
- Users
- Containers
- Tags (Inc Auto-Event Tags)
- Rules
- Macros
- Preview & Debug
- Versions
- Publish
- Roll-back
- Debug Tags, Rules and Macros
- Give GTM debugger to Tag requester
The dataLayer is a javascript object that allows you to structure data in an organised and consistent manner across all pages. The dataLayer should be placed in the <head> of the page and contains data that is avaialble when the page loads.
eg.
var dataLayer = {
site : { enviroment : 'production',
countryCode: 'UK'},
page : { type : 'home',
url: '/'}
}The Google Tag Mnaager container code is what connects your website to the GTM interface. Anything configured in GTM will be downloaded to the page via this blog of code.
The recommended placement for the container code is just after the opening <body>. This is due to the noscript code that is included in the code
Important: The GTM container code should always go after the dataLayer code (page load code from A.1.).
The code block looks as follows
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXYYZZ"
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-XXYYZZ');</script>
<!-- End Google Tag Manager -->dataLayer.push() is used when an event occurs after the page has loaded and this event needs to be tracked. A simple example is when a user adds an item to the basket and is not taken straight to the checkout but instead an AJAX event occurs to update the basket with the new item.
You should always include the key 'event' with an vaule describing the event.
eg.
dataLayer.push({
event : 'addToBasket',
basketProducts : { id : 'NT1234',
name : 'Nike Trainers',
price : 49.99}
})Create one account for your organisation. The account is the top level for GTM and allows you to have multiple containers.
Users can be assigned to an account or container level.
The following permissions can be applied to users.
- View Account Users
- Manage Account Users
- No Access
- View Only
- View and Edit
- View, Edit, Delete and Publish
Containers can be created as either a 1) Website conatiner or 2) App container
Depending on how complex your websites are you can either create one container to go across all your domains or create a uniqie container for each domain.
Every website is built in teh exact same structure and is managed by one team
Websites are not built in the exact same format and each domain is managed by a seperate team
For apps use a seperate contaner for each app and per device.
Tags can be set-up using tag templates where possible.
Where templates are not avaiable a custom html or custom image tag can be added.
Macros can be used in custom html tags using the syntax {{macro name}}
Follow a strict name convention to easily understand the tag provider and what the tag does.
Tag - [Name Of Tag or Tag Provider] - [Type Of Tag] - [Other Details]
eg.
Tag - Universal Analytics - Page View
Rules are used to define when tags should be triggered. They use macros to define the data that the rules are based on.
Start all rules with lowercase.
Try to base the rule name as close to the actual rules you define
eg.
event equals addToBasket
or
dataLayer - page.type equals Confirmation
Macros are used to extract and/or manipulate data on the page for websites or screen for apps.
There are a range or macros avaialble for the web and a different range avaiable for apps.
Start all rules with lowercase and the type of macro you are using.
eg.
dataLayer - [exact key you will be refrencing]
dataLayer - page.type
or
custom js - [name to describe code]
custom js - capture user date of birth
or
lookup table - [name to describe lookup logic/behaviour]
lookup table - google analytics ID based on domain
When any tags are added you should use the debug mode to test everything is working correctly before publishing. The preview and debug mode works by setting a cookie on your computer which means you can test the changes localy on your computer before pushing anything to the live website
When you are reay to ublish your changes create a new version of the container
Publish the version of the container to live. Include any comments
If any issues arise from the latest published container you can revert to a previous version
Using the debugger you can check what tags are being executed on the page.
This can be used to see what data exists in the dataLayer and to provide information on where the tag should go
Include the link for user to get into debug mode eg. - https://www.googletagmanager.com/set_cookie?id=GTM-523QN9>m_auth=1E8PYC5rulKdYq1CDdkCjA>m_preview=QUICK_PREVIEW>m_debug=x&url=http%3A%2F%2Fonline.brother.co.uk%2F
When the users click on this they can go to the dataLayer tab and confirm the following.
-
What GTM container the tag needs to go in.
-
What URL and page.type the tag should fire on.
-
What data from the data from the dataLayer they need to be passed into the tag for the available variables.
-
Provide the tag code.