Les pageviews artificielles

Les pages artificielles doivent être déclenchées lorsque :

• Une action modifie complètement le contenu affiché sur la page sans l’actualiser ni en modifier l’URL (demandes Ajax).
• L’utilisateur est redirigé vers une autre étape d’un tunnel sans actualiser la page.
• Votre site réachemine toutes les modifications d’URL sans actualiser la page.
• Votre site est construit avec une application de page unique (SPA) et tous les cadres associés (par exemple, React, Angular).
• Votre site est conçu en tant qu’application web progressive (PWA).
• Les fenêtres modales (popin) / (popup) sont affichées.

URLs stables - Suivi des fenêtres modales et des pageviews artificielles

Selon la procédure de suivi des fenêtres modales ou des événements qui ne changent pas la structure de l’URL, vous devez utiliser la fonctionnalité Contentsquare Trackpageview en suivant ces méthodes et en les liant à la bonne action (clic sur le bouton ou déclencheur d’événement).

URLs dynamiques - Single Page Application (SPA) et changement d’historique

Au cas où l’URL serait modifiée sans recharger la fenêtre, vous pouvez traquer ces changements en déclenchant une nouvelle fois le Tag principal: le Tag détectera automatiquement qu’il a déjà été mis en place sur le site et déclenchera un nouveau pageview à la place.

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

2. Cliquez sur Rechercher dans la galerie.

3. Saisissez contentsquare et sélectionnez l’option Contentsquare - Artificial Pageview

   

4. Cliquez sur Add to workspace

   

5. Cliquez sur Add pour confirmer

   

6. Naviguez dans la section Tags et sélectionnez New pour créer un nouveau Tag.

   

7. Sélectionnez le bouton en haut à droite pour accéder à la configuration

   

8. Saisissez contentsquare et sélectionnez l’option Contentsquare - Artificial Pageview

   

9. Sélectionnez le tag et configurez-le :

   • Sélectionnez l’option Free text option et saisissez la valeur sous Artificial Pageview value.
   • Si votre site web comporte des pop-ups et que vous devez déployer les pageviews artificielles, sélectionnez Use for the opening of a popup dans la liste déroulante.

   

1. Modifier la configuration de la balise principale en ajoutant un nouveau déclencheur.

2. Créer un nouveau déclencheur.

3. Cliquez sur “Choisissez un type de déclencheur pour commencer la configuration…”.

4. Dans la liste, sélectionnez le déclencheur “History Change”.

5. Enregistrez votre déclencheur.

6. Cliquez sur le bouton “Enregistrer” en haut à droite.

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

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

3. Écrivez l’extrait à envoyer dans le champ HTML. Cela devrait ressembler à ceci :

   <script type="text/javascript">
       window._uxa.push(['setQuery', location.search + (location.search ? '&' : '?') + 'cs-popin-dedicated_query_string']);
       window._uxa.push(['trackPageview', window.location.pathname + window.location.hash.replace('#', '?__')]);
       window._uxa.push(['setQuery', location.search]);
   </script>

4. Cliquez sur “Choisissez un déclencheur pour que cette balise se déclenche …”.

5. Créer un nouveau déclencheur pour que cette balise se déclenche.

6. Cliquez sur “Choisissez un type de déclencheur pour commencer la configuration …”.

7. Dans la liste, sélectionnez le déclencheur “Tous les éléments”.

8. Cochez “Quelques clics”

9. Sélectionnez “Elément de clic”, “correspond au sélecteur CSS” et entrez un filtre valide CSS correspondant à l’élément que vous souhaitez suivre.

   Par exemple le CSS valide pour :

   <button class="btn btn primary"> Submit </button>

   sera :

   .btn.btn.primary

   

1. Modifier la configuration de la balise principale en ajoutant un nouveau déclencheur.

2. Créer un nouveau déclencheur.

3. Cliquez sur “Choisissez un type de déclencheur pour commencer la configuration…”.

4. Dans la liste, sélectionnez le déclencheur “History Change”.

5. Enregistrez votre déclencheur.

6. Cliquez sur le bouton “Enregistrer” en haut à droite.

Attribuez l’événement que vous avez peut-être déjà mis place à un extrait de code HTML personnalisé et définissez-le comme déclencheur. Cela devrait ressembler à ceci :

