Le Tag principal

La balise principale de Contentsquare ou Tag principal est le “pixel” ou “extrait de code” principal qui doit être implémenté sur votre domaine afin de collecter des données d’analyse. Le Tag peut être implémenté via un Tag Management System (TMS) ou d’après un template. Vous trouverez les instructions pas à pas ci-dessous.

Avant de commencer l’implémentation, vous devez récupérer les informations suivantes :

Un Tag Id Contentsquare vous sera donné au début de votre partenariat avec Contentsquare. C’est un identifiant de 13 caractères qui ne peut être utilisé que sur les domaines autorisés — aucune donnée ne peut être envoyée depuis un autre domaine.
Vous pouvez ajouter jusqu’à 20 variables personnalisées (ou Custom Vars) pour enrichir le contexte d’analyse avec des détails sur la page ou sur l’utilisateur. Elles récoltent généralement des informations issues de votre datalayer ou d’objets JavaScript déjà présents sur votre site.

Google Tag Manager (Template)

Ouvrez l’espace de travail et accédez à la section Modèles.
Cliquez sur Rechercher dans la galerie.
Recherchez contentsquare et sélectionnez le modèle Contentsquare - Main tag.
Cliquez sur Ajouter à l’espace de travail.
Confirmez le choix en cliquant sur Ajouter.
Dans la section “Balises”, cliquez sur Nouvelle pour ajouter le tag.
Configurez le tag en cliquant sur le bouton d’édition en haut à droite.
Recherchez contentsquare et sélectionnez le template Contentsquare - Main tag précédemment ajouté.
Attribuez un nom au tag et saisissez votre Tag ID dans le champ dédié. Pour configurer des Custom Variables, saisissez :
- L’indice, from 1 to 20 - nombre uniques seulement
- Le nom
- La valeur, qui peut être récupérée depuis une des variables GTM existantes.
- Le scope — sélectionnez Page & Visit (2 & 3), ou Single Page App (nextPageOnly) (4) si votre site ou une partie est une Single Page Application. En cas de doute, vérifiez avec Contentsquare.
Sélectionnez le déclencheur: Toutes les pages ou DOM prêt (une fois que le data layer est entièrement chargé).
(Optionnel) Masquez les données personnelles dans l’interface GTM.

Sélectionnez la méthode de masking des données personnelles selon le type d’information :
- Define CSS Selectors pour les nœuds textuels.
- CSS Selectors et Data Attributes pour les attributs.
Sauvegardez les modifications et retourner dans l’espace de travail. Vous devriez à présent retrouver le modèle ainsi que la balise.

Google Tag Manager (Custom HTML)

Ajoutez une nouvelle balise sur votre espace de travail.
Cliquez sur “Choisissez un type de tag pour commencer la configuration…“.
Dans la liste, choisissez la balise “Custom HTML”.

Selon la disponibilité de votre data layer, utilisez les exemples suivants pour :

Implémenter le tag et pousser des variables du data layer vers Contentsquare :

