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

Accédez à la page d’accueil WKND.

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.

.

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.

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

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

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

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

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

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'].

Enregistrez les modifications.

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

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

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.

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.

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.

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

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

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

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

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

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

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];
}

Enregistrez les modifications.

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

Dans le champ Nom, indiquez le Titre du composant.

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

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'];
}

Enregistrez les modifications.

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

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

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

.

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.

Enregistrez les modifications.

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

.

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

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

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

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

.

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

.

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

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

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

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

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

Ouvrez le Site WKND dans votre navigateur.

Cliquez sur l’ pour ouvrir le Debugger Experience Platform.

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.

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 CTA Teaser ou Bouton pour accéder à une autre page.

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.

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 :

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.