Getting client ID with gtag.js

Question

Google released gtag.js a couple of months ago as the new way of tracking with Google Analytics, eventually replacing analytics.js as far as I understood. gtag.js is the default when setting up a new Google Analytics account, so the code snippet went from this:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-12345678-1', 'auto');
  ga('send', 'pageview');
</script>

to this:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123456789-1');
</script>

What I need to do, is to get the client ID with gtag.js. With the old script, I could do as follows.

ga(function(tracker) {
  let clientId = tracker.get('clientId');
});

By the looks of it, gtag.js loads the same analytics.js script through Google Tag Manager, because the ga variable is indeed available. However, there is some difference because the tracker parameter is undefined when the callback is invoked, because gtag.js does not use trackers, so this approach clear won't work.

I looked through the documentation for gtag.js, but I was not able to find any information on how to obtain the client ID. The documentation for analytics.js states not to access the cookie directly to obtain the client ID, which makes sense. But is there any way to get it through the JavaScript API with gtag.js, or do I have to resort to reading the cookie for now?

Solution 1

Whlie tracker id property is unavailable it's still a proper ga tracker at least at the time being. so the following would work to get a clientId:

ga.getAll().forEach( (tracker) => {
  var id = tracker.get('clientId'); console.log(id)
})

After accessing the ga tracker with ga.getAll() you can set up the 'customTask' that would assign clientId to custom dimension of your choice. Look at Simo's guide here

Solution 2

The accepted answer does not work anymore. The correct, up to date way of doing this is:

gtag('get', 'YOUR_MEASUREMENT_ID', 'client_id', (client_id) => {
    // do something with client_id
})

See the documentation for get in the official Gtag.js docs.

Solution 3

There is an undocumented way to get the clientid into GA:

gtag('config', 'UA-12345-1', {
  'custom_map': {
    'dimensionX': 'clientId'
  }
});

Obviously they wanted to provide a more convenient way to get the value (you provide literally the string 'clientId' which is then resolved into the proper value).

This was worked out by a guy named Yamata Ryoda and at length documented in an article by Simo Ahava. I admit I haven't tested it myself yet.

Comments

[ba0708]

I did see that article, but my problem is that I need to access the client ID in JavaScript. I am by no means a GA expert, but as I understand the code snippet, it will send the client ID to GA as a custom dimension. In other words, it doesn't let me access the value directly through JavaScript, if I am not mistaken.

[Eike Pierstorff]

You are right of course. Someday I will learn to read questions properly before I try to answer them.

[ba0708]

Haha no worries - thanks for trying to help out! :-)

[ba0708]

Ah yeah, I forgot about that approach. Unfortunately I have to rely on the ga variable being loaded (i.e. analytics.js), but it seems better than reading the cookie. I tested it out and it works. Thanks!

[ninsky]

According to the docs the parameter should be named "client_id" (instead of "clientId"). See developers.google.com/analytics/devguides/collection/gtagjs/‌​…