<script type="text/javascript">
(function () {
    window._uxa = window._uxa || [];
    try {
        window._uxa.push(['setCustomVariable', 1, 'Sample Variable', {{your-GTM-variable-here}}, 3]);
    } catch(e){}
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR_TAG_ID}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

Implémenter le tag sans pousser de variables du data layer vers Contentsquare :

<script type="text/javascript">
(function () {
    window._uxa = window._uxa || [];
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR_TAG_ID}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

Cliquez sur “Choisissez un déclencheur pour cette balise…“.
Dans la liste, choisissez le déclencheur “All Pages” qui devra attendre que le dataLayer ait été alimenté avant de déclencher le tag.
Attribuez un nom au Tag (par exemple “Contentsquare Main Tag”), puis cliquez sur “Enregistrer”.

Tealium

Ajoutez un nouveau tag à vos conteneurs en choisissant “Content Square UX Analytics”
Ajoutez le “TAG ID” et cliquez deux fois sur “Suivant”, en conservant la configuration par défaut.

Si vous n’avez pas de variables personnalisées, cliquez sur “Terminer”.
(Optionnel) Ajoutez les variables personnalisées :
- Choisissez une variable du datalayer dans la liste et cliquez sur Sélectionner la destination.
- Cliquez sur Personnaliser.
- Ajoutez un nom de variable.
- Cliquez sur Ajouter.
- Cliquez sur Fermer.
Cliquez sur “Terminer” ou répétez l’ÉTAPE 3 pour ajouter des variables.

Adobe Launch

Installation de l’extension Contentsquare

Recherche Contentsquare dans Extensions puis cliquez sur Installer.
Saisissez votre Tag ID, fourni par l’équipe d’implémentation Contentsquare.

Pour envoyer des variables personnalisées, cliquez sur Ajouter une nouvelle variable et saisissez :
- L’indice, from 1 to 20 - nombre uniques seulement
- Le nom
- La valeur, qui peut être récupérée depuis une des variables GTM existantes.
- Le scope — sélectionnez Page & Visit (2 & 3), ou Single Page App (nextPageOnly) (4) si votre site ou une partie est une Single Page Application. En cas de doute, vérifiez avec Contentsquare.
Utilisez Data Elements dans les champs de valeur, car ils constituent la méthode intégrée d’envoi des informations entre les extensions.
(Optionnel) Sélectionnez Masquez les données personnelles.
(Optionnel) Sélectionnez la méthode de masking des données personnelles selon le type d’information :
- Masquez les données personnelles textuelles via des sélecteurs CSS : Assurez-vous que les sélecteurs CSS sont valides.
- S’il s’agit de données personnelles non-textuelles, utilisez le champ ci-dessous et le template :
Enregistrez vos modifications et passez à l’étape suivante.

Déclenchement de la balise principale

Dans les Règles, ouvrez une règle existante ou créez en une nouvelle.

Configuration d’événement

En fonction de vos besoins, sélectionnez l’événement à utiliser à partir de l’extension principale.

Implémentation par défaut - bas de page et DOM ready

Voici quelques exemples :

Configuration de l’action

Sélectionnez Installation du Tag principal dans l’extension Contentsquare.
Si vous n’avez pas besoin de modifier davantage le chemin ou les requêtes envoyées, cliquez sur “Conserver les modifications”.
Si vous devez remplacer le chemin et / ou la requête, sélectionnez l’élément et écrivez le chemin à utiliser comme substitut. Vous pouvez également créer des Data Elements et les utiliser dans ces champs.

Une fois que vous avez terminé, votre nouvelle règle devrait ressembler à la suivante :
Enregistrez et passez à la règle suivante.

Commanders Act

Ajoutez une nouvelle balise à vos contenurs en sélectionnant Contentsquare (Builder).
Définissez le template Contentsquare adéquat en sélectionnant Main.
Saisissez votre Tag ID.
(Optionnel) Pour ajouter des variables personnalisées, sélectionnez Yes sous “Add customs variables” et renseignez les paramètres :
- name
- scope: 2 pour visit, 3 pour page, 4 pour nextPageOnly.
- value, qui peut être une de vos variables Commanders Act.
Saisissez un nom pour votre Tag - par exemple Contentsquare Main Tag, et cliquez sur Save.

Votre tag est prêt à être déployé.

Shopify

Configuration standard

Dans le menu principal, cliquez sur Online Store > Themes, puis cliquez sur le menu déroulant Actions et sélectionnez Edit Code.
Sous Layout, sélectionnez le fichier theme.liquid.
Dans l’éditeur de code, naviguez jusqu’au tag </head> fermant.

Copiez cet extrait de code en remplaçant YOUR_TAG_ID par votre ID Contentsquare :

<!-- Contentsquare Tags Start -->
<script type="text/javascript">
// Contentsquare Main Tracking Tag
(function() {
    window._uxa = window._uxa || [];
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname + window.location.hash.replace('#', '?__')]);
        var mt = document.createElement("script");
        mt.type = "text/javascript";
        mt.async = true;
        mt.src = "//t.contentsquare.net/uxa/YOUR_TAG_ID.js";
        document.getElementsByTagName("head")[0].appendChild(mt);
    } else {
        window._uxa.push(['trackPageview', window.location.pathname + window.location.hash.replace('#', '?__')]);
    }
})();
</script>
<!-- Contentsquare Tags End -->

Copiez le code avant le tag </head> fermant.
Cliquez sur Save.

Trackez le Checkout flow avec Contentsquare

Trackez le checkout flow en ajoutant un pixel personnalisé à votre compte Shopify. Ce pixel peremet d’envoyer des pageviews avec des variables dynamiques à Contentsquare à chaque étape du checkout, pour des fonctionnalités de mapping et de segmentation, tracker des transations ecommerce, le tout en un seul script.

