CODEWITHSUNDEEP
google-analyticsgoogle-tag-manager
karnager
karnager

Reputation: 63

How get client id in Google Analytics 4

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

Upvotes: 6

Views: 9507

Answers (3)

Giorgio Tempesta
Giorgio Tempesta

Reputation: 2059

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
  });
}

Upvotes: 0

Valerio Gentile
Valerio Gentile

Reputation: 1100

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');

Upvotes: 5

Edgar Alvarado
Edgar Alvarado

Reputation: 87

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

Upvotes: 1

Related Questions