Category: Analytics

This integration is only available for Web projects

What to expect

Contentsquare allows you to use your Google Analytics segments in every Contentsquare module (Journey Analysis, Page Comparator, Zoning Analysis, Session Replay).

To import your segments, you need to add a snippet of code to your website. This code pushes an identifier to Google Analytics. It helps us match Google Analytics sessions with Contentsquare one's.

What we collect

Dynamic Variables

Key	Value	Data Type
csMatchingKey	{csMatchingKey}	Text

csMatchingKey

Refers to the unique value used to cross reference Google dimensions with Contentsquare sessions.

Implementation

Implementation Steps

Create a Custom Dimension

Please configure a dedicated Contentsquare custom dimension in your Google Analytics account with the scope set to Session, the way you see below:

There are many ways to integrate the code but we will cover the following options:

Google Tag Manager
Tealium Tag Manager
Tag Commander or Directly Inline
Shopify

Google Tag Manager configuration

In GTM create a User-Defined Variable in the Variables section

Add a Custom Javascript page variable

Name it something related to the integration and copy-paste the code from the relevant code section below into the container

Save that and then you should have something like this

Please note that the above has to be done using a User-Defined Variable NOT by using a Custom HTML Tag.

Next go to your Google Analytics tag container and check Enable overriding settings in this tag.

Then expand More Settings and Custom Dimensions then set your defined custom dimension index number and set the Dimension Value to be the new User-Defined Variable you created.

You should have something like this

Tealium Tag Manager configuration

In your Tealium account access the Data Layer section under the iQ Tag Management section

Click on Add Variable

Set the type to UDO Variable and make the source cs_matching_key or name it whatever you want but if you rename it then also edit and use the same name in the code too.

Save that and you should have this

Go to your Google Analytics tag container under the Tags section and edit your Mapped Variables

Search for the variable you created cs_matching_key or whatever you named it then select it and then press Select Destination.

Click on Dimensions then set the event type as Pageview and select the Dimension you defined in Google Analytics and save that

You should then see something like this

Next, go to Extensions and create a Javascript Code extension.

Give it a name relating to the Google and Contentsquare integration and set the scope to be the Google Analytics tag.

Grab the relevant code below in the code section and paste it in there.

Tag Commander or Inline configuration

Tag Commander currently does not have a built-in Google Analytics code container so you are most likely using a custom Javascript container.

If you are using GA code inline then the same applies below.

In the relevant code section below there are parts that you will already have defined and the rest is what you need to add to the existing parts in the same logical order.

Shopify

In Shopify if you are using the built in Google Analytics app then all you need to do is insert the code into this open textarea:

Screenshot_2022-12-05_at_9.49.51_AM.png

In the relevant code section below there are parts that you will already have defined and the rest is what you need to add to the existing parts in the same logical order.

The Code

Please note that if you have a cookie policy which requires our cookies to first be accepted before injection, then it is up to you to ensure the code below is wrapped in your cookie consent policy logic.

Google Tag Manager

/*
 *Name: Google Analytics CS Integration
 *Version: 1.13.0 (csMatchingKey + GTM)
 */

function gaCSintegration() {
    var version = "1.13.0";

    function callback() {
        if (!disableCallback) {
            disableCallback = true;

            if (window.CS_CONF) {
                CS_CONF.integrations = CS_CONF.integrations || [];
                CS_CONF.integrations.push("Google Analytics - v" + version);
            }
        }
    }

    var disableCallback = false;

    window._uxa = window._uxa || [];
    _uxa.push(["afterPageView", callback]);

    var cmk = null;
    var cn = "_cs_mk_ga";

    function init(cookieValue) {
        if (cookieValue) {
            cmk = cookieValue;
        } else {
            cmk = Math.random() + "_" + Date.now();

            var tld = (function () {
                var i = 0,
                    domain = document.domain,
                    p = domain.split("."),
                    s = "_cs_tld" + new Date().getTime();
                while (i < p.length - 1 && document.cookie.indexOf(s + "=" + s) == -1) {
                    domain = p.slice(-1 - ++i).join(".");
                    document.cookie = s + "=" + s + ";domain=" + domain + ";SameSite=None;Secure";
                }
                document.cookie = s + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=" + domain + ";";
                return domain;
            })();

            var now = new Date();
            var time = now.getTime();
            time += 30 * 60 * 1000;
            now.setTime(time);

            document.cookie = cn + "=" + cmk + "; expires=" + now.toUTCString() + ";path=/;domain=" + tld + ";SameSite=None;Secure";
        }

        _uxa.push([
            "trackDynamicVariable",
            {
                key: "csMatchingKey",
                value: cmk,
            },
        ]);
    }

    var cookies = "; " + document.cookie;
    if (cookies) {
        var getCookie = cookies.split("; " + cn + "=");

        if (getCookie.length == 1) {
            init();
        } else {
            var cookieValue = getCookie[1].split(";")[0];
            init(cookieValue);
        }
    }

    return cmk;
}
//Google Analytics CS Integration End

Tealium Tag Manager