Cette solution fonctionne pour les flow de checkout sur une ou plusieurs pages.

Les événements collectés sont :

checkout_started
checkout_contact_info_submitted
checkout_address_info_submitted
checkout_shipping_info_submitted
payment_info_submitted
checkout_completed
Données ecommerce :
- orderID
- amount
- currency

Une fois collectés, ces événements sont utilisables pour segmenter et filter dans Contentsquare :

Ajouter le pixel personnalisé au checkout

Sélectionnez Paramètres dans l’interface administrateur Shopify.
Sélectionnez Événements clients puis Ajouter un pixel.
Saissisez un nom pour le pixel par exemple Contentsquare Checkout.

Copier et coller le code ci-dessous en remplaçant {{YOUR_TAG_ID}} avec votre ID de Tag Contentsquare :

/*
*Name: Shopify CS Integration
*Version: 2.2.0
*/

const csTagID = "{{YOUR_TAG_ID}}";
const csTypeVendorPrefix = "CMS_SH_";
let submittedEvents = [];

function sendToCS(csKey, csValue, csPV, eventContext) {
csKey = csTypeVendorPrefix + csKey;

setTimeout(function () {
    let setQuery;

    if (csPV && eventContext) {
        const hash = eventContext.window.location.hash;
        const query = eventContext.window.location.search;
        setQuery = "?" + csPV;

        if (hash) {
            setQuery = hash.replace("#", "?__") + csPV;
        } else {
            if (query) {
                setQuery = "?__" + csPV;
            }
        }
    }

    _uxa.push(["trackPageview", eventContext.window.location.pathname + setQuery]);

    _uxa.push([
        "trackDynamicVariable",
        {
            key: csKey,
            value: csValue,
        },
    ]);
}, 500);
}

function sendEcomCS(orderID, amount, currency) {
_uxa.push([
    "ec:transaction:create",
    {
        id: orderID,
        revenue: amount,
        currency: currency,
    },
]);

_uxa.push(["ec:transaction:send"]);
}

analytics.subscribe("page_viewed", (event) => {
if (event.context.window.location.pathname.indexOf("/checkouts") > -1 && event.context.window.location.pathname.indexOf("/processing") === -1) {
    if (typeof CS_CONF === "undefined") {
        window._uxa = window._uxa || [];
        _uxa.push(["setPath", event.context.window.location.pathname + event.context.window.location.hash.replace("#", "?__")]);
        const mt = document.createElement("script");
        mt.type = "text/javascript";
        mt.async = true;
        mt.src = "//t.contentsquare.net/uxa/" + csTagID + ".js";
        document.getElementsByTagName("head")[0].appendChild(mt);
    } else {
        _uxa.push(["trackPageview", event.context.window.location.pathname + event.context.window.location.hash.replace("#", "?__")]);
    }
}
});

analytics.subscribe("checkout_started", (event) => {
if (!submittedEvents.includes(event.name)) {
    submittedEvents.push(event.name);

    sendToCS("Checkout Started", "true", event.name, event.context);
}
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
if (!submittedEvents.includes(event.name)) {
    submittedEvents.push(event.name);

    sendToCS("Checkout Contact Info Submitted", "true", event.name, event.context);
}
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
if (!submittedEvents.includes(event.name)) {
    submittedEvents.push(event.name);

    sendToCS("Checkout Address Info Submitted", "true", event.name, event.context);
}
});

analytics.subscribe("payment_info_submitted", (event) => {
if (!submittedEvents.includes(event.name)) {
    submittedEvents.push(event.name);
    sendToCS("Payment Info Submitted", "true", event.name, event.context);
}
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
if (!submittedEvents.includes(event.name)) {
    submittedEvents.push(event.name);
    sendToCS("Checkout Shipping Info Submitted", "true", event.name, event.context);
}
});

analytics.subscribe("checkout_completed", (event) => {
if (!submittedEvents.includes(event.name)) {
    submittedEvents.push(event.name);
    sendToCS("Checkout Completed", "true", event.name, event.context);

    const data = event.data || "";
    const checkout = data.checkout || "";
    const order = checkout.order || "";
    const orderID = order.id;
    const totalPrice = checkout.totalPrice || "";
    const amount = totalPrice.amount;
    const currency = totalPrice.currencyCode;

    if (typeof orderID != "undefined" && typeof amount != "undefined" && typeof currency != "undefined") {
        sendEcomCS(orderID, amount, currency);
    }
}
});

