Les pageviews artificielles

Les pageviews artificielles (APV) suivent une étape que le visiteur perçoit comme une vue distincte, mais qui ne modifie pas l'URL, comme l'ouverture d'une modale, d'une popin ou d'un overlay.

Utilisez les pageviews artificielles dans les cas suivants :

Pour envoyer des pageviews artificielles, suivez les instructions correspondant à votre gestionnaire de balises ou à votre configuration ci-dessous.

Utilisez le Contentsquare Tag Configurator ↗ pour implémenter des pageviews artificielles via une interface visuelle.

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 et saisissez la valeur sous Artificial Pageview value.
   • Si votre site comporte une fenêtre modale (parfois appelée "popup") et que vous devez déployer les pageviews artificielles, sélectionnez This is for the opening a popup ou This is for the closing of a popup dans la liste déroulante.

   

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 = window._uxa || [];
     window._uxa.push([
       "setQuery",
       window.location.search + (window.location.search ? "&" : "?") + "cs-popin-dedicated_query_string", { lifespan: 'onNextPageviewOnly' }
     ]);
     window._uxa.push([
       "trackPageview",
       window.location.pathname + window.location.hash.replace("#", "?__"), { lifespan: 'onNextPageviewOnly' }
     ]);
   </script>

   

4. Cliquez sur "Choisissez un déclencheur pour que cette balise se déclenche ...".

5. Créez 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 CSS valide 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

   

Attribuez l'événement que vous avez peut-être déjà mis en place à un extrait HTML personnalisé et écrivez l'extrait à envoyer dans le champ HTML. Cela devrait ressembler à ceci :

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

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 pageview artificiel à partir de l'extension Contentsquare.

Selon le pageview à suivre, vous pouvez soit spécifier la requête à transmettre aux serveurs Contentsquare :

Soit laisser le champ de saisie vide, ce qui permet à notre script de capturer automatiquement l'URL actuelle :

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. Allez à 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 avec Contentsquare, le code à déployer doit suivre ces instructions :

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

(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 " > " 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 où vous souhaitez déclencher un pageview artificiel, d'après votre logique JavaScript. Vous pouvez le placer dans le fichier principal theme.liquid ou dans 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 de votre propre condition, fonction callback ou event listener.

3. Dans l'extrait ci-dessous, remplacez <PATH_TO_SEND> par votre chemin unique.

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

   Vous pouvez hardcoder une valeur statique pour le path, comme 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érez ce code après le bloc 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("#", "?__"),
           { lifespan: "onNextPageviewOnly" }
         ]);
         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 }}, { lifespan: "onNextPageviewOnly" }]);
         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, utilisez 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 modale qui apparaît lors de l'ajout d'un article au panier :

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

Pour tracker l'ouverture et la fermeture d'une modale (ou "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 modale – l'URL envoyée sera celle courante complétée par une chaîne de caractères permettant d'identifier la modale.

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

2. Un second pageview artificiel doit être envoyé à la fermeture de la modale, par exemple au clic sur le bouton de fermeture ou lors d'un événement JavaScript personnalisé déclenché quand la modale est rejetée. L'URL envoyée sera l'URL courante.

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