<script type="text/javascript">
    window._uxa.push(['setQuery', location.search + (location.search ? '&' : '?') + 'cs-popin-dedicated_query_string']);
    window._uxa.push(['trackPageview', window.location.pathname + window.location.hash.replace('#', '?__')]);
    window._uxa.push(['setQuery', location.search]);
</script>

Attribuez l’événement que vous avez peut-être déjà mis en place à l’extension Contentsquare, afin qu’elle soit déclenchée à nouveau à chaque changement d’historique ou réacheminement de la vue.

Lors de la configuration de la règle, assurez-vous de cibler l’événement ou la condition nécessaire. Par exemple, pour une action d’ajout au panier, vous pouvez suivre l’itinéraire par clic :

Ou l’itinéraire d’événement personnalisé :

Une fois que vous avez choisi l’événement souhaité, vous pouvez sélectionner l’action de suivi de vue de page artificielle à partir de l’extension Contentsquare.

En fonction de la page consultée, vous pouvez:

• Spécifier la requête à transmettre aux serveurs Contentsquare.

• Capturer automatiquement l’URL courante, en laissant le champ de saisie vide.

  

Dans le cas d’une implémentation de SPA, si votre chemin d’url est automatiquement modifié à chaque réacheminement, il vous suffira d’utiliser l’événement de changement d’historique intégré afin de déclencher notre balise sur chacune de ces occurrences.

1. Pour ajouter un nouvel événement, allez à l’étape “MODIFIER” et cliquez sur “AJOUTER UN ÉVÉNEMENT” (1) :

   Une fenêtre de configuration apparaîtra, avec plusieurs champs :

   • (1) “Nom“ : Nom de l’événement que vous souhaitez ajouter
   • (2) “Id“ : l’identifiant de l’événement (à compléter uniquement si vous le connaissez et souhaitez déclencher l’événement en fonction de son identifiant; sinon, laissez le champ vide et il sera généré automatiquement par Commanders Act)
   • (3) Code JavaScript : zone dans laquelle le code JavaScript de l’événement est saisi.
   • (4) «Utiliser le nettoyeur de balises» : fonctionnalité permettant de «corriger» l’événement (le réécrit afin d’éviter les erreurs JavaScript et le rendre compatible avec le code du conteneur).

   

2. Cliquez sur «Ajouter» pour ajouter votre événement au conteneur.

3. Aller à la bibliothèque de balises. Une fois là :

   1. Écrivez «Event Injection» dans le moteur de recherche.
   2. Sélectionnez le tag.
   3. Ajoutez le tag.

En cas de suivi des pageviews artificielles avec Contentsquare, le code à déployer doit suivre ces instructions :

window._uxa = window._uxa || [];
window._uxa.push(['trackPageview', <PATH_A_ENVOYER> ]);

(4) allez sur votre site web; Placez le curseur sur l’élément sur lequel vous souhaitez placer un événement et faites un clic droit. Dans le menu qui s’ouvre, sélectionnez «Inspecter l’élément». (5) Dans la console, une fois l’élément mis en surbrillance, cliquez à nouveau avec le bouton droit de la souris. (6) Choisissez «copier» dans le menu. (7) «Sélecteur de copie».

(8) Si vous connaissez l’ID de l’élément (en commençant par un #, copiez-le et collez-le dans le champ #CSS_PATH#).

(9) Si vous ne connaissez pas ou ne trouvez pas l’ID, copiez et collez les informations sur l’élément en commençant par “#” et remplacez “>“ (espace> espace) par un seul espace dans la ligne de code.

(10) Copiez et collez la ligne dans le champ #CSS_PATH# de l’interface.

Entrez maintenant l’ID de l’événement que vous souhaitez appeler dans le champ correspondant.

Passez à l’étape de déploiement comme vous le faites avec d’autres balises.

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

   

2. Ouvrez le fichier Liquid ou vous souhaitez déclencher une pageview artificiel, d’après votre logique JavaScript. Vous pouvez déclencher le pageview artificiel depuis theme.liquid ou un autre fichier Liquid.

   Si vous souhaitez déclencher un pageview artificiel conditionnellement, par exemple seulement quand un article est ajouté au panier, vous devez entourer ce code dans votre propre condition, fonction callback, ou event listener.

3. Dans l’extrait ci-dessous, remplacez *path_to_send* par votre chemin unique.

   window._uxa = window._uxa || [];
   window._uxa.push(['trackPageview', *path_to_send* ]);

   Vous pouvez hardcoder une valeur statique pour le path comme par exemple Added_to_cart ou utiliser les Liquid Objects ↗/Liquid Tags ↗ Shopify, pour récupérer les données dynamiquement, comme ci-dessous :

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

4. Insérer ce code après le block du Tag principal.

   Voici un aperçu du résultat final dans le fichier Liquid :

   <!-- 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/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(["trackPageview", "Added_to_cart_" + {{ custom_tag.value}}])
   });
   </script>

