Intégration

Suivre les éléments cliqués avec Adobe Analytics

Utilisez la Couche de données client Adobe orientée sur les événements avec les composants principaux d’AEM pour effectuer le suivi des clics effectués sur des composants spécifiques sur un site Adobe Experience Manager. Découvrez comment utiliser des règles dans les propriétés de balise pour écouter les événements de clics, filtrer par composant et envoyer les données à une instance Adobe Analytics avec une balise de lien de suivi.

Ce que vous allez créer

L’équipe marketing de WKND souhaite savoir quels boutons Call to Action (CTA) sont les plus performants sur la page d’accueil. Dans ce tutoriel, une règle est ajoutée à la propriété de balise qui écoute les événements cmp:click des composants Teaser et Bouton. Envoyez ensuite l’identifiant du composant et un nouvel événement à Adobe Analytics, avec la balise de lien de suivi.

.

Objectifs

1. Créez une règle basée sur les événements dans la propriété de balise qui capture l’événement cmp:click.
2. Filtrez les différents événements par type de ressource de composant.
3. Définissez l’identifiant du composant et envoyez un événement à Adobe Analytics avec la balise de lien de suivi.

Conditions préalables

Avant de suivre ce tutoriel, qui est la suite de Collecter les données de page avec Adobe Analytics, assurez-vous d’avoir configuré les éléments suivants :

• Une propriété de balise avec l’extension Adobe Analytics activée.
• Un identifiant de la suite de rapports de test/développement Adobe Analytics et un serveur de suivi. Consultez la documentation suivante pour créer une suite de rapports.
• L’extension de navigateur Experience Platform Debugger configurée avec votre propriété de balise chargée sur le site WKND ou un site AEM avec la couche de données Adobe activée.

Examiner le schéma du bouton et du teaser

Avant de créer des règles dans la propriété de balise, consultez le schéma du bouton et du teaser et examinez-les dans l’implémentation de la couche de données.

1. Accédez à la page d’accueil WKND.

2. Ouvrez les outils de développement du navigateur et accédez à la console. Exécutez la commande suivante :

   adobeDataLayer.getState();
   

   Le code ci-dessus renvoie le statut en cours de la couche de données client Adobe.

   .

3. Développez la réponse et recherchez les entrées affectées du préfixe button- et l’entrée teaser-xyz-cta. Un schéma de données similaire à celui-ci doit s’afficher :

   Schéma de bouton :

   button-2e6d32893a:
       @type: "wknd/components/button"
       dc:title: "View All"
       parentId: "page-2eee4f8914"
       repo:modifyDate: "2020-07-11T22:17:55Z"
       xdm:linkURL: "/content/wknd/us/en/magazine.html"
   

   Schéma du teaser :

   teaser-da32481ec8-cta-adf3c09db9:
       @type: "wknd/components/teaser/cta"
       dc:title: "Surf's Up"
       parentId: "teaser-da32481ec8"
       xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"
   

   Les données ci-dessus sont basées sur le Schéma d’élément Composant/Conteneur. La nouvelle règle de balise utilise ce schéma.

Créer une règle CTA sur laquelle un utilisateur ou une utilisatrice a cliqué

La couche de données client Adobe est basée sur les événements. Lorsque l’on clique sur un composant de base, un événement cmp:click est distribué via la couche de données. Pour écouter l’événement cmp:click, créons une règle.

1. Accédez à Experience Platform et à la propriété de balise intégrée au site AEM.

2. Accédez à la section Règles dans l’interface utilisateur de la propriété de balise, puis cliquez sur Ajouter une règle.

3. Nommez la règle CTA Clicked (CTA cliqué).

4. Cliquez sur Événements > Ajouter pour ouvrir l’assistant Configuration d’événement.

5. Pour le champ Type d’événement, sélectionnez Code personnalisé.

   

6. Cliquez sur Ouvrir l’éditeur dans le panneau principal et saisissez l’extrait de code suivant :

   var componentClickedHandler = function(evt) {
      // defensive coding to avoid a null pointer exception
      if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
         //trigger Tag Rule and pass event
         console.debug("cmp:click event: " + evt.eventInfo.path);
         var event = {
            //include the path of the component that triggered the event
            path: evt.eventInfo.path,
            //get the state of the component that triggered the event
            component: window.adobeDataLayer.getState(evt.eventInfo.path)
         };
   
         //Trigger the Tag Rule, passing in the new `event` object
         // the `event` obj can now be referenced by the reserved name `event` by other Tag Property data elements
         // i.e `event.component['someKey']`
         trigger(event);
      }
   }
   
   //set the namespace to avoid a potential race condition
   window.adobeDataLayer = window.adobeDataLayer || [];
   //push the event listener for cmp:click into the data layer
   window.adobeDataLayer.push(function (dl) {
      //add event listener for `cmp:click` and callback to the `componentClickedHandler` function
      dl.addEventListener("cmp:click", componentClickedHandler);
   });
   

   L’extrait de code ci-dessus ajoute un écouteur d’événement en envoyant une fonction dans la couche de données. Lorsque l’événement cmp:click est déclenché, la fonction componentClickedHandler est appelée. Dans cette fonction, quelques contrôles d’intégrité sont ajoutés et un nouvel objet event est construit avec le dernier état de la couche de données pour le composant qui a déclenché l’événement.

   Enfin, la fonction trigger(event) est appelée. La fonction trigger() est un nom réservé dans la propriété de balise et elle déclenche la règle. L’objet event est transmis en tant que paramètre qui, à son tour, est exposé par un autre nom réservé dans la propriété de balise. Les éléments de données dans la propriété de balise peuvent désormais référencer diverses propriétés avec un extrait de code du type event.component['someKey'].

