Utilisation de la couche de données du client Adobe avec les composants principaux de AEM

La couche de données du client Adobe introduit une méthode standard pour collecter et stocker des données sur une expérience visiteuse sur une page Web, puis faciliter l'accès à ces données. La couche de données client Adobe est indépendante de la plate-forme, mais elle est entièrement intégrée aux composants principaux pour l’utilisation avec AEM.

REMARQUE

Souhaitez-vous activer la couche de données du client Adobe sur votre site AEM ? Voir les instructions ici.

Explorer la couche de données

Vous pouvez vous faire une idée de la fonctionnalité intégrée de la couche de données du client Adobe en utilisant les outils de développement de votre navigateur et le site de référence WKND en direct.

REMARQUE

Captures d’écran ci-dessous extraites du navigateur Chrome.

  1. Accédez à https://wknd.site

  2. Ouvrez vos outils de développement et saisissez la commande suivante dans la console :

    window.adobeDataLayer.getState();
    

    Inspect la réponse pour afficher l’état actuel de la couche de données sur un site AEM. Vous devriez voir des informations sur la page et les composants individuels.

    Réponse de la couche de données d'Adobe

  3. Poussez un objet de données vers la couche de données en saisissant les éléments suivants dans la console :

    window.adobeDataLayer.push({
        "component": {
            "training-data": {
                "title": "Learn More",
                "link": "learn-more.html"
            }
        }
    });
    
  4. Exécutez à nouveau la commande adobeDataLayer.getState() et recherchez l'entrée training-data.

  5. Ajoutez ensuite un paramètre de chemin pour renvoyer uniquement l’état spécifique d’un composant :

    window.adobeDataLayer.getState('component.training-data');
    

    Ne retourner qu'une seule entrée de données de composant

Utilisation de Événements

Il est recommandé de déclencher tout code personnalisé basé sur un événement de la couche de données. Ensuite, explorez l’enregistrement et l’écoute de différents événements.

  1. Saisissez la méthode d’assistance suivante dans votre console :

    function getDataObjectHelper(event, filter) {
        if (event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
            var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
            if (dataObject != null) {
                for (var property in filter) {
                    if (!dataObject.hasOwnProperty(property) || (filter[property] !== null && filter[property] !== dataObject[property])) {
                        return;
                    }
                    return dataObject;
                }
            }
        }
        return;
    }
    

    Le code ci-dessus inspectera l'objet event et utilisera la méthode adobeDataLayer.getState pour obtenir l'état actuel de l'objet qui a déclenché le événement. La méthode d'assistance examine ensuite les critères filter et elle est renvoyée uniquement si l'élément dataObject actuel satisfait au filtre.

    ATTENTION

    Il sera important de ne pas actualiser le navigateur tout au long de cet exercice, sinon le code JavaScript de la console sera perdu.

  2. Ensuite, entrez un gestionnaire de événement qui sera appelé lorsqu'un composant Teaser s'affiche dans un Carousel.

    function teaserShownHandler(event) {
        var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/teaser"});
        if(dataObject != null) {
            console.log("Teaser Shown: " + dataObject['dc:title']);
            console.log(dataObject);
        }
    }
    

    teaserShownHandler appelle la méthode getDataObjectHelper et transmet un filtre wknd/components/teaser comme @type pour filtrer les événements déclenchés par d'autres composants.

  3. Ensuite, poussez un écouteur de événement sur la couche de données pour écouter le événement cmp:show.

    window.adobeDataLayer.push(function (dl) {
         dl.addEventListener("cmp:show", teaserShownHandler);
    });
    

    Le événement cmp:show est déclenché par de nombreux composants différents, comme lorsqu'une nouvelle diapositive est affichée dans le Carrousel ou lorsqu'un nouvel onglet est sélectionné dans le composant Tabulation.

  4. Sur la page, basculez les diapositives du carrousel et observez les instructions de la console :

    Basculer vers le carrousel et afficher l’écouteur de événement

  5. Supprimez l’écouteur de événement de la couche de données pour arrêter d’écouter le événement cmp:show :

    window.adobeDataLayer = window.adobeDataLayer || [];
    window.adobeDataLayer.push(function(dl) {
        dl.removeEventListener("cmp:show", teaserShownHandler);
    });
    
  6. Revenez à la page et faites basculer les diapositives du carrousel. Observez que plus aucune déclaration n'est consignée et que le événement n'est pas écouté.

  7. Ensuite, saisissez un gestionnaire de événements qui sera appelé lorsque le événement de la page affichée est déclenché :

    function pageShownHandler(event) {
        var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/page"});
        if(dataObject != null) {
            console.log("Page Shown: " + dataObject['dc:title']);
            console.log(dataObject);
        }
    }
    

    Notez que le type de ressource wknd/components/page est utilisé pour filtrer le événement.

  8. Ensuite, poussez un écouteur de événement sur la couche de données pour écouter le événement cmp:show, en appelant pageShownHandler.

    window.adobeDataLayer = window.adobeDataLayer || [];
    window.adobeDataLayer.push(function (dl) {
         dl.addEventListener("cmp:show", pageShownHandler);
    });
    
  9. Une instruction de console doit immédiatement s'afficher déclenchée avec les données de page :

    Données d’affichage de page

    Le événement cmp:show de la page est déclenché à chaque chargement de page tout en haut de la page. Vous pouvez demander pourquoi le gestionnaire de événements a-t-il été déclenché alors que la page a clairement déjà été chargée ?

    Il s'agit de l'une des caractéristiques uniques de la couche de données du client Adobe, en ce sens que vous pouvez enregistrer les écouteurs de événement avant ou après l'initialisation de la couche de données. Il s'agit là d'une fonction essentielle pour éviter les conditions de concurrence.

    La couche de données conserve un tableau de files d'attente de tous les événements qui se sont produits dans l'ordre. Par défaut, la couche de données déclenche des rappels de événement pour les événements qui se sont produits dans passé ainsi que pour les événements dans futur. Il est possible de filtrer les événements au-delà ou à l'avenir. Vous trouverez plus d'informations dans la documentation.

Étapes suivantes

Consultez le didacticiel suivant pour savoir comment utiliser la couche de données client Adobe pilotée par le événement pour collecter des données de page et les envoyer à Adobe Analytics.

Ou apprendre à personnaliser la couche de données du client Adobe avec les composants AEM

Ressources supplémentaires

Sur cette page