Sélectionnez Enregistrer puis Connectez le pixel.

Si vous injectez les tags CS dans le checkout par d’autres moyens (Tag Management System, ou la section prochainement dépréciée “script additionnels” dans les paramètres du checkout Shopify), assurez-vous de blocker les autres déclenchement des tags CS : tag principal et tag e-commerce.
Par exemple, si vous avez le tag CS E-commerce dans GTM, mettez ce tag en pause : le pixel prend en charge le tracking complet du flow de checkout et les transactions e-commerce.
Tesez que les pageviews sont envoyées dans le flow de checkout. Réalisez une trasanction de test pour valider que le transaction ecommerce est envoyée.

Envoyer des custom vars

Pour envoyer des custom vars vers Contentsquare, définissez-les avant le Tag principal.

Modifiez les clés et valeurs selon vos besoins : vous pouvez utiliser des Liquid Objects ou des Liquid Tags dans les valeurs.

<script type="text/javascript">
    // Contentsquare Send Custom Variables
    window._uxa = window._uxa || [];
    window._uxa.push(['setCustomVariable', 1, "Insert Custom Key 1", "Insert Custom Value: " + {{ custom_tag.value1 }}]);
    window._uxa.push(['setCustomVariable', 2, "Insert Custom Key 2", "Insert Custom Value: " + {{ custom_tag.value2 }}]);
    window._uxa.push(['setCustomVariable', 3, "Insert Custom Key 1", "Insert Custom Value: " + {{ custom_tag.value3 }}]);

    // Contentsquare Main Tracking Tag
    (function () {
        window._uxa = window._uxa || [];
        if (typeof CS_CONF === 'undefined') {
            window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
            var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
            mt.src = '//t.contentsquare.net/uxa/769238b6e1309.js';
            document.getElementsByTagName('head')[0].appendChild(mt);
        }
        else {
            window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
        }
})();
</script>

Pour plus d’informations, reportez-vous à la documentation de la commande setCustomVariable.

Envoyer des dynamic vars

Vous pouvez envoyer des dynamic vars à n’importe quelle étape du pageview, il n’est pas nécessaire de les définir avant le tag Contentsquare.

Modifiez les clés et valeurs selon vos besoins : vous pouvez utiliser des Liquid Objects ou des Liquid Tags dans les valeurs.

<script type="text/javascript">
    // Contentsquare Send Artificial Pageviews
    document.getElementById("AddToCart").addEventListener('click', function() {
        window._uxa = window._uxa || [];
        window._uxa.push(["setPath", "Added_to_cart_" + {{ custom_tag.value }}]);
        window._uxa.push(["trackPageview"]);

        window._uxa = window._uxa || [];
        window._uxa.push(["trackDynamicVariable", {key: "Added to cart", value: {{ custom_tag.value }}}]);
    });
</script>

Pour plus d’informations, reportez-vous à la documentation de la commande trackDynamicVariable.

HTML personnalisé

Afin de collecter des variables personnalisées à partir de votre datalayer, consultez l’exemple de code suivant :

<script type="text/javascript">
(function () {
    window._uxa = window._uxa || [];
    try {
        if (typeof dataLayer !== 'undefined') {
            for (var i = 0; i < dataLayer.length; i++) {
               window._uxa.push(['setCustomVariable', 1, 'Sample Variable', dataLayer[i].sampleVariable, 3]);
            }
        }
    } catch(e){}
    if (typeof CS_CONF === 'undefined') {
        window._uxa.push(['setPath', window.location.pathname+window.location.hash.replace('#','?__')]);
        var mt = document.createElement('script'); mt.type = 'text/javascript'; mt.async = true;
        mt.src = '//t.contentsquare.net/uxa/{{YOUR_TAG_ID}}.js';
        document.getElementsByTagName('head')[0].appendChild(mt);
    }
    else {
        window._uxa.push(['trackPageview', window.location.pathname+window.location.hash.replace('#','?__')]);
    }
})();
</script>

Ce code crée une fonction qui ajoute un appel asynchrone vers un script et exécute la fonction, de façon à ne pas bloquer le chargement d’autres éléments sur la page. Cela réduit l’impact du tag sur les performances de votre site.

Si vous n’avez pas de datalayer ou n’avez pas besoin d’envoyer des variables personnalisées, consultez l’exemple suivant :