/*
 *Name: Google Analytics CS Integration
 *Version: 1.9.0 (Tealium + csMatchingKey)
 */

(function () {
    var version = "1.9.0";

    function callback() {
        if (!disableCallback) {
            disableCallback = true;

            if (window.CS_CONF) {
                CS_CONF.integrations = CS_CONF.integrations || [];
                CS_CONF.integrations.push("Google Analytics - v" + version);
            }
        }
    }

    var disableCallback = false;

    window._uxa = window._uxa || [];
    _uxa.push(["afterPageView", callback]);

    var cmk = null;
    var cn = "_cs_mk_ga";

    function init(cookieValue) {
        if (cookieValue) {
            cmk = cookieValue;
        } else {
            cmk = Math.random() + "_" + Date.now();

            var now = new Date();
            var time = now.getTime();
            time += 30 * 60 * 1000;
            now.setTime(time);

            document.cookie = cn + "=" + cmk + "; expires=" + now.toUTCString() + ";path=/;domain=." + utag.cfg.domain + ";SameSite=None;Secure";
        }

        b.cs_matching_key = cmk;

        _uxa.push([
            "trackDynamicVariable",
            {
                key: "csMatchingKey",
                value: cmk,
            },
        ]);
    }

    if (!b["cp._cs_mk_ga"]) {
        init();
    } else {
        var getCookieValue = b["cp._cs_mk_ga"];
        init(getCookieValue);
    }
})();
//Google Analytics CS Integration End

Tag Commander or Inline (ga version)

Your Tag Commander or Inline code for GA will already have a line like this:

ga("create", "UA-XXXXXXXXX-X", "auto");

For the gtag solution see below the ga code solution.

Simply add the part from the comments in the code after the line above.

On the relevant line of the code below make sure to edit the custom dimension index number you are using.

So change the X in this line:

ga("set", "dimensionX", cmk);

The code in comments should be placed before this part which you already have defined:

ga("send", "pageview");

This is the code example below

(function () {
    ga("create", "UA-XXXXXXXXX-X", "auto");

    /*
     *Name: Google Analytics CS Integration
     *Version: 1.11.0 (ga + csMatchingKey + inline)
     */

    var version = "1.11.0";

    function callback() {
        if (!disableCallback) {
            disableCallback = true;

            if (window.CS_CONF) {
                CS_CONF.integrations = CS_CONF.integrations || [];
                CS_CONF.integrations.push("Google Analytics - v" + version);
            }
        }
    }

    var disableCallback = false;

    window._uxa = window._uxa || [];
    _uxa.push(["afterPageView", callback]);

    var cmk = null;
    var cn = "_cs_mk_ga";

    function init(cookieValue) {
        if (cookieValue) {
            cmk = cookieValue;
        } else {
            cmk = Math.random() + "_" + Date.now();

            var tld = (function () {
                var i = 0,
                    domain = document.domain,
                    p = domain.split("."),
                    s = "_cs_tld" + new Date().getTime();
                while (i < p.length - 1 && document.cookie.indexOf(s + "=" + s) == -1) {
                    domain = p.slice(-1 - ++i).join(".");
                    document.cookie = s + "=" + s + ";domain=" + domain + ";SameSite=None;Secure";
                }
                document.cookie = s + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=" + domain + ";";
                return domain;
            })();

            var now = new Date();
            var time = now.getTime();
            time += 30 * 60 * 1000;
            now.setTime(time);

            document.cookie = cn + "=" + cmk + "; expires=" + now.toUTCString() + ";path=/;domain=" + tld + ";SameSite=None;Secure";
        }

        _uxa.push([
            "trackDynamicVariable",
            {
                key: "csMatchingKey",
                value: cmk,
            },
        ]);
    }

    var cookies = "; " + document.cookie;
    if (cookies) {
        var getCookie = cookies.split("; " + cn + "=");

        if (getCookie.length == 1) {
            init();
        } else {
            var cookieValue = getCookie[1].split(";")[0];
            init(cookieValue);
        }
    }

    if (cmk) {
        ga("set", "dimensionX", cmk);
    }

    //Google Analytics CS Integration End

    ga("send", "pageview");
})();

Tag Commander or Inline (gtag version)

Your Tag Commander or Inline code for GA will already have a line like this:

gtag("js", new Date());

For the ga solution see the above solution.

Simply add the part from the comments in the code after the line above.

On the relevant line of the code below make sure to edit the custom dimension index number in the custom_map which needs to be added.

So change the X in this line:

"dimensionX": "csMatchingKey"

The code in comments should be placed before this part which you already have defined but need to edit:

gtag("config", "UA-XXXXXXXXX-X", {
    "csMatchingKey": cmk
});

This is the code example below

