Suivi du composant cliqué avec Adobe Analytics

Utilisez la couche de données client Adobe pilotée par le événement avec les composants principaux AEM pour effectuer le suivi des clics de composants spécifiques sur un site Adobe Experience Manager. Découvrez comment utiliser des règles dans Experience Platform Launch 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 identifier les boutons d'appel à l'action (CTA) qui génèrent les meilleurs résultats sur la page d'accueil. Dans ce tutoriel, nous allons ajouter une nouvelle règle dans l'Experience Platform Launch qui écoute les événements cmp:click de Teaser et Button composants et envoie l'identifiant du composant et un nouveau événement à Adobe Analytics avec la balise de lien de suivi.

Eléments de suivi des clics

Objectifs

Créez une règle pilotée par événement dans Launch en fonction du événement cmp:click.
Filtrez les différents événements par type de ressource de composant.
Définissez l’identifiant du composant sur lequel l’utilisateur a cliqué et envoyez l’événement Adobe Analytics avec la balise de lien de suivi.

Conditions préalables

Ce didacticiel est la suite de Collecte de données de page avec Adobe Analytics et suppose que vous disposez des éléments suivants :

Une propriété de lancement avec l'extension Adobe Analytics activée
Adobe Analytics/dev report suite ID et serveur de suivi. Consultez la documentation suivante pour créer une nouvelle suite de rapports.
Extension de navigateur Experience Platform Debuggerbrowser configurée avec votre propriété Launch chargée sur https://wknd.site/us/en. htmlun site AEM avec la couche de données d'Adobe activée.

Inspect the Button and Teaser Schéma

Avant de créer des règles dans Lancement, il est utile de vérifier le schéma du bouton et du teaser et de les inspecter dans l’implémentation de la couche de données.

Accédez à https://wknd.site/us/en.html
Ouvrez les outils de développement du navigateur et accédez à la Console. Exécutez la commande suivante :
```
adobeDataLayer.getState();
```
Cette opération renvoie l'état actuel de la couche de données du client Adobe.

Développez la réponse et recherchez les entrées précédées de l’entrée button- et teaser-xyz-cta. Un schéma de données doit s’afficher comme suit :

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"

Elles sont basées sur le Schéma Composant/Élément de Conteneur. La règle que nous allons créer dans Lancement utilisera ce schéma.

Créer une règle de clic CTA

La couche de données client de l'Adobe est une couche de données pilotée événement. Lorsque l'utilisateur clique sur un composant principal, un événement cmp:click est distribué via la couche de données. Créez ensuite une règle pour écouter le événement cmp:click.

Accédez à l'Experience Platform Launch et à la propriété Web intégrée au site AEM.
Accédez à la section Règles de l’interface utilisateur de lancement, puis cliquez sur Ajouter la règle.
Attribuez un nom à la règle CTA cliqué.
Cliquez sur Événements > Ajouter pour ouvrir l'Assistant Configuration de Événement.
Sous Type d'événement sélectionnez Code personnalisé.

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

var componentClickedHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger Launch 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 Launch Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Launch 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);
});

Le fragment de code ci-dessus ajoute un écouteur de événement en poussant une fonction dans la couche de données. Lorsque le événement cmp:click est déclenché, la fonction componentClickedHandler est appelée. Dans cette fonction, quelques vérifications d'intégrité sont ajoutées et un nouvel objet event est construit avec l'état le plus récent de la couche de données pour le composant qui a déclenché le événement.

Ensuite, trigger(event) est appelé. trigger() est un nom réservé dans Lancement et déclenche la règle de lancement. Nous transmettons l’objet event en tant que paramètre qui sera à son tour exposé par un autre nom réservé dans Lancement nommé event. Les éléments de données du lancement peuvent désormais référencer diverses propriétés telles que : event.component['someKey'].

Enregistrez les modifications.
Ensuite, sous Actions, cliquez sur Ajouter pour ouvrir l'Assistant Configuration de l'action.
Sous Type d'action, choisissez Code personnalisé.
Cliquez sur Ouvrir l’éditeur dans le panneau principal et saisissez le fragment 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 le événement personnalisé. component est l’état actuel du composant dérivé de la couche de données getState qui a déclenché le clic.
Enregistrez les modifications et exécutez une build dans Lancement pour promouvoir le code dans l'environnement utilisé sur votre site AEM.

REMARQUE

Il peut s’avérer très utile d’utiliser le débogueur de Adobe Experience Platform pour passer le code incorporé à un environnement Développement.
Accédez au site WKND et ouvrez les outils de développement pour vue à la console. Sélectionnez Conserver le journal.
Cliquez sur l'un des boutons Teaser ou Bouton CTA pour accéder à une autre page.
Observez dans la console du développeur que la règle CTA cliquée a été déclenchée :

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

Créez ensuite un élément de données pour capturer l’ID et le titre du composant sur lequel l’utilisateur a cliqué. Rappelez-vous dans l’exercice précédent que la sortie de event.path était semblable à component.button-b6562c963d et que la valeur de event.component['dc:title'] ressemblait à “Vues Trips”.

ID de composant