<script type="text/javascript">
(function () {
  window._uxa = window._uxa || [];
  if (typeof CS_CONF === 'undefined') {
    window._uxa.push(['setPath', window.location.pathname + window.location.hash.replace('#', '?__')]);
    var mt = document.createElement("script");
    mt.type = "text/javascript";
    mt.async = true;
    mt.src = "//t.contentsquare.net/uxa/YOUR_TAG_ID.js";
    document.getElementsByTagName("head")[0].appendChild(mt);
  } else {
    window._uxa.push(['trackPageview', window.location.pathname + window.location.hash.replace('#', '?__')]);
  }
})();
</script>

Positionnez le tag avant la balise fermante </body> sur chaque page de votre site web.

Pour une comptabilisation du trafic la plus fiable possible sans ralentir l’affichage, déclenchez le chargement du script dès que la page est affichée (événement DOMContentLoaded ↗).

Attendre que l’intégralité de page soit chargée (événement load ↗) risque de fausser l’intégrité des parcours remontés et le nombre de visites.

N’oubliez pas d’inclure l’ensemble des sous-domaines ainsi que les éventuelles pages appelées par des iFrames.

Ce qu’il contient

Le tag contient :

un objet CS_CONF qui comporte les éléments de configuration propres à votre compte tels que le domaine autorisé, les pourcentages d’inclusion, etc.
la dernière version du Tag.

Vérifier le chargement du tag principal

Utilisez l’extension Chrome Contentsquare Tracking Setup Assistant ↗ pour vérifier que le tag a été correctement chargé et qu’un premier pageview a été envoyé.

Pour vérifier que le Tag est configuré correctement, exécutez ce script dans les outils pour développeurs Google Chrome (F12 ou ⌘+⇧+C), dans le context JavaScript top.

if(typeof CS_CONF != 'undefined'){ if(CS_CONF['status']==1){ console.log("%c UXA: OK on "+CS_CONF.hostnames.join(',') + (CS_CONF.allowSubdomains?" and subdomains":" but not on subdomains"),"color:green"); }else{ console.log("%c UXA: No, "+CS_CONF['status'],"color:red"); }}else{ console.log('%c Not loaded',"color:red");} if(document.cookie.indexOf('_cs_ex')>=0){ console.log("%c Browser excluded by cookie.","color:red"); }

Un message en vert s’affichera en cas de succès. Si un message en rouge s’affiche, référez-vous à Qui est inclus dans l’analyse?.

Options avancées

L’objet `_uxa`

Le tag est basé sur un objet window._uxa qui reçoit des instructions par la fonction push(). Il est ainsi possible d’envoyer des instructions avant même que la librairie ne soit chargée en initialisant la variable window._uxa par un tableau. Nous utilisons le fait que les tableaux interprètent nativement la fonction push().

C’est la raison pour laquelle toutes les instructions envoyées au tag fonctionnent de la manière suivante :

window._uxa = window._uxa || [];
window._uxa.push(<INSTRUCTION>);

La première ligne crée un tableau ([]) si la variable _uxa n’existe pas déjà. La seconde ligne lui ajoute une instruction.

Si la librairie est déjà chargée, l’instruction sera exécutée aussitôt. Si elle n’est pas encore chargée, l’instruction sera exécutée au chargement de la librairie. Dans les deux cas, cela garantit que l’ordre d’exécution des commandes ne génèrera pas d’erreur.

Requêtes CORS

Il est possible d’appeler les tags avec des requêtes CORS (Cross-origin resource sharing, plus d’informations ici ↗). Il suffit d’ajouter crossorigin="anonymous" à la balise <script> du tag principal.

S’il y a une erreur de syntaxe dans un tag, cela générera une exception qui pourra être captée par votre site (avec window.onerror par exemple).

Sans crossorigin="anonymous, cette erreur contiendra un message “Script error”, sans préciser de quel fichier vient l’erreur.
Avec crossorigin="anonymous", le message d’erreur précisera de quel fichier vient l’erreur. C’est plus utile si vous surveillez les erreurs de votre site.

Self-hosting

Si vous devez héberger le Tag, nous vous recommandons d’établir une synchronisation automatique avec http://t.contentsquare.net/uxa/{YOUR_TAG_ID}.js qui fournit toujours la dernière version du Tag.

Contentsquare ne fournit pas de lien public vers des versions spécifiques du Tag.

📬 Souscriviez au changelog pour être notifié des nouvelles versions du Tag tous les mois.