This document describes the

  • Google client ID and various Google Analytics related cookies.
  • Sending client ID to Collect Tag and iFrame

Google client ID and various Google Analytics related cookies

When using GA’s Universal Analytics, both the analytics.js and the gtag.js library set cookies to identify and throttle requests:

  • _ga is used to distinguish users and has an expiration of 2-years.
  • _gid is used to distinguish users and has an expiration of 24-hours.
  • _gat is used to throttle requests and has an expiration of 10-minutes.

In all cases, the value format is:

Version.Depth.UniqueID.CreationTimeStamp

where:

            Version = GA version

            Depth = 2 for Top Level Domain, 3+ for Subs, etc.

            UniqueID = Random Number

            CreationTimeStamp = Epoch Time When Cookie Was Created

UniqueID + CreationTimeStamp is what is used to create client ID.

Capturing client ID

When capturing the client ID and sending back to GA, Google suggests to not use the cookie content to determine the client ID. https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id:

You should not directly access the cookie analytics.js sets as the cookie format might change in the future. Instead, developers should use the readyCallback to wait until analytics.js is loaded, and then get the clientId value stored on the tracker.

In order to obtain the client ID, especially on the visitor's first page view, you can do the following which takes advantage of the readyCallback. In a JavaScript extension, scoped to your Google Analytics tag, add this code:

ga(function(tracker) {
  // There can be different trackers on the page
  // Also, reference the Google Analytics Object rather than the default 'ga'
  var trackers = (window[window.GoogleAnalyticsObject]).getAll() 
  var client_id, tracker_nm ;
  trackers.forEach(function(tracker) {
    if (tracker) {
      client_id = tracker.get('clientId') ;
      tracker_nm = tracker.get('name') + '.set';
      ga(tracker_nm, 'dimension##', client_id) ;
    }
  });

In the code, replace the 'XX' indimensionXX with the number of the Custom Dimension to contain the client ID.

Screen Shot 2020-10-26 at 3.28.16 PM.png

Send client ID to Collect Tag and iFrame

To send the client id to either the Tealium Collect tag or to an iframe for session syncing. Google's code takes some time to run, so depending on the tag the client id may not be available when the tag fires. To get around this, create an extension that runs a setInterval(), checks for the client ID, and fires a manual utag.view() call. Once available, client ID will be added to the data layer and will trigger a utag.view() directly to the tag that needs to fire. In the case of the iframe, it sends a postMessage() to the iframe where the iframe receives the message, pulls the client ID from the event data and then fires the necessary tags.

Step 1 - Cancel tag fire if client ID doesn't exist - iframe AND collect

Apply this extension code to any tag that needs the client ID and fires BEFORE it is available from Google

Extension: JS Code
Scope: Specific Tags: Any tag(s) that needs the client_id

if (!utag.data.client_id) {
return false;
}

Step 2 - Set the interval to check for the client ID - iframe AND collect

This code checks for the client ID. When a client ID is captured it will either send a postMessage to the iframe (iframe only) or send a utag.view() to the collect tag or other tags that need the client ID (collect only)

Extension: JS Code
Scope: DOM Ready
Load Conditions: Exclude the iframe URL (iframe ONLY)

iframe version

Ensure that the reference to the frame window is updated and correct, otherwise, it will not work.

var captured = false;
var getClientId = setInterval(checkPage, 500);
function checkPage() {
if (captured === true) {
clearInterval(getClientId);
} else {
var tracker = ga.getAll()[0];
var clientId = tracker.get('clientId');
if (clientId) {
captured = true;
console.log('***************CLIENT ID CAPTURED******************');

// Gets a reference to the window object of the destionation iframe.
var frameWindow = document.getElementById('reg_form').contentWindow;

// Sends the client ID to the window inside the destination frame.
frameWindow.postMessage(clientId, '*');
}
}
}

collect version

The UID of the tag(s) that need to fire will need to be updated in the utag.view() below.

var captured = false;
var getClientId = setInterval(checkPage, 500);
function checkPage() {
if (captured === true) {
clearInterval(getClientId);
} else {
var tracker = ga.getAll()[0];
var clientId = tracker.get('clientId');
if (clientId) {
captured = true;
console.log('***************CLIENT ID CAPTURED******************');
utag.data.client_id = clientId;
utag.view(utag.data, null, [*/insert Tag UID #*/]);
}
}
}

Step 3 - Retrieve the client_id in the iframe - iframe only

The iframe needs to retrieve the message from the parent window, grab the client_id and then send a view event to whatever tag needs the client_id (usually Google Analytics). The tag UID(s) in the utag.view() will need to be updated with the applicable tag(s) that need to fire from the iframe.

Extension: JS Code
Scope: Preloader

//Restrict the code to run only for the iframe
if (window.location.href.indexOf('go.hornblower.com') > -1) {
window.addEventListener('message', function(event) {
var url = (window.location != window.referrer) ? document.referrer : document.location.href;
var parentDomain = url.split('/')[2];

// Ignores messages from untrusted domains.
if (event.origin.indexOf(parentDomain) < 0) return;
utag.data.client_id = event.data;
utag_data.client_id = event.data;
utag.view(utag.data, null, [*/insert UID #*/]);
});
}

Step 4 - Testing - iframe and collect

You should be able to set a breakpoint on the this.track() "view" event. If it is working correctly, a view event will be fired with the client_id in the payload. You should also be able to check the utag.data object to ensure that client_id has been added and populated.

Version history
Revision #:
9 of 9
Last update:
a month ago
Updated by: