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.

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

L’application Contentsquare pour Shopify est le moyen recommandé d’installer le tag Contentsquare sur votre boutique. Elle garantit une couverture complète de votre vitrine (Accueil, Produit, Collections, etc.) et offre des fonctionnalités exclusives pour les marchands Shopify Plus.

L’application Contentsquare pour Shopify active les fonctionnalités suivantes en fonction de votre plan Shopify :

L’application suit automatiquement les événements e-commerce à chaque étape du processus de paiement. Ces données sont essentielles pour construire des cartographies précises et segmenter votre audience.

Cela fonctionne de manière transparente pour les configurations de paiement sur une seule page ou sur plusieurs pages.

Données collectées :

• orderID — Identifiant unique de transaction
• amount — Total de la transaction
• currency — Code de devise de la transaction

Ces données deviennent immédiatement disponibles pour la segmentation et le filtrage dans votre espace de travail Contentsquare (pour les plans Contentsquare Pro et Enterprise).

Si vous utilisez actuellement notre pixel web personnalisé pour capturer les événements Shopify, désactivez-le avant de continuer :

1. Connectez-vous à votre compte Shopify Admin.
2. Accédez à Paramètres > Événements clients.
3. Localisez le pixel Contentsquare (généralement nommé Contentsquare Checkout).
4. Cliquez sur le menu ⋮ (trois points), puis sélectionnez Déconnecter.

1. Trouvez l’application Contentsquare dans le Shopify App Store ↗.
2. Cliquez sur Installer.
3. Examinez les autorisations requises et cliquez sur Installer pour confirmer.
4. Dans Contentsquare, accédez au Catalogue d’intégration ↗, recherchez Shopify, cliquez sur Installer et copiez votre code de connexion.
5. Revenez sur Shopify et remplissez la section Contentsquare data collection :
   • Shopify connection code : Connectez-vous à votre projet Contentsquare existant avec le code de connexion Shopify fourni dans le catalogue d’intégrations Contentsquare.
   • Data privacy contact : Pour vous conformer aux réglementations sur la protection des données, veuillez fournir l’adresse e-mail de votre Délégué à la Protection des Données (DPO) ou de la personne/équipe responsable du traitement des demandes de confidentialité. Nous utiliserons ce contact pour vous informer de toute demande de confidentialité que nous recevons des visiteurs de votre page web Shopify.
6. Cliquez sur Save.

1. Cliquez sur Add Contentsquare to storefront.
2. Vous serez redirigé vers l’éditeur de thème Shopify. Cliquez sur Enregistrer dans le coin supérieur droit pour activer le script de suivi Contentsquare.

1. Cliquez sur Enable data collection on checkout.

Pour envoyer des variables personnalisées à Contentsquare, définissez-les avant le chargement du tag de suivi principal.

Personnalisez les clés et les valeurs selon vos besoins. Vous pouvez référencer des données à partir d’objets ou de tags Liquid :

<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 | json }}]);
window._uxa.push(['setCustomVariable', 2, 'Insert Custom Key 2', 'Insert Custom Value: ' + {{ custom_tag.value2 | json }}]);
window._uxa.push(['setCustomVariable', 3, 'Insert Custom Key 3', 'Insert Custom Value: ' + {{ custom_tag.value3 | json }}]);
</script>

Pour plus d’informations, consultez la commande setCustomVariable.

Les variables dynamiques peuvent être envoyées à tout moment pendant la consultation de la page — elles n’ont pas besoin d’être définies avant le chargement du tag Contentsquare.

Personnalisez les clés et les valeurs selon vos besoins. Vous pouvez référencer des données à partir d’objets ou de tags Liquid :

<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 | json }}]);
      window._uxa.push(["trackPageview"]);


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

Pour plus d’informations, consultez la commande trackDynamicVariable.

<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 | json }}]);
      window._uxa.push(['setCustomVariable', 2, "Insert Custom Key 2", "Insert Custom Value: " + {{ custom_tag.value2 | json }}]);
      window._uxa.push(['setCustomVariable', 3, "Insert Custom Key 3", "Insert Custom Value: " + {{ custom_tag.value3 | json }}]);

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

<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 | json }}]);
      window._uxa.push(["trackPageview"]);

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

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.