@giovaniortolanibarbosa/google-tag-linker v0.1.8

Google Tag Linker Brigde (and for any other analytics/marketing tools)

Table of contents

• Original project
• Description
• How does Google Tag cross-domain work
• Notes
• To-Do
• Build
• How to use
  • Installation
    • Using import
    • Loading bundle files of dist folder via CDN
    • Self-hosting one of the bundle files of dist folder
  • get method
    • get method code example
  • read method
    • read method code example
  • decorate method
    • decorate method code example
• Authors

Original project

This is a fork from the David Vallejo's original work. You can find the original version here.

Description

Hola! Olá! This is a JavaScript library that provided the needed functionality for creating a linkerParam for Google Analytics 4 (Google Tag, gtag). I It also works for any other analytics/marketing tools of your choice, such as: Amplitude, Meta, Google Ads etc.

At the time of publishing this library, Google doesn't offer any "documented" way of generating this value, making really hard to work with custom implementations, for example when dealing with iFrames or forms/links generated dynamically.

The library is provided in the AMD, UMD, IIFE, and ESM formats, all of them available in the dist folder.

How does Google Tag cross-domain work

Google Tag cross-domain works similarly to how previous Google Analytics worked. It's basically based on 2 different parts.

1. A fingerprint (Browser/Time)
2. The list of cookies to be passed to the new domain

The fingerprinting is done using the following values:

• Navigator User Agent
• User Timezone
• Navigator Language
• Current Time (current minute index from EPOC TimeStamp Rounded)
• A list of cookies passed on the linker

The usage for this fingerprinting is not identifying the user, but making the current link only work on the current user's browser and making it valid only for the current minute (since many users may share the same browser specs).

The Linker Parameter will look like this:

1*dm649n*_gcl_au*NTYwNjM5MjY2LjE3MDIwNDc1OTk.*FPAU*NTYwNjM5MjY2LjE3MDIwNDc1OTk.*_ga*MTM2MDM4NDg1MS4xNjYxODIxMjQy*_ga_THYNGSTER*XXXXXXXXXXXXXXX*_gcl_aw*AAAAAAAAAAAA*_gcl_dc*BBBBBBBBBBB*_gcl_gb*CCCCCCCCCCCC*_gcl_gf*DDDDDDDDDDD*_gcl_ha*EEEEEEEEEEEE*_fplc*MTExMTExMTExMTExMTExMTExMTEx

Which follows the following definition:

{{FIXED_NUMBER}}*{{FINGERPRINT_HASH}}*[COOKIE_KEY*COOKIE_VALUE]^n

This tool will read and pass the following cookies by default:

You can also specify a list of cookie names to be read or an object containing the cookie names (as keys) and cookie values (as values).

Notes

This is a beta version, while it should work fine for doing GA4 cross-domain tracking. Check the next section.

When there are multiple GA4 session cookies, the code reads the last one present in document.cookie string, if it wasn't manually passed to the googleTagLinker function as an argument.

To-Do

• Add Adwords / Double Click Support
• QA environments with multiple cookies
• Add the chance to manually define the cookies to be passed
• Add a "read" method to decode the linkerParam to the real cookie values
• Add a "decorate" method
• Add tests
• Refactoring / TypeScript

Build

$ npm install
$ npm run build

How to use

Installation

There are 3 options to run the script.

Using import

import googleTagLinker from '@giovaniortolanibarbosa/google-tag-linker';
const linkerParam = googleTagLinker("get");

Loading bundle files of dist folder via CDN

Choose your preferred version inside the dist folder.

<script src="https://cdn.jsdelivr.net/npm/@giovaniortolanibarbosa/google-tag-linker/dist/googleTagLinker.iife.min.js"></script>
<script>
    const linkerParam = googleTagLinker("get");
</script>

Self-hosting one of the bundle files of dist folder

This is a viable approach if you use Google Tag Manager (GTM). If installing via GTM, choose the googleTagLinker.iife.min.js version.

Keep in mind that you will not receive updates.

Check the option 3 mentioned in this article for more information about the installation.

get method

The get method returns the linker value.

const linkerParam = googleTagLinker("get", settings);

get method code example

Returns the linker using the default arguments.

const linkerParam = googleTagLinker("get");

