ⓘ This is an early-access beta integration

Category: Analytics

This integration is only available for Web projects

What to expect

This integration will allow you to analyze data from anywhere in the customer journey using your Piano Analytics segments. Contentsquare allows you to use your Piano Analytics segments in every Contentsquare feature (Journey Analysis, Page Comparator, Zoning Analysis, Session Replay).

To import your segments, you will need to add a snippet of code to your Piano code configuration. This code pushes a unique identifier to Piano Analytics. It helps us match Piano Analytics sessions with Contentsquare sessions.

What we collect

Dynamic Variables

Key	Value	Data Type
cs_matching_key	{csMatchingKey}	Text

csMatchingKey

Refers to the unique value used to cross-reference Piano segments with Contentsquare sessions.

Implementation

Implementation Steps

ⓘ Prerequisite: If you have a cookie policy that requires our cookies to be accepted first, before injection, then it is up to you to ensure that the code below is wrapped in your cookie consent policy logic.

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

Custom HTML / Javascript implementation
Google Tag Manager - Piano Analytics Template

Custom HTML / Javascript Implementation

This can be used for any custom code implementation such as in GTM Custom HTML tags or any other tag manager using custom HTML / Javascript. It can also be for code placed inline.

You will need to add the following code into the existing Piano Analytics configuration, before the Piano Analytics pa.sendEvent("page.display", {}) command.

So for example:

Please note that if you name the CS matching key property with a different name other than the default in the code which is cs_matching_key, then you need to also change it in the code in this section:

How to implement code for custom HTML / javascript implementations:

Before using this method you will first need to determine which Piano's Analytics SDK version you are using:

If you are using the following library for Piano Analytics then you are using the latest SDK version:

<script src="https://tag.aticdn.net/piano-analytics.js"></script>

If you are using the SmartTag library then you are using the legacy version.

<script src="https://tag.aticdn.net/[siteid]/smarttag.js"></script>

The following code is for the latest SDK version:

/*
 *Name: Piano Analytics CS Integration
 *Version: 1.0.0
 */
(function () {
    var version = "1.0.0";

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

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

    var disableCallback = false;

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

    var cmk = null;
    var cn = "_cs_mk_pa";

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

        if (window.pa && typeof pa.setProperty === "function") {
            pa.setProperty("cs_matching_key", cmk, {
                persistent: true,
            });
        }

        _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);
        }
    }
})();
//Piano Analytics CS Integration End

The following code is for the legacy SDK version:

/*
 *Name: Piano Analytics CS Integration
 *Version: 1.0.0 (Legacy)
 */
(function () {
    var version = "1.0.0";

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

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

    var disableCallback = false;

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

    var cmk = null;
    var cn = "_cs_mk_pa";

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

        //Replace "tag" with the name of your AT Internet Track Tag
        tag.setProp("cs_matching_key", cmk, true);

        _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);
        }
    }
})();
//Piano Analytics CS Integration End

Google Tag Manager - Piano Analytics Template

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

2. Click 'Custom Javascript' to add a custom JavaScript page variable.

3. Name the variable something related to the integration and copy-paste the code below into the Custom JavaScript code editor.

/*
 *Name: Piano Analytics CS Integration
 *Version: 1.0.0 (csMatchingKey + GTM)
 */

function paCSintegration() {
    var version = "1.0.0";

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

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

    var disableCallback = false;

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

    var cmk = null;
    var cn = "_cs_mk_pa";

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

        if (window.pa && typeof pa.setProperty === "function") {
            pa.setProperty("cs_matching_key", cmk, {
                persistent: true,
            });
        }

        _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;
}
//Piano Analytics CS Integration End

Note: If you name the CS matching key property with a different name other than the default in the code which is cs_matching_key, then you need to also change it in the code in this section:

4. Click 'Save' and you will see have something like the example below in your User-Defined Variables:

5. Go to your Piano Analytics tag container and choose the 'Set Properties' option from the actions menu.

6. Insert the key you defined, the default in the code is cs_matching_key. If you change this key name from the default you have to change it in the code also and you need to inform the CS team of the custom name.

7. Then select the Value to be the new User-Defined Variable you created.

8. Enable the checkbox for 'Persistent'.

9. Save the changes and publish the code.

Verifying it works

1. You should see the cs_matching_key value being sent to Contentsquare like this:

2. You can also see the value in the network request sent to Piano Analytics.

Completing your implementation

To complete your Pianos Analytics implementation follow the instructions in this document.

Articles in this section

Piano Analytics - Code & Configuration 🧪