Double Tracking in GA without Named Trackers – Part 2

The first part introduced the problem  – sometimes you need to track a website to two different properties, and usually this would require you to do all your tracking calls twice, and that it sort of cumbersome. Wouldn’t it be nice if you just could pass in a second property id and have the data send to both properties.  Indeed it would, and that’s how the idea of a Dual Tracking Plugin came up – I got it from David Vallejo, Simo Ahava did something similar before, and dual tracking is even used in an example in the Google GA documentation. This is an idea that’s really obvious if you need to track to two different UAIDs (and can for some reason not use Google Tag Manager).

Go Grab Code

You can get the code from Github – this is a fork of Davids original code (and in time I will ask him if he wants to accept my changes), and even if you do not know how Github works you can simply copy the contents of the dualtracking.js file  (although for legal reasons you should keep the license).

If you take a glimpse at the file you see it’s pretty short, and could even be shorter had I not included serveral “polyfills”, workarounds for some of the JS array methods that do not exist on older browsers. Also there is logging, error checking and so on. The code that does the actual work  takes up less than half of the file, and this is something rather typical for Google code and something I really like – they package their functions so nicely that you can do quite a lot with very little and very simple code.  The most complicated part is probably the function that breaks down the “payload” (the string with the tracking data) into key/value pairs (that’s from the original code stub, and I feel I might want to replace this with something simpler – but it works nicely, so no hurry).

Closer Looks

At the top you see a function providePlugin – the global tracker object can be renamed, and since the plugin needs the ga object to work with it checks the window[‘GoogleAnalyticsObject’] variable and re-assigns it to the ga name. This is a wrapper around the “provide” command queue function that registers a plugin with the GA tracking code.

Next is the constructor – this is called when a plugin instance is created. It has two parameters – the first is the tracker object that is passed in automatically, the second is a piece of JSON that contains configuration options, e.g. the UAID of  the second tracker you want to send data to. The function reads configuration, sets default values for required  fields that are not set and calls the function that does the work.

The doDualTracking function uses a trick we have learned in the first part – it stores the sendHitTask of the original tracker object and creates its own sendHitTask, which as a first thing fires the stored sendHitTask and thus takes care of the call to the original GA property. It then retrieves the “payload”, the formatted query string that contain the tracking data and breaks it down into an object with key/value pairs that can be easier manipulated. It then calls a function that replaces the original UAID with the ID of the second property (the function does actually a bit more, but we get to this later).

Finally the data has to be sent. There are several possible “transport” options, i.e. ways the data can be sent, each of them with it’s own advantages and disadvantages. “Image” is the most reliable option, it transmits data by creating an image with a source that point to the Google tracking servers. XHR is better for huge payloads (for example if you do Enhanced E-Commerce Tracking  with large product lists) because it uses a POST request to send data in the request body. But you would need a less naive implementation than mine for it the be really reliable. And “beacon” is a good option if you are worried about data loss from leaving visitors, since navigator.sendBeacon should be reliably fired even when the page unloads (it is however not available on all browsers).  The standard GA code sets the optimal transport method automatically and I’m looking for a way to retrieve the value from the original tracker.

Setting it up

To make the plugin work the first thing you have to do is to place this somewhere on your server (don’t try to load it from my server, the file might disappear at any moment). Then you need to edit your GA tracking code to require the plugin:

<script>
ga('create', 'UA-883789-7', 'auto');
ga('require', 'dualtracking',  {
property: 'UA-883789-8'
});
ga('send', 'pageview');
</script>
<script async src="http://www.flesheatingarthropods.org/dual/dualtracking.js"></script>

The first bit is the standard code to create a tracker. The second line registers a plugin called “dualtracking” (2nd argument) and passes in some configuration to the  plugin constructor. The next line is a standard single pageview call that nonetheless sends two calls to the original property and the property configured in the configuration object of the plugin. After the tracking script you need to load the plugin code (Davids original code had the url as additional parameter to the “require” function; for some reason this suddently stopped working for me).

Take a look at the test page and look into the network tab of the browser to verify that this tracks indeed both properties.

There are one or two additional configuration options, but this is a very long post already and so I’ll postpone this to a third part.

Leave a Reply

Your email address will not be published. Required fields are marked *