7. Enregistrez les modifications.

8. Ensuite, sous Actions, cliquez sur Ajouter pour ouvrir l’assistant Configuration de l’action.

9. Pour le champ Type d’action, choisissez Code personnalisé.

   

10. Cliquez sur Ouvrir l’éditeur dans le panneau principal et saisissez l’extrait de code suivant :

    console.debug("Component Clicked");
    console.debug("Component Path: " + event.path);
    console.debug("Component type: " + event.component['@type']);
    console.debug("Component text: " + event.component['dc:title']);
    

    L’objet event est transmis à partir de la méthode trigger() appelée dans l’événement personnalisé. L’objet component correspond à l’état actuel du composant dérivé de la méthode getState() de la couche de données et est l’élément qui a déclenché le clic.

11. Enregistrez les modifications et exécutez une création dans la propriété de balise pour promouvoir le code vers l’environnement utilisé sur votre site AEM.

    REMARQUE

    Il peut s’avérer utile d’utiliser Adobe Experience Platform Debugger pour changer le code incorporé dans un environnement de développement.

12. Accédez au site WKND et ouvrez les outils de développement pour afficher la console. Sélectionnez également la case à cocher Conserver le journal.

13. Cliquez sur l’un des boutons CTA Teaser ou Bouton pour accéder à une autre page.

    

14. Dans la Developer Console, on peut voir que la règle CTA Clicked (CTA cliqué) a été déclenchée :

    

Créer des éléments de données

Créez ensuite des éléments de données pour capturer l’identifiant de composant et le titre sur lequel l’utilisateur ou l’utilisatrice a cliqué. Rappelez-vous que dans l’exercice précédent, la sortie de event.path était comparable à component.button-b6562c963d et la valeur de event.component['dc:title'] ressemblait à « View Trips ».

ID de composant

1. Accédez à Experience Platform et à la propriété de balise intégrée au site AEM.

2. Accédez à la section Éléments de données et cliquez sur Ajouter un élément de données.

3. Dans le champ Nom, entrez l’identifiant du composant.

4. Dans le champ Type d’élément de données, sélectionnez Code personnalisé.

   

5. Cliquez sur le bouton Ouvrir l’éditeur et saisissez ce qui suit dans l’éditeur de code personnalisé :

   if(event && event.path && event.path.includes('.')) {
       // split on the `.` to return just the component ID
       return event.path.split('.')[1];
   }
   

6. Enregistrez les modifications.

   REMARQUE

   Rappelons que l’objet event devient disponible et est défini en fonction de l’événement qui a déclenché la Règle dans la propriété de balise. La valeur d’un élément de données n’est pas définie tant que l’élément de données n’est pas référencé dans une règle. Il est donc possible d’utiliser cet élément de données dans une règle telle que Chargement de page créée à l’étape précédente mais il ne serait pas judicieux de l’utiliser dans d’autres contextes.

Titre du composant

1. Accédez à la section Éléments de données et cliquez sur Ajouter un nouvel élément de données.

2. Dans le champ Nom, indiquez le Titre du composant.

3. Dans le champ Type d’élément de données, sélectionnez Code personnalisé.

4. Cliquez sur le bouton Ouvrir l’éditeur et saisissez le code suivant dans l’éditeur de code personnalisé :

   if(event && event.component && event.component.hasOwnProperty('dc:title')) {
       return event.component['dc:title'];
   }
   

5. Enregistrez les modifications.

Ajouter une condition à la règle CTA Clicked (CTA cliqué)

Mettez ensuite à jour la règle CTA Clicked (CTA cliqué) pour vous assurer que la règle ne se déclenche que si l’événement cmp:click se produit pour un Teaser ou un Bouton. Comme le bouton CTA Teaser est considéré comme un objet distinct dans la couche de données, il est important de vérifier le parent pour s’assurer qu’il provient d’un teaser.

1. Dans l’interface utilisateur de la propriété de balise, accédez à la règle CTA Clicked (CTA cliqué) créée précédemment.

2. Sous Conditions, cliquez sur Ajouter pour ouvrir l’assistant Configuration de condition.

3. Dans le champ Type de condition, sélectionnez Code personnalisé.

   .

