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

Navigeer aan https://wknd.site/us/en.html

Open uw ontwikkelaarshulpmiddelen en ga het volgende bevel in de Console in:

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

Voer de opdracht adobeDataLayer.getState() nogmaals uit en zoek de vermelding 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 het object event en gebruikt de methode adobeDataLayer.getState om de huidige status op te halen van het object dat de gebeurtenis heeft geactiveerd. Vervolgens controleert de hulpmethode de filter en alleen als de huidige dataObject voldoet aan de filtercriteria die worden geretourneerd.

Daarna, ga een gebeurtenismanager in die wordt geroepen wanneer de component van het a Taser binnen a Carrousel wordt getoond.

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

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

Vervolgens drukt u een gebeurtenislistener op de gegevenslaag om naar de gebeurtenis cmp:show te luisteren.

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

De cmp:show gebeurtenis wordt teweeggebracht door vele verschillende componenten, als wanneer een nieuwe dia in Carousel wordt getoond, of wanneer een nieuw lusje in de 4} component van het Lusje {wordt geselecteerd.

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

Als u niet meer wilt luisteren naar de gebeurtenis cmp:show , verwijdert u de gebeurtenislistener 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);
    }
}

Het middeltype wknd/components/page wordt gebruikt om de gebeurtenis te filteren.

Vervolgens drukt u een gebeurtenislistener op de gegevenslaag om naar de gebeurtenis cmp:show te luisteren en pageShownHandler aan te roepen.

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 gebeurtenis cmp:show 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 vóór of kunt registreren nadat 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 voorbij en gebeurtenissen in de toekomst voorkwamen. Het is mogelijk gebeurtenissen uit het verleden of de toekomst te filteren. Meer informatie kan in de documentatieworden gevonden.