5. Pour modifier le chemin complet envoyé, utilisez la commande setPath :

   <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"]);
       });
   </script>

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

6. Pour modifier seulement la query string, utilisez la commande setQuery :

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

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

Pour envoyer un pageview, utiliser la commande trackPageview :

<script type="text/javascript">
  window._uxa = window._uxa || [];
  window._uxa.push(['trackPageview', <PATH_TO_SEND>]);
</script>

<PATH_TO_SEND> est limité à 255 caractères.

Par exemple, si vous souhaitez garder la trace de la fenêtre contextuelle apparaissant lors de l’ajout d’un article au panier :

<script type="text/javascript">
    window._uxa.push(['setQuery', location.search + (location.search ? '&' : '?') + 'cs-popin-dedicated_query_string']);
    window._uxa.push(['trackPageview', window.location.pathname + window.location.hash.replace('#', '?__')]);
    window._uxa.push(['setQuery', location.search]);
</script>

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

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

Pour tracker l’ouverture et la fermeture d’une popin comme une page à part entière dans la navigation des internautes, utilisez les pageviews artificiels.

1. Un premier pageview artificiel doit être envoyé à l’ouverture de la popin – l’URL envoyée sera celle courante complétée par une chaîne de caractères permettant d’identifier la popin.

   <script type="text/javascript">
     window._uxa = window._uxa || [];
     window._uxa.push(['setQuery', location.search + (location.search ? '&' : '?') + 'cs-popin-dedicated_query_string']);
     window._uxa.push(['trackPageview', window.location.pathname + window.location.hash.replace('#', '?__')]);
     window._uxa.push(['setQuery', location.search]);
   </script>

2. A la fermeture, un second pageview artificiel envoie à nouveau l’URL de la page originale.

   <script type="text/javascript">
     window._uxa = window._uxa || [];
     window._uxa.push(['setQuery', location.search]);
     window._uxa.push(['trackPageview', window.location.pathname + window.location.hash.replace('#', '?__')]);
   </script>

Le tag Contentsquare n’envoie qu’un pageview par chargement complet. Dans une Single Page Application (SPA), cela n’arrive qu’une fois par session.

Pour gérer cela, un pageview artificiel à chaque changement de page est nécessaire — utilisez l’événement “History Change” disponible dans la plupart des Tag Management Systems.

Vous pouvez exécuter le code suivant sur chaque page et au changement de page. Cela exécute le main tag la première fois puis un pageview artificiel pour les autres exécutions.

<script type="text/javascript">
  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>

Si votre checkout ne fait qu’un seul chargement complet (“full reload”), le tag principal ne sera appelé qu’une seule fois et seul un pageview naturel sera envoyé.

Nous collecterons donc seulement :

• shop.com/checkout/

Au lieu de :

• shop.com/checkout/step1
• shop.com/checkout/step2
• shop.com/checkout/step3
• shop.com/checkout/step4

Pour parvenir à ce résultat, il faut :

1. Modifier l’URL du pageview naturel (le premier envoyé)

2. Envoyer un pageview artificiel à chaque changement d’étape

Voici le code correspondant, qui utilise la fonction setPath et des pageview artificiels :

/* 1. Modifier l'URL du pageview naturel, avant de charger le tag principal */

window._uxa = window._uxa || [];
window._uxa.push(['setPath', 'checkout/step1']);

(function() {
   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);
})();

/* ... Événement "changement d'étape" ... */

/* 2. Envoyer un pageview artificiel à chaque changement d'étape */

window._uxa = window._uxa || [];
window._uxa.push(['trackPageview', 'checkout/step' + n]);

/* Répéter l'étape 2 autant que nécessaire */