4. Cliquez sur Ouvrir l’éditeur et saisissez le code suivant dans l’éditeur de code personnalisé :

   if(event && event.component && event.component.hasOwnProperty('@type')) {
       // console.log("Event Type: " + event.component['@type']);
       //Check for Button Type OR Teaser CTA type
       if(event.component['@type'] === 'wknd/components/button' ||
          event.component['@type'] === 'wknd/components/teaser/cta') {
           return true;
       }
   }
   
   // none of the conditions are met, return false
   return false;
   

   Le code ci-dessus vérifie d’abord si le type de ressource provient d’un Bouton ou si le type de ressource provient d’un appel à l’action (CTA) présent sur un Teaser.

5. Enregistrez les modifications.

Définir les variables Analytics et déclencher la balise de lien de suivi

Actuellement, la règle CTA Clicked (CTA cliqué) génère simplement une instruction console. Utilisez ensuite les éléments de données et l’extension Analytics pour définir les variables Analytics en tant qu’action. Définissons également une action supplémentaire pour déclencher la balise Lien de suivi et envoyer les données collectées à Adobe Analytics.

1. Dans la règle CTA Clicked (CTA cliqué), supprimez l’action Principal - Code personnalisé (les instructions console) :

   .

2. Sous Actions, cliquez sur Ajouter pour créer une action.

3. Définissez le type Extension sur Adobe Analytics et le Type d’action sur Définir des variables.

4. Définissez les valeurs suivantes pour les eVars, Props et Événements :

   • evar8 - %Component ID%
   • prop8 - %Component ID%
   • event8

   .

   REMARQUE

   %Component ID% est utilisé ici, car il garantit un identifiant unique pour le bouton CTA sur lequel l’utilisateur ou l’utilisatrice a cliqué. Un inconvénient potentiel de l’utilisation de %Component ID% est que le rapport Analytics contient des valeurs telles que button-2e6d32893a. En utilisant le %Component Title%, le nom sonnerait plus humain, mais la valeur risque de ne pas être unique.

5. Ajoutez ensuite une action supplémentaire à droite d’Adobe Analytics - Définir des variables en appuyant sur l’icône plus :

   .

6. Définissez le type Extension sur Adobe Analytics et le Type d’action sur Envoyer la balise.

7. Sous Suivi, définissez le bouton radio sur s.tl().

8. Dans le champ Type de lien, choisissez Lien personnalisé et dans Nom du lien, définissez la valeur sur %Component Title%: CTA Clicked :

   .

   La configuration ci-dessus combine la variable dynamique de l’élément de données Titre du composant et la chaîne statique CTA cliqué.

9. Enregistrez les modifications. La règle CTA cliqué doit maintenant avoir la configuration suivante :

   .

   • 1. Écoutez l’événement cmp:click.
   • 2. Vérifiez que l’événement a été déclenché par un Bouton ou un Teaser.
   • 3. Définissez les variables Analytics pour suivre l’Identifiant du composant en tant qu’eVar, prop et événement.
   • 4. Envoyez la balise de lien de suivi Analytics (et ne la considérez pas comme une page vue).

10. Enregistrez toutes les modifications et créez votre bibliothèque de balises, en effectuant la promotion vers l’environnement approprié.

Valider la balise du lien de suivi et l’appel d’Analytics

Maintenant que la règle CTA cliqué envoie la balise Analytics. Vous devriez pouvoir voir les variables de suivi d’Analytics à l’aide du Debugger Experience Platform.

1. Ouvrez le Site WKND dans votre navigateur.

2. Cliquez sur l’ pour ouvrir le Debugger Experience Platform.

3. Assurez-vous que le Debugger mappe la propriété de balise pour votre environnement de développement, comme décrit précédemment et que l’option Journalisation de la console est activée.

4. Ouvrez le menu Analytics et vérifiez que la suite de rapports est définie sur votre suite de rapports.

   

5. Dans le navigateur, cliquez sur l’un des boutons CTA Teaser ou Bouton pour accéder à une autre page.

   

6. Revenez au Debugger Experience Platform, faites défiler l’écran vers le bas et développez Requêtes réseau > Votre suite de rapports. Vous devriez être en mesure de trouver les ensembles eVar, prop et event.

   

7. Revenez au navigateur et ouvrez la Developer Console. Accédez au pied de page du site et cliquez sur l’un des liens de navigation :

   

8. Lisez le message dans la console du navigateur « Code personnalisé » pour la règle « CTA cliqué » n’a pas été respecté.

   Le message ci-dessus est dû au fait que le composant Navigation déclenche un cmp:clickévénement , mais en raison de la Condition à la règle qui vérifie le type de ressource, aucune action n’est effectuée.

   REMARQUE

   Si vous ne voyez aucun journal dans la console, assurez-vous que l’option Journalisation de la console est activée sous Balises Experience Platform dans le Debugger Experience Platform.

Félicitations.

Vous venez d’utiliser la couche de données client et la balise Adobe pilotée par l’événement dans Experience Platform pour effectuer le suivi des clics sur des composants spécifiques d’un site AEM.