Använda Adobe-klientdatalagret med AEM kärnkomponenter overview

Navigera till https://wknd.site/us/en.html

Öppna dina utvecklarverktyg och ange följande kommando i konsolen:

window.adobeDataLayer.getState();

Om du vill se det aktuella läget för datalagret på en AEM plats kontrollerar du svaret. Du bör se information om sidan och enskilda komponenter.

Skicka ett dataobjekt till datalagret genom att ange följande i konsolen:

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

Kör kommandot adobeDataLayer.getState() igen och hitta posten för training-data.

Lägg sedan till en path-parameter som returnerar bara ett specifikt läge för en komponent:

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

Ange följande hjälpmetod i konsolen:

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

Ovanstående kod inspekterar objektet event och använder metoden adobeDataLayer.getState för att hämta det aktuella läget för objektet som utlöste händelsen. Hjälpmetoden undersöker sedan filter och bara om den aktuella dataObject uppfyller filtervillkoren som returneras.

Ange sedan en händelsehanterare som anropas när en Teaser -komponent visas i en Carousel .

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

Funktionen teaserShownHandler anropar funktionen getDataObjectHelper och skickar ett filter av wknd/components/carousel/item som @type för att filtrera bort händelser som utlösts av andra komponenter.

Därefter skickar du en händelseavlyssnare till datalagret för att avlyssna händelsen cmp:show.

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

Händelsen cmp:show aktiveras av många olika komponenter, som när en ny bildruta visas i Carousel eller när en ny flik väljs i komponenten Tab.

På sidan växlar du på karusellbildrutorna och följer konsolsatserna:

Om du vill sluta lyssna efter händelsen cmp:show tar du bort händelseavlyssnaren från datalagret

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

Gå tillbaka till sidan och växla karusellbilderna. Observera att inga fler programsatser loggas och att ingen lyssnar på händelsen.

Skapa sedan en händelsehanterare som anropas när händelsen som visas på sidan utlöses:

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

Observera att resurstypen wknd/components/page används för att filtrera händelsen.

Därefter skickar du en händelseavlyssnare till datalagret för att avlyssna händelsen cmp:show och anropar pageShownHandler.

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

Du bör omedelbart se en konsolprogramsats som utlösts med siddata:

cmp:show-händelsen för sidan aktiveras för varje sida som läses in överst på sidan. Du kan fråga varför händelsehanteraren utlöstes när sidan redan har lästs in?

En av de unika funktionerna i Adobe Client Data Layer är att du kan registrera händelseavlyssnare före eller efter att datalagret har initierats, vilket hjälper till att undvika konkurrensvillkoren.

Datalagret underhåller en kömatris med alla händelser som har inträffat i sekvens. Datalagret kommer som standard att utlösa händelseåteranrop för händelser som har inträffat i förbi och händelser i future. Det går att filtrera händelser från tidigare eller framtida händelser. Mer information finns i dokumentationen.