How get client id in Google Analytics 4

Question

I use Google Tag Manager. In documentation Google https://developers.google.com/gtagjs/reference/api?hl=en have client_id field name, but I don't understand what needs to be added to the Google Tag Manager tag value in Fields To Set? Thanks

Wellfed

Find a solution? – Flambeau

Answer 1

Here is the documentation: https://developers.google.com/gtagjs/reference/api?hl=en#set_examples

Example 1 (Get):

const clientIdPromise = new Promise(resolve => {
  gtag('get', 'DC-XXXXXXXX', 'client_id', resolve)
});
clientIdPromise.then((client_id) => {
  console.log(client_id);
});

Example 2 (Get):

gtag('get', 'DC-XXXXXXXX', 'client_id', function(client_id) {
  console.log(client_id);
});

Example 3 (Set) (Please note that I haven't tested this):

gtag('set', 'client_id', 'xxxxx.xxxxx');

Obelisk

you can also use the global variable gaGlobal.vid. This contains the client id and works for GA4. – Tassel

The anonymous function (callback) in "Example 2" shall introduce "client_id" (the variable that is logged out) as a parameter. This callback is called by the GA4 library with the "client_id" value passed as a first parameter to the function. – Bathroom

Just to make @McBton 's comment more clear - Example 2 needs function(client_id) not just function() – Rhinestone

Answer 2

client_id is used to identify the web client, usually it's auto-generated and saved in the cookies, but if needed you can disable that and set up your own.

Description of the client_id
https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?client_type=gtag#client_id

How to disable auto-generation and use your own
https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#getting_the_client_id_from_the_cookie

Thesaurus

Answer 3

The syntax shown in the accepted answer is the best since it's supported and documented by Google:

gtag('get', 'DC-XXXXXXXX', 'client_id', function(client_id) {
  console.log(client_id);
});

However I've figured out that the callback is asynchronous, so if you need to send the value back to GA (as I do), you will figure out that the callback is executed when other parts of your code have already fired.

The solution to this in my opinion is to work directly with the original cookie which we already know to be called _ga.

So to retrieve the value you can do something like this (we use the js-cookie library, but you can retrieve the value however you prefer).

import Cookies from 'js-cookie';

const gaValue = Cookies.get('_ga');

if (typeof gaValue !== "undefined" && gaValue !== '') {
  // .split('.') splits the cookie on the "." character
  // -> ['GAN', 'N', 'XXXXXXXXXX', 'XXXXXXXXXX']
  // .slice(2) removes the first two elements
  // -> ['XXXXXXXXXX', 'XXXXXXXXXX']
  // .join('.') recreates the string
  // -> XXXXXXXXXX.XXXXXXXXXX
  const clientId = gaValue.split('.').slice(2).join('.');
}

And in order to send the value back to GA4 I believe you should pass it as a field in an object passed to user_properties, see this answer for the syntax: https://support.google.com/analytics/answer/12370404?sjid=13438918369046207716-EU#zippy=%2Cgoogle-tag-websites.

The complete code would look like this:

import Cookies from 'js-cookie';

const gaValue = Cookies.get('_ga');
let clientId = '';

if (typeof gaValue !== "undefined" && gaValue !== '') {
  clientId = gaValue.split('.').slice(2).join('.');
}

if (typeof clientId !== "undefined" && clientId !== '') {
  gtag('set', 'user_properties', {
    client_id: clientId
  });
}

Megasporangium