[symple_box color=”red” text_align=”left” width=”100%” float=”none”]Warning: geeky technical post![/symple_box]
Google tag manager is the tool from Google that enables tracking tags to be easily (?) set, audited, modified and updated with lessened need for time-consuming web developer input. It’s a great idea that will enable clients and online marketing agencies to have much more flexibility in the updating of their website tracking and advertising, including:
- Adwords remarketing tags
- Adwords conversion tracking
- DoubleClick advertising scripts
- Custom HTML tags
- Custom image tags
- Google Analytics scripts
It’s confusing OK?
Google’s tag manager is still in it’s infancy so the resources out there are limited and quite confusing in many cases. I wrote this post about four months ago and got so fed up of trying to understand little details that I gave up, but have returned to finish the job in a half-arsed and still-quite-confused manner. If it still doesn’t make any sense please do tell me or let me know where I’ve gone wrong!
associated resource: Google Developers tag manager guidance
tag manager container
To get started you’ll need your developer to insert the tag manager container script on every page on your website immediately after the opening <body> tag. It’ll look something like the below with a load of extra code where I’ve put ‘…’:
[symple_box color=”blue” text_align=”left” width=”100%” float=”none”]
<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=….</script>
<!– End Google Tag Manager –>
[/symple_box]
This is, in essence, giving you a custom area on each page where tag manager can insert some more code without having to get developers involved. Lovely and responsive eh?
It doesn’t support asynchronous tags, like A/B split testing tools, or those with document.write().
This is the easy bit, so if you have trouble here I recommend you give up and go home!
associated resource: tag manager developer documents
tag manager security
Security could be a concern for many companies, as the tag manager essentially can allow script to be entered into a website without the developer’s knowledge. As such it’s important that you strictly in control and are extremely careful with access to tag manager, and only give access to selected and highly trusted personnel or agency staff.
Different permission levels can be applied to users to enable them to view / view and edit / view, edit, delete and publish. This makes it quite possible to restrict external parties to ‘view only’ access (although this can then defeat the point of tag manager and removes the flexibility it provides to web agencies like Attacat).
The recommended setup is:
Account: Your company/agency
Containers: Set one container for each site/client
associated resource: tag manager setup
google analytics with google tag manager
The default (basic ) asynchronous Google Analytics script can be inserted onto every page of the site using tag manager. Simply select a single Google Analytics tag and select “Page View” as the track type. Add the default ‘all pages’ rule to fire the tag on all pages.
However if you want to insert customised versions of the code – so anything involving cross domain tracking, custom variables or fancy custom scripts – it needs to be inserted using the custom HTML tag in tag manager.
data layer
In order to track more advanced functions including revenue generation it is necessary to communicate through a ‘dataLayer’. This is where is starts to get pretty complicated…
Essentially the dataLayer holds all the information you’re looking to pass onto Google Analytics or some other tool, and the tag manager container simply gathers the data it needs on different pages. It also means that things can be tweaked on a page but the dataLayer can remain consistent. Different pages can output different data variables to the dataLayer within its JavaScript tag; for example a checkout page is likely to want to output conversion and revenue data for purchased items.
The dataLayer snippet should be implemented before the tag manager snippet.
[symple_box color=”blue” text_align=”left” width=”100%” float=”none”]
<script>
dataLayer = [{
// enter data here
}];
</script>
[/symple_box]
There are a huge number of things that can be communicated in the dataLayer, from page titles and URLs to demographic data, and you can really add as much as you see fit. It can be a pretty intense and difficult process, however, so it’s best to start with the minimum requirements and build from there. Usually that starts with ecommerce tracking.
associated resource: tag manager dev guide, tag manager reference guide
ecommerce tracking with google tag manager
In order to track revenue in Google Analytics using tag manager the developer will need to setup the aforementioned dataLayer to output transaction data on any receipt or purchase confirmation pages.
Add Analytics tags to the tag manager container
Specific rules can then be used within tag manager to fire the ecommerce tracking tag only on these desired pages and read the revenue data output in the dataLayer.
1. Output your transactional data according to the Google Analytics data layer spec. This is the only coding that you will need to do. You can read the details of the data layer here: http://troni.me/RoHAYE
2. Add a Google Analytics tag to your container. Enter your Google Analytics Web Property ID. The choose Ecommerce as the tag type. Finally, create a rule so it will only fire on the thank you page. See the image below for more info.
3. Make sure that you specify the profile is an Ecommerce profile in the Google Analytics Profile Settings. This just enables the ecommerce reports in Google Analytics. You have to do this in the regular setup as well.
While there are many potential variables, the only required dataLayer variables for ecommerce Analytics tracking are as follows. These should be implemented on any receipt or purchase confirmation pages:
transaction data – required
Variable Name Description Type
transactionId Unique transaction identifier string
transactionTotal Total value of the transaction numeric
transactionProduct data – required
Variable Name Description Type
id Product ID string
sku Product SKU string
price Unit price numeric
quantity Number of items numeric
action and event tracking with google tag manager
Clicks of important buttons or calls-to-action (such as clicking ‘book now’ button) should ideally be marked up with action tracking to enable tracking. For each event you track, add a Google Analytics tag and select “Event” as the track type.
With tag manager the onclick action should call the dataLayer with markup of the following structure:
[symple_box color=”blue” text_align=”left” width=”100%” float=”none”]
<a href=”#” onclick=”dataLayer.push({‘event’: ‘event_name’});” >Call-to-action</a>
[/symple_box]
Then set up the following rule in Google Tag Manager:
[symple_box color=”blue” text_align=”left” width=”100%” float=”none”]
[/symple_box]
Then add a rule to fire on on the specific event.
It’s been suggested in forums that you can still call event categories, actions and labels (as with normal Google Analytics action tracking) using the following setup:
[symple_box color=”blue” text_align=”left” width=”100%” float=”none”]
onclick=”dataLayer.push({‘
[/symple_box]
To find the Web Property ID:
- In your Google Analytics account, navigate to Admin.
- Click the Tracking Code tab.
Enter the Tracking ID (which takes the form of UA-xxxxxx-xx) into the Web Property ID field.
Although this will communicate events to Google Analytics you might want it to pass on a little more info, such as the transaction value (monies!) or the URL of a clicked link or button. To do this you’ll need to include website variable in your dataLayer.
[symple_box color=”blue” text_align=”left” width=”100%” float=”none”]
dataLayer.push({'variable_name': 'variable_value'});
[/symple_box]
These variables can include form data submitted by a user, data on video playback, and other dynamic variables on your site that occur after the page has loaded.
To combine variables with an event the following structure is used as an example. I’m not too sure on how this structure and method applies to different variables – in the example ‘color’ is used but I’m not sure whether this can effectively be totally customised to anything you so wish or whether it has to following preset categories, so this requires a bit of checking:
[symple_box color=”blue” text_align=”left” width=”100%” float=”none”]
<a href="#"
name="color"
onclick="dataLayer.push({
'color': 'red',
'conversionValue': 50,
'event': 'customizeCar'});">Customize Color</a>
[/symple_box]
associated resource: tag manager events
macros and rules
Macros are essentially the rules specified within tag manager to tell it when to fire a particular tag (on a particular page or occasion). They’re based around a number of main types, of which the following are most useful:
associated resource: tag manager macros
URL
These are simple rules that fire a tag based on the URL of a page. This allows you to fire certain tags on, say, thankyou or receipt pages. You can use regular expressions to contain a whole range of varied pages under one URL ‘theme’ too.
associated resource: tag manager macros
event
Once (or if) you’ve setup action and event tracking you should use the event macro to fire tags as required according to your event names:
[symple_box color=”blue” text_align=”left” width=”100%” float=”none”]
onclick=”dataLayer.push({‘event’: ‘event_name’});”
[/symple_box]
Apparently it’s also possible to specify event categories, actions and labels through use of macros, although I’m not entirely comfortable with how yet!
associated resource: tag manager forum discussion on event categories, actions and labels
Migrating tags to Google Tag Manager
If you already have a site and want to use tag manager, then obviously you’re going to have to migrate. First off all work out which tags are supported and which are not supported, and then follow the below best-practice guidance directly from Google:
- Map your site (optional)
To begin your migration, you’ll want to think about which tags you currently have deployed on your site and what data you’re trying to collect. For data collection think about what actions you want to track (events) and what additional data from the page you’ll want to collect (variables). Create a map of tags, the data you want those tags to collect, and which events or pages you want to associate with those tags.Remember that Google Tag Manager cannot support any synchronously loading tags (like AB testing tags, see the full list of unsupported tags) or tags withdocument.write(). If you are thinking about migrating these types of tags, remove them from your list. - Implement standard Google Tag Manager snippet
Once you’ve mapped your site, you’ll want to install just the single Google Tag Manager snippet on your site (empty) and deploy it. See Quick Start for more information. - Add Events and Variables
Customize your Google Tag Manager installation using the methods outlined in the Add Events and Variables section. - Add tags with associated firing rules in Google Tag Manager’s management interface
After you’ve completed setting up the site with the Google Tag Manager snippet and data collection APIs, you should add your site tags to the user interface. DO NOT publish at this time. Simply add and configure the tags from your site in the Google Tag Manager management interface using the appropriate templates and set up the firing rules appropriately (more information about how to do this in our Help Center Rules article). - Final migration swap
The last step is where you simultaneously swap out your old tags and publish your tags in Google Tag Manager. Within a few minutes of each other, you’ll want to:
- Remove your site tags in a single code push
- Once you know this push is successful, press the “Publish” button for your container version.
You can get a small gap in data in the swap, but such is life. It’s either that or a small bit of duplication, so just accept there’s going to be a little data leakage.
associated resource: tag manager migration
multiple domains
I think the easiest way to manage cross-domain tracking is by inserting a custom Google Analytics tracking code by directly inserting custom HTML, which we have talked about already.
associated resource: tag manager multi-domain tracking
checking and debugging
Use the rather excellent Tag Assistant and the Google Analytics debugger to check what data is being sent through to Analytics from your dataLayer. It helped me work out an ‘Analytics going mental’ situation recently!
associated resource: Tag Assistant (by Google), Google Analytics debugger
things to remember
- Tag manager and tracking code is case sensitive, so make sure it’s implemented exactly as required e.g. dataLayer not datalayer
- Make sure you aren’t duplicating your tracking codes (one in tag manager, one normal for example)!
- Variable names being passed through the dataLayer should be in quotes (e.g. ‘variable’)
- Ensure dataLayer variables are consistent across your sites and different pages
