Het gebruiken van de Laag van de Gegevens van de Cliënt van de Adobe met AEM Componenten van de Kern overview

Navigeren naar https://wknd.site/us/en.html

Open de ontwikkelaarsgereedschappen en voer de volgende opdracht in het dialoogvenster Console:

window.adobeDataLayer.getState();

Om de huidige staat van de gegevenslaag op een AEM plaats te zien inspecteer de reactie. U moet informatie over de pagina en de afzonderlijke componenten bekijken.

Duw een gegevensvoorwerp op de gegevenslaag door het volgende in de console in te gaan:

window.adobeDataLayer.push({
    "component": {
        "training-data": {
            "title": "Learn More",
            "link": "learn-more.html"
        }
    }
});

De opdracht uitvoeren adobeDataLayer.getState() en zoek de informatie voor training-data.

Voeg vervolgens een padparameter toe om alleen de specifieke status van een component te retourneren:

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

Ga de volgende helpermethode in uw console in:

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

De bovenstaande code inspecteert de event object en gebruikt het adobeDataLayer.getState methode om de huidige status op te halen van het object dat de gebeurtenis heeft geactiveerd. Vervolgens wordt met de hulplijnmethode de filter en alleen als de huidige dataObject voldoet aan de filtercriteria die worden geretourneerd.

Voer vervolgens een gebeurtenishandler in die wordt aangeroepen wanneer een Teaser component wordt weergegeven binnen een 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);
    }
}

De teaserShownHandler functie roept de functie getDataObjectHelper en geeft een filter door van wknd/components/teaser als de @type om gebeurtenissen uit te filteren die door andere componenten worden teweeggebracht.

Duw vervolgens een gebeurtenislistener op de gegevenslaag om te luisteren naar de cmp:show gebeurtenis.

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

De cmp:show De gebeurtenis wordt geactiveerd door veel verschillende componenten, zoals wanneer een nieuwe dia wordt weergegeven in het dialoogvenster Carousel of wanneer een nieuw tabblad wordt geselecteerd in het dialoogvenster Tab component.

Schakel op de pagina de carrouseldia's in en bekijk de consoleinstructies:

Als u niet meer wilt luisteren naar de cmp:show gebeurtenis, de gebeurtenislistener verwijderen uit de gegevenslaag

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

Ga terug naar de pagina en schakel de carrouseldia's in of uit. Merk op dat er niet meer instructies worden geregistreerd en dat er niet naar de gebeurtenis wordt geluisterd.

Maak vervolgens een gebeurtenishandler die wordt aangeroepen wanneer de gebeurtenis page displayed wordt geactiveerd:

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

Bericht dat het middeltype wknd/components/page wordt gebruikt om de gebeurtenis te filteren.

Duw vervolgens een gebeurtenislistener op de gegevenslaag om te luisteren naar de cmp:show gebeurtenis, de pageShownHandler.

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

U zou onmiddellijk een consoleverklaring moeten zien die met de paginagegevens in brand wordt gestoken:

De cmp:show gebeurtenis voor de pagina wordt geactiveerd bij elke pagina die boven aan de pagina wordt geladen. U zou kunnen vragen, waarom werd de gebeurtenismanager teweeggebracht, wanneer de pagina duidelijk reeds is geladen.

Één van de unieke eigenschappen van de Laag van de Gegevens van de Cliënt van de Adobe is u gebeurtenisluisteraars kunt registreren voor of na Als de Laag van Gegevens is geïnitialiseerd, helpt het om de rasvoorwaarden te vermijden.

De gegevenslaag handhaaft een rijserie van alle gebeurtenissen die in opeenvolging zijn voorgekomen. De Laag van Gegevens door gebrek zal gebeurteniscallbacks voor gebeurtenissen teweegbrengen die in verleden en gebeurtenissen in het toekomst. Het is mogelijk gebeurtenissen uit het verleden of de toekomst te filteren. Meer informatie vindt u in de documentatie.