(function () {
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }
    gtag("js", new Date());

    /*
     *Name: Google Analytics CS Integration
     *Version: 1.11.0 (gtag + csMatchingKey + Inline + Tag Commander)
     */

    var version = "1.11.0";

    function callback() {
        if (!disableCallback) {
            disableCallback = true;

            if (window.CS_CONF) {
                CS_CONF.integrations = CS_CONF.integrations || [];
                CS_CONF.integrations.push("Google Analytics - v" + version);
            }
        }
    }

    var disableCallback = false;

    window._uxa = window._uxa || [];
    _uxa.push(["afterPageView", callback]);

    var cmk = null;
    var cn = "_cs_mk_ga";

    function init(cookieValue) {
        if (cookieValue) {
            cmk = cookieValue;
        } else {
            cmk = Math.random() + "_" + Date.now();

            var tld = (function () {
                var i = 0,
                    domain = document.domain,
                    p = domain.split("."),
                    s = "_cs_tld" + new Date().getTime();
                while (i < p.length - 1 && document.cookie.indexOf(s + "=" + s) == -1) {
                    domain = p.slice(-1 - ++i).join(".");
                    document.cookie = s + "=" + s + ";domain=" + domain + ";SameSite=None;Secure";
                }
                document.cookie = s + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=" + domain + ";";
                return domain;
            })();

            var now = new Date();
            var time = now.getTime();
            time += 30 * 60 * 1000;
            now.setTime(time);

            document.cookie = cn + "=" + cmk + "; expires=" + now.toUTCString() + ";path=/;domain=" + tld + ";SameSite=None;Secure";
        }

        _uxa.push([
            "trackDynamicVariable",
            {
                key: "csMatchingKey",
                value: cmk,
            },
        ]);
    }

    var cookies = "; " + document.cookie;
    if (cookies) {
        var getCookie = cookies.split("; " + cn + "=");

        if (getCookie.length == 1) {
            init();
        } else {
            var cookieValue = getCookie[1].split(";")[0];
            init(cookieValue);
        }
    }

    if (cmk) {
        gtag("set", {
            custom_map: {
                dimensionX: "csMatchingKey",
            },
        });

        gtag("config", "UA-XXXXXXXXX-X", {
            csMatchingKey: cmk,
        });
    }
    //Google Analytics CS Integration End
    else {
        gtag("config", "UA-XXXXXXXXX-X");
    }
})();

Shopify

On the relevant line of the code below make sure to edit the custom dimension index number you are using.

So change the X in this line:

ga("set", "dimensionX", cmk);

This is the code below

/*
 *Name: Google Analytics CS Integration
 *Version: 1.11.0 (ga + csMatchingKey + Shopify)
 */

var version = "1.11.0";

function callback() {
    if (!disableCallback) {
        disableCallback = true;

        if (window.CS_CONF) {
            CS_CONF.integrations = CS_CONF.integrations || [];
            CS_CONF.integrations.push("Google Analytics - v" + version);
        }
    }
}

var disableCallback = false;

window._uxa = window._uxa || [];
_uxa.push(["afterPageView", callback]);

var cmk = null;
var cn = "_cs_mk_ga";

function init(cookieValue) {
    if (cookieValue) {
        cmk = cookieValue;
    } else {
        cmk = Math.random() + "_" + Date.now();

        var tld = (function () {
            var i = 0,
                domain = document.domain,
                p = domain.split("."),
                s = "_cs_tld" + new Date().getTime();
            while (i < p.length - 1 && document.cookie.indexOf(s + "=" + s) == -1) {
                domain = p.slice(-1 - ++i).join(".");
                document.cookie = s + "=" + s + ";domain=" + domain + ";SameSite=None;Secure";
            }
            document.cookie = s + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;domain=" + domain + ";";
            return domain;
        })();

        var now = new Date();
        var time = now.getTime();
        time += 30 * 60 * 1000;
        now.setTime(time);

        document.cookie = cn + "=" + cmk + "; expires=" + now.toUTCString() + ";path=/;domain=" + tld + ";SameSite=None;Secure";
    }

    _uxa.push([
        "trackDynamicVariable",
        {
            key: "csMatchingKey",
            value: cmk,
        },
    ]);
}

var cookies = "; " + document.cookie;
if (cookies) {
    var getCookie = cookies.split("; " + cn + "=");

    if (getCookie.length == 1) {
        init();
    } else {
        var cookieValue = getCookie[1].split(";")[0];
        init(cookieValue);
    }
}

if (cmk) {
    ga("set", "dimensionX", cmk);
}
//Google Analytics CS Integration End

Verifying it works

To check the implementation, add this extension in Chrome Google Analytics Debugger.

Navigate to your website, activate the Google Analytics Debugger extension and open the Console tab in the Chrome. You shall see something similar to the image below. If not, the implementation failed.

You should see the same csMatchingKey value being sent to Contentsquare like this

Google Connector Configuration

After you have completed the steps above please resume with setting up the Google Analytics connector in the Contentsquare app by going to this link.

Articles in this section

Google Analytics - Code & Config

What to expect

What we collect

Dynamic Variables

Implementation

Implementation Steps

Create a Custom Dimension

Google Tag Manager configuration

Tealium Tag Manager configuration

Tag Commander or Inline configuration

Shopify

The Code

Google Tag Manager

Tealium Tag Manager

Tag Commander or Inline (ga version)

Tag Commander or Inline (gtag version)

Shopify

Google Connector Configuration