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 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.

1. Ouvrez l’espace de travail et accédez à la section Modèles.

2. Cliquez sur Rechercher dans la galerie.

3. Recherchez contentsquare et sélectionnez le modèle Contentsquare - Main tag.

4. Cliquez sur Ajouter à l’espace de travail.

5. Confirmez le choix en cliquant sur Ajouter.

6. Dans la section “Balises”, cliquez sur Nouvelle pour ajouter le tag.

7. Configurez le tag en cliquant sur le bouton d’édition en haut à droite.

8. Recherchez contentsquare et sélectionnez le template Contentsquare - Main tag précédemment ajouté.

9. 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.

10. Sélectionnez le déclencheur: Toutes les pages ou DOM prêt (une fois que le data layer est entièrement chargé).

    

11. (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.

12. Sauvegardez les modifications et retourner dans l’espace de travail. Vous devriez à présent retrouver le modèle ainsi que la balise.

1. Ajoutez une nouvelle balise sur votre espace de travail.

2. Cliquez sur “Choisissez un type de tag pour commencer la configuration…“.

3. Dans la liste, choisissez la balise “Custom HTML”.

4. 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>

5. Cliquez sur “Choisissez un déclencheur pour cette balise…“.

6. Dans la liste, choisissez le déclencheur “All Pages” qui devra attendre que le dataLayer ait été alimenté avant de déclencher le tag.

7. Attribuez un nom au Tag (par exemple “Contentsquare Main Tag”), puis cliquez sur “Enregistrer”.

1. Ajoutez un nouveau tag à vos conteneurs en choisissant “Content Square UX Analytics”

2. 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”.

   

3. (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.

   

4. Cliquez sur “Terminer” ou répétez l’ÉTAPE 3 pour ajouter des variables.

   

1. Recherche Contentsquare dans Extensions puis cliquez sur Installer.

2. 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.

3. (Optionnel) Sélectionnez Masquez les données personnelles.

   

4. (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 :

   

5. Enregistrez vos modifications et passez à l’étape suivante.

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

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

Voici quelques exemples :

1. Sélectionnez Installation du Tag principal dans l’extension Contentsquare.

2. Si vous n’avez pas besoin de modifier davantage le chemin ou les requêtes envoyées, cliquez sur “Conserver les modifications”.

3. 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 :

   

4. Enregistrez et passez à la règle suivante.

1. Ajoutez une nouvelle balise à vos contenurs en sélectionnant Contentsquare (Builder).

2. Définissez le template Contentsquare adéquat en sélectionnant Main.

3. Saisissez votre Tag ID.

4. (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.

5. Saisissez un nom pour votre Tag - par exemple Contentsquare Main Tag, et cliquez sur Save.

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

1. Dans le menu principal, cliquez sur Online Store > Themes, puis cliquez sur le menu déroulant Actions et sélectionnez Edit Code.

   

2. Sous Layout, sélectionnez le fichier theme.liquid.

3. Dans l’éditeur de code, naviguez jusqu’au tag </head> fermant.

4. 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 -->

5. Copiez le code avant le tag </head> fermant.

   

6. Cliquez sur Save.

Si vous n’avez pas de compte Shopify Plus account et souhaitez tracker les commandes traitées, ajoutez le code à la page de remerciement (“thank you page”) une fois la transaction terminée. Cela vous permet de capturer les données ecommerce en suivant ces étapes :

1. Cliquez sur Settings.

   

2. Depuis la fenêtre modale, sélectionnez Checkout and accounts.

   

3. Scrollez jusqu’à la section Order status page.

4. Dans le champ Additional scripts, insérez le même code que vous avez ajouté au fichier theme.liquid :

   

5. Cliquez sur Save.

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.

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.

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.

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.

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é.

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.

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.

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.