Manually decorate a link with Google Analytics Cross-Domain Measure Query Parameter – gtag.js

As I found it difficult to find the solution to this when I was charged with adding cross-domain measurement to some requests on a site this week, I thought I would put together a quick post to explain.

Before I get into it, I would just say, this is using the latest (at the time of writing) gtag.js Google Analytics code, but I believe this works with the analytics.js code as well.

Google Analytics as a feature called “Cross-domain measurement” which allows you to use the same GA tracking code across multiple domains and to track the same user across the domains, for example for a site using shop.com for their shop and payment.com for their payment gateway, allowing them to track the purchase from their site to the end of the payment process.

Google has thought about this and makes it very easy to set up. On the first site you simply add the following:

gtag('config', 'GA_MEASUREMENT_ID', {
  'linker': {
    'domains': ['payment.com']
  }
});

Then, on the receiving site, e.g. payment.com, you add:

gtag('config', 'GA_MEASUREMENT_ID', {
  'linker': {
    'accept_incoming': true
  }
});

Replacing GA_MEASUREMENT_ID in both with your GA property ID which is something like UA-123456-78.

That’s it job done, the only problem is that this only works with either standard links or form submissions, and in the case I was looking it, it was being done in JavaScript using window.location.href and the GA code doesn’t see that.

I knew from reading the GA documentation about cross-domain measurement that something like the following was appended to the outbound URL:

_ga=1.199239214.1624002396.1440697407

And by looking at the cookies I could see some of these values, in particular, the last two, are stored in the cookies, but the second number was nowhere to be seen, so I couldn’t construct it manually in JavaScript using the values from the cookies.

After a lot of Googling and reading various Stackoverflow posts and more in-depth GA documentation, I found out what the function was that GA calls to append the query parameters to the URL and how to call it manually:

var tracker = ga.getAll()[0];
var linker = new window.gaplugins.Linker(tracker);
var destinationLink = linker.decorate(myLinkToDecorate);

The ga object used on the first line is initiated by the gtag.js include, so this code can only be run after GA has been initialised on the page, which in my case was fine as it is based on a click on a button by the user after the page has loaded.

The second line uses the gaplugin.Linker object, which is initialised by the code shown at the top of this article, so you still need to include this in the gtag.js code snippet.

The third line then uses the decorate function to append the _ga query parameter to the URL and job done, you have your cross-domain measurement query parameter in place and you can send the user off to the other domain.

Remember to include the second code snippet above in the gtag.js code on the receiving domain and everything should be tracked as expected.

Not sure why Google doesn’t document this for this situation, or if they do, they have made it pretty much impossible to find, but I’m sure this is not a particularly unusual scenario, so I was a little surprised how hard it was to find the answer. Hopefully, this blog post will help one or two people in future get to the solution more quickly.

• Category: Coding
• Tag: Analytics