Returns the linker using my_prefix as GA4 cookies prefix and another_prefix as Conversion Linker cookies prefix.

const linkerParam = googleTagLinker("get", {
    gaCookiesPrefix: 'my_prefix',
    conversionLinkerCookiesPrefix: 'another_prefix'
});

Returns the linker just for the _my_custom_client_id_cookie, my_custom_stream_session_cookie and /^_my_custom_[0-9]/ cookies.

const linkerParam = googleTagLinker("get", {
    cookiesNamesList: [
        '_my_custom_client_id_cookie',
        'my_custom_stream_session_cookie',
        /^_my_custom_[0-9]/
    ]
});

Returns the linker just for the client_id, session_id, and user_id cookies and their values.

const linkerParam = googleTagLinker("get", {
    cookiesNamesList: {
        client_id: '156eb98c-9fe9-4d5d-ae89-db4b3c29849d',
        session_id: '615c74df-5cb9-4dcd-bbb4-6ee4bc5d17a1',
        user_id: 'ABCDE123#@!'
    }
});

read method

The read method reads the linker parameter from the URL and returns an object with its values parsed and decoded.

const linkerParamParsedAndDecoded = googleTagLinker("read", settings);

read method code example

Returns the linker from the URL using the default arguments and returns an object with its values parsed and decoded.

const linkerParamParsedAndDecoded = googleTagLinker("read");

Reads the linker from URL my_custom_linker_parameter query parameter and returns an object with its values parsed and decoded.

const linkerParamParsedAndDecoded = googleTagLinker("read", {
    linkerQueryParameterName: 'my_custom_linker_parameter'
});

Reads the linker from URL my_custom_linker_parameter query parameter and returns an object with its values parsed and decoded, only if the fingerprint is valid.

const linkerParamParsedAndDecoded = googleTagLinker("read", {
    linkerQueryParameterName: 'my_custom_linker_parameter',
    checkFingerPrint: true
});

decorate method

The decorate method decorates an entity with the linker value and returns the entity. Entities: <a> HTML element, <form> HTML element or an URL string; or an array with the entities (<a> HTML element, <form> HTML element or an URL string) or a NodeList with the entities (<a> HTML element, <form> HTML element).

const entityDecoratedWithLinkerValue = googleTagLinker("decorate", settings);

decorate method code example

Returns the URL string decorated with linker parameter using default arguments.

const entityDecoratedWithLinkerValue = googleTagLinker("decorate", { entity: 'https://example.com' });

Returns the URL string decorated with linker parameter using my_prefix as GA4 cookies prefix and another_prefix as Conversion Linker cookies prefix.

const entityDecoratedWithLinkerValue = googleTagLinker("decorate", {
    entity: 'https://example.com',
    gaCookiesPrefix: 'my_prefix',
    conversionLinkerCookiesPrefix: 'another_prefix'
});

Returns the URL string decorated with the linker parameter in the fragment part of the URL and uses the _mylinker "query parameter".

const entityDecoratedWithLinkerValue = googleTagLinker("decorate", {
    entity: 'https://example.com',
    useFragment: true,
    linkerQueryParameterName: '_mylinker'
});

Returns the <form> HTML element decorated with linker parameter using default arguments.

const entityDecoratedWithLinkerValue = googleTagLinker("decorate", { entity: someFormElement });

Returns the <a> HTML element decorated with linker just for the _my_custom_client_id_cookie, my_custom_stream_session_cookie and /^_my_custom_[0-9]/ cookies.

const entityDecoratedWithLinkerValue = googleTagLinker("decorate", {
    entity: someAnchorElement,
    cookiesNamesList: [
        '_my_custom_client_id_cookie',
        'my_custom_stream_session_cookie',
        /^_my_custom_[0-9]/
    ]
});

Returns the <a> HTML element decorated with linker just for the client_id, session_id, and user_id cookies and their values.

const entityDecoratedWithLinkerValue = googleTagLinker("decorate", {
    entity: someAnchorElement,
    cookiesNamesList: {
        client_id: '156eb98c-9fe9-4d5d-ae89-db4b3c29849d',
        session_id: '615c74df-5cb9-4dcd-bbb4-6ee4bc5d17a1',
        user_id: 'ABCDE123#@!'
    }
});

Authors

David Vallejo

Giovani Ortolani Barbosa