Utiliser la couche de données client Adobe avec les composants principaux d’AEM overview

Accédez à https://wknd.site/us/en.html.

Ouvrez vos outils de développement et saisissez la commande suivante dans la Console  :

window.adobeDataLayer.getState();

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

Envoyez un objet de données à 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"
        }
    }
});

Exécutez la commande adobeDataLayer.getState() de nouveau et recherchez l’entrée pour training-data.

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

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

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 inspecte l’objet event et utilise la méthode adobeDataLayer.getState pour obtenir l’état actuel de l’objet qui a déclenché l’événement. Ensuite, la méthode d’assistance examine le filter qui n’est renvoyé que si le dataObject actif répond aux critères de filtre.

Saisissez ensuite un gestionnaire d’événements qui est appelé lorsqu’un composant Teaser est affiché dans un Carrousel.

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

La fonction teaserShownHandler appelle la fonction getDataObjectHelper et transmet un filtre de wknd/components/carousel/item en tant que @type pour filtrer les événements déclenchés par d’autres composants.

Ensuite, placez un écouteur d’événement sur la couche de données pour écouter l’événement cmp:show.

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

L’événement cmp:show est déclenché par de nombreux composants, par exemple lorsqu’une nouvelle diapositive est affichée dans le Carrousel ou lorsqu’un nouvel onglet est sélectionné dans le composant Onglet.

Sur la page, faites basculer les diapositives du carrousel et observez les instructions de la console :

Pour arrêter d’écouter l’événement cmp:show, supprimez l’écouteur d’événement de la couche de données.

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function(dl) {
    dl.removeEventListener("cmp:show", teaserShownHandler);
});

Revenez à la page et faites basculer les diapositives du carrousel. Notez qu’aucune autre instruction n’est consignée et que l’événement n’est pas écouté.

Créez ensuite un gestionnaire d’événements appelé lorsque l’événement de 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 l’événement.

Ensuite, placez un écouteur d’événement sur la couche de données pour écouter l’événement cmp:show, ce qui appelle le pageShownHandler.

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:show", pageShownHandler);
});

Une instruction de console doit immédiatement être déclenchée avec les données de page :

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

L’une des fonctionnalités uniques de la couche de données client Adobe est que vous pouvez enregistrer des écouteurs d’événement avant ou après que la couche de données a été initialisée, ce qui permet d’éviter les conditions de concurrence.

La couche de données conserve un tableau de file d’attente de tous les événements qui se sont produits en séquence. Par défaut, la couche de données déclenche des rappels d’événements pour les événements qui se sont produits dans le passé, ainsi que pour ceux qui se produiront à l’avenir. Il est possible de filtrer les événements du passé ou du futur. Vous trouverez plus d’informations à ce sujet dans la documentation.