Accédez à l'Experience Platform Launch et à la propriété Web intégrée au site AEM.
Accédez à la section Éléments de données et cliquez sur Ajouter un nouvel élément de données.
Pour Nom, saisissez ID de composant.
Pour Type d’élément de données, sélectionnez Code personnalisé.
Cliquez sur 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];
}
```
Enregistrez les modifications.

REMARQUE

Rappelez-vous que l’objet event est rendu disponible et que sa portée est définie en fonction du événement qui a déclenché la règle dans le lancement. 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. Par conséquent, il est sans risque d’utiliser cet élément de données dans une règle telle que la règle CTA cliqué créée dans l’exercice précédent mais ne serait pas utilisable en toute sécurité dans d’autres contextes.

Libellé du composant

Accédez à la section Éléments de données et cliquez sur Ajouter un nouvel élément de données.
Pour Nom, saisissez Titre du composant.
Pour Type d’élément de données, sélectionnez Code personnalisé.
Cliquez sur Ouvrir l’éditeur et saisissez ce qui suit dans l’éditeur de code personnalisé :
```
if(event && event.component && event.component.hasOwnProperty('dc:title')) {
    return event.component['dc:title'];
}
```
Enregistrez les modifications.

Ajouter une condition à la règle de clic CTA

Ensuite, mettez à jour la règle CTA cliqué pour vous assurer que la règle se déclenche uniquement lorsque le événement cmp:click est déclenché pour un Teaser ou un bouton. Comme le CTA du Teaser est considéré comme un objet distinct dans la couche de données, il est important de vérifier le parent pour vérifier qu'il provient d'un Teaser.

Dans l’interface utilisateur de lancement, accédez à la règle CTA cliquée créée précédemment.
Sous Conditions, cliquez sur Ajouter pour ouvrir l'Assistant Configuration de condition.
Pour Type de condition, sélectionnez Code personnalisé.

Cliquez sur Ouvrir l’éditeur et saisissez ce qui suit 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, puis s'il provient d'une DEC dans un Teaser.

Enregistrez les modifications.

Définition des variables Analytics et déclenchement de la balise de lien de suivi

Actuellement, la règle CTA cliqué génère simplement une instruction console. Ensuite, utilisez les éléments de données et l’extension Analytics pour définir les variables Analytics sous la forme action. Nous définirons également une action supplémentaire pour déclencher le lien de suivi et envoyer les données collectées à Adobe Analytics.

Dans la règle CTA cliqué remove l'action Core - Custom Code (instructions de la console) :
Sous Actions, cliquez sur Ajouter pour ajouter une nouvelle action.
Définissez le type Extension sur Adobe Analytics et définissez Type d'action sur Définir des variables.
Définissez les valeurs suivantes pour eVars, Props et Événements :
- evar8 - %Component ID%
- prop8 - %Component ID%
- event8
REMARQUE

Ici, %Component ID% est utilisé, car il garantit un identifiant unique pour la LTC sur laquelle l'utilisateur a cliqué. L’utilisation de %Component ID% présente un inconvénient potentiel : le rapport Analytics contient des valeurs du type button-2e6d32893a. L'utilisation de %Component Title% donnerait un nom plus convivial à l'homme, mais la valeur peut ne pas être unique.
Ensuite, ajoutez une action supplémentaire à droite de Adobe Analytics - Set Variables en appuyant sur l'icône plus :
Définissez le type Extension sur Adobe Analytics et définissez Type d'action sur Envoyer la balise.
Sous Suivi, définissez le bouton radio sur s.tl().
Pour Type de lien choisissez Lien personnalisé et pour Nom de lien définissez la valeur sur : %Component Title%: CTA Clicked :

Cette opération combine la variable dynamique de l’élément de données Component Title et la chaîne statique CTA Click.
Enregistrez les modifications. La règle CTA cliqué doit maintenant avoir la configuration suivante :
- 1. Écoute le cmp:click événement.
- 2. Vérifiez que le événement a été déclenché par un Teaser Buttonor.
- 3. Définissez les variables Analytics pour effectuer le suivi de l’ ID de composant en tant qu’ eVar, prop et un événement.
- 4. Envoyez la balise de lien de suivi Analytics (et ne la traitez pas comme une vue de page).
Enregistrez toutes les modifications et générez votre bibliothèque de lancement en faisant la promotion vers l’Environnement approprié.

Validation de la balise de lien de suivi et de l’appel Analytics

Maintenant que la règle CTA cliqué envoie la balise Analytics, vous devriez être en mesure d’afficher les variables de suivi Analytics à l’aide du débogueur Experience Platform.

Ouvrez le site WKND dans votre navigateur.
Cliquez sur l’icône Débogueur pour ouvrir le Débogueur Experience Platform.
Assurez-vous que le débogueur mappe la propriété Launch sur votre environnement de développement, comme décrit précédemment et que la journalisation de la console est cochée.
Ouvrez le menu Analytics et vérifiez que la suite de rapports est définie sur votre suite de rapports.
Dans le navigateur, cliquez sur l'un des boutons Teaser ou Bouton CTA pour accéder à une autre page.
Revenez au débogueur Experience Platform, faites défiler la page vers le bas et développez Demandes réseau > Votre suite de rapports. Vous devriez être en mesure de trouver le jeu eVar, prop et événement.
Revenez au navigateur et ouvrez la console de développement. Accédez au pied de page du site et cliquez sur l’un des liens de navigation :
Observez dans la console du navigateur que le message "Code personnalisé" pour la règle "CTA cliqué" n'a pas été satisfait.

Cela est dû au fait que le composant Navigation déclenche un événement cmp:click mais en raison de notre vérification de la valeur par rapport au type de ressource, aucune action n'est entreprise.

REMARQUE

Si vous ne voyez aucun journal de console, vérifiez que Consignation de la console est cochée sous Lancement dans le débogueur Experience Platform.

Félicitations !

Vous venez d'utiliser la couche de données client Adobe et l'Experience Platform Launch orientés événement pour effectuer le suivi des clics de composants spécifiques sur un site Adobe Experience Manager.