Google Analytics - Code & Config – Centre d'aide

Détails

Type d'intégration	Préfixe de variable dynamique
Analytique	csMatchingKey

Contentsquare vous permet d'utiliser vos segments Google Analytics dans tous les modules de Contentsquare (analyse du parcours, comparateur de pages, analyse du zonage, relecture de session).

Pour importer vos segments, vous devez ajouter un bout de code à votre site Web. Ce code transmet un identifiant à Google Analytics. Il nous aide à faire correspondre les sessions Google Analytics avec celles de Contentsquare.

Mise en œuvre

Créer une dimension personnalisée

Veuillez consulter configurer une dimension personnalisée Contentsquare dédiée dans votre compte Google Analytics avec la portée définie sur Sessioncomme vous le voyez ci-dessous :

Il existe de nombreuses façons d'intégrer le code mais nous allons couvrir les options suivantes :

Google Tag Manager
Gestionnaire de balises Tealium
Tag Commander ou directement en ligne

Configuration de Google Tag Manager

Dans GTM, créez une Variable définie par l'utilisateur dans la section Variables section

Ajouter un Javascript personnalisé personnalisée

Donnez-lui un nom en rapport avec l'intégration et copiez-collez le code de la section correspondante ci-dessous dans le conteneur.

Enregistrez le tout et vous devriez obtenir quelque chose comme ceci

Veuillez noter que l'opération ci-dessus doit être effectuée à l'aide d'une Variable définie par l'utilisateur PAS en utilisant une balise HTML personnalisée.

Ensuite, allez dans votre conteneur de balises Google Analytics et cochez la case suivante Activer le remplacement des paramètres dans cette balise.

Ensuite, développez Plus de paramètres et Dimensions personnalisées puis définissez le numéro d'index de la dimension personnalisée que vous avez définie et définissez l'option Valeur de la dimension comme étant la nouvelle variable définie par l'utilisateur que vous avez créée.

Vous devriez avoir quelque chose comme ceci

Configuration du Tag Manager Tealium

Dans votre compte Tealium, accédez à la section Couche de données sous la section iQ Tag Management.

Cliquez sur Add Variable

Définissez le type à Variable UDO et rendez la source cs_matching_key ou nommez-la comme vous voulez, mais si vous la renommez, modifiez-la également et utilisez le même nom dans le code.

Enregistrez le tout et vous devriez avoir ceci

Allez dans votre conteneur de balises Google Analytics, dans la section Balises, et modifiez vos variables mappées.

Recherchez la variable que vous avez créée cs_matching_key ou quel que soit le nom que vous lui avez donné, sélectionnez-la et appuyez sur Sélectionner la destination.

Cliquez sur Dimensions puis définissez le type d'événement comme Pageview et sélectionnez la dimension que vous avez définie dans Google Analytics et enregistrez-la.

Vous devriez alors voir quelque chose comme ceci

Ensuite, allez dans Extensions et créez une extension Javascript Code.

Donnez-lui un nom relatif à l'intégration de Google et Contentsquare et définissez la portée comme étant la balise Google Analytics.

Prenez le code approprié ci-dessous dans la section code et collez-le là.

Tag Commander ou configuration en ligne

Tag Commander ne dispose pas actuellement d'un conteneur de code Google Analytics intégré, vous utilisez donc très probablement un conteneur Javascript personnalisé.

Si vous utilisez le code GA en ligne, la même chose s'applique ci-dessous.

Dans la section de code pertinente ci-dessous, il y a des parties que vous aurez déjà définies et le reste est ce que vous devez ajouter aux parties existantes dans le même ordre logique.

Le code

Gestionnaire de balises Google

/*
 *Nom : Intégration de Google Analytics CS
 *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 + " ;";
                retourner le domaine ;
            })() ;

            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",
            {
                clé : "csMatchingKey",
                valeur : cmk,
            },
        ]) ;
    }

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

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

    return cmk ;
}
//Fin de l'intégration de Google Analytics CS

Gestionnaire de balises Tealium

/*
 *Nom : 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",
            {
                clé : "csMatchingKey",
                valeur : cmk,
            },
        ]) ;
    }

    if (!b["cp._cs_mk_ga"]) {
        init() ;
    } else {
        var getCookieValue = b["cp._cs_mk_ga"] ;
        init(getCookieValue) ;
    }
})() ;
//Fin de l'intégration de Google Analytics CS

Tag Commander ou Inline (version ga)

Votre code Tag Commander ou Inline pour GA aura déjà une ligne comme celle-ci :

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

Pour la solution gtag, voir ci-dessous la solution du code ga.

Il suffit d'ajouter la partie des commentaires dans le code après la ligne ci-dessus.

Sur la ligne correspondante du code ci-dessous, assurez-vous de modifier le numéro d'index de la dimension personnalisée que vous utilisez.

Changez donc le X dans cette ligne :

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

Le code dans les commentaires doit être placé avant cette partie que vous avez déjà définie :

ga("send", "pageview") ;

Voici l'exemple de code ci-dessous

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

    /*
     *Nom : Intégration de Google Analytics CS
     *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 + " ;";
                retourner le domaine ;
            })() ;

            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",
            {
                clé : "csMatchingKey",
                valeur : cmk,
            },
        ]) ;
    }

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

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

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

    //Fin de l'intégration de Google Analytics CS

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

Tag Commander ou Inline (version gtag)

Votre code Tag Commander ou Inline pour GA aura déjà une ligne comme celle-ci :

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

Pour la solution ga, voir la solution ci-dessus.

Ajoutez simplement la partie des commentaires dans le code après la ligne ci-dessus.

Sur la ligne correspondante du code ci-dessous, assurez-vous de modifier le numéro d'index de la dimension personnalisée dans le custom_map qui doit être ajouté.

Changez donc le X dans cette ligne :

"dimensionX" : "csMatchingKey"

Le code dans les commentaires doit être placé avant cette partie que vous avez déjà définie mais que vous devez modifier :

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

Voici l'exemple de code ci-dessous

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

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

    /*
     *Nom : Intégration de Google Analytics CS
     *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 + " ;";
                retourner le domaine ;
            })() ;

            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",
            {
                clé : "csMatchingKey",
                valeur : cmk,
            },
        ]) ;
    }

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

        si (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,
        }) ;
    }
    //Fin de l'intégration de Google Analytics CS
    else {
        gtag("config", "UA-XXXXXXXXX-X") ;
    }
})() ;

Vérification du fonctionnement

Pour vérifier l'implémentation, ajoutez cette extension dans Chrome Débogueur Google Analytics.

Naviguez sur votre site Web, activez l'extension Google Analytics Debugger et ouvrez l'onglet Console dans Chrome. Vous devriez voir quelque chose de similaire à l'image ci-dessous. Si ce n'est pas le cas, l'implémentation a échoué.

Vous devriez voir la même valeur csMatchingKey envoyée à Contentsquare comme ceci

Configuration du connecteur Google

Après avoir effectué les étapes ci-dessus, veuillez reprendre la configuration du connecteur Google Analytics dans l'application Contentsquare en allant sur ce lien.

Articles dans cette section

Google Analytics - Code & Config