Använda Adobe-klientdatalagret med kärnkomponenterna data-layer-core-components
Målet med Adobe Client Data Layer är att minska ansträngningarna att instrumentera webbplatser genom att tillhandahålla en standardiserad metod för att exponera och få tillgång till alla typer av data för alla typer av skript.
Adobe Client Data Layer är plattformsoberoende, men är helt integrerad i de centrala komponenterna för användning med AEM.
Precis som Core-komponenterna är koden för Adobe-klientdatalagret tillgänglig på GitHub tillsammans med utvecklardokumentationen. Det här dokumentet ger en översikt över hur kärnkomponenterna interagerar med datalagret, men fullständig teknisk information finns i GitHub-dokumentationen.
DATA_LAYER_INTEGRATION.md
i Core Components-databasen.Installation och aktivering installation-activation
Från och med Core Components version 2.9.0 distribueras datalagret med Core Components som ett AEM klientbibliotek och ingen installation behövs. Alla projekt som genereras av AEM Project Archetype v. 24+ innehåller som standard ett aktiverat datalager.
Om du vill aktivera datalagret manuellt måste du skapa en kontextmedveten konfiguration för den:
-
Skapa följande struktur under mappen
/conf/<mySite>
, där<mySite>
är namnet på webbplatsens projekt:/conf/<mySite>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig
- Där varje nod har en
jcr:primaryType
inställd pånt:unstructured
.
-
Lägg till en boolesk egenskap med namnet
enabled
och ställ in den påtrue
.Plats för DataLayerConfig i WKND-referensplats
-
Lägg till en
sling:configRef
-egenskap tilljcr:content
-noden för din webbplats under/content
(t.ex./content/<mySite>/jcr:content
) och ställ in den på/conf/<mySite>
från föregående steg. -
När den är aktiverad kan du verifiera aktiveringen genom att läsa in en sida utanför redigeraren, till exempel med alternativet Visa som publicerad i redigeraren. Inspect sidkällan och taggen
<body>
ska innehålla attributetdata-cmp-data-layer-enabled
code language-html <body class="page basicpage" id="page-id" data-cmp-data-layer-enabled> <script> window.adobeDataLayer = window.adobeDataLayer || []; adobeDataLayer.push({ page: JSON.parse("{\x22page\u002D6c5d4b9fdd\x22:{\x22xdm:language\x22:\x22en\x22,\x22repo:path\x22:\x22\/content\/wknd\/language\u002Dmasters\/en.html\x22,\x22xdm:tags\x22:[],\x22xdm:template\x22:\x22\/conf\/wknd\/settings\/wcm\/templates\/landing\u002Dpage\u002Dtemplate\x22,\x22@type\x22:\x22wknd\/components\/page\x22,\x22dc:description\x22:\x22WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.\x22,\x22dc:title\x22:\x22WKND Adventures and Travel\x22,\x22repo:modifyDate\x22:\x222020\u002D09\u002D29T07:50:13Z\x22}}"), event:'cmp:show', eventInfo: { path: 'page.page\u002D6c5d4b9fdd' } }); </script>
-
Du kan också öppna utvecklarverktygen i webbläsaren och i konsolen ska JavaScript-objektet
adobeDataLayer
vara tillgängligt. Ange följande kommando för att hämta den aktuella sidans datalagerstatus:code language-javascript window.adobeDataLayer.getState();
Komponenter som stöds supported-components
Följande komponenter har stöd för datalagret.
Se även de händelser som utlöses av komponenterna.
Datascheman för kärnkomponenter data-schemas
Här följer en lista med scheman som kärnkomponenterna använder med datalagret.
Komponent-/behållarobjektschema item
Schemat för komponent-/behållarobjekt används i följande komponenter:
Schemat för komponent-/behållarobjektet definieras enligt följande.
id: { // component ID
@type // resource type
repo:modifyDate // last modified date
dc:title // title
dc:description // description
xdm:text // text
xdm:linkURL // link URL
parentId // parent component ID
}
Följande händelse är relevant för schema för komponent-/behållarobjekt:
cmp:click
Sidschema page
Sidschemat används av följande komponent:
Sidschemat definieras enligt följande.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
xdm:tags // page tags
repo:path // page path
xdm:template // page template
xdm:language // page language
}
En cmp:show
-händelse utlöses vid sidinläsning. Den här händelsen skickas från den infogade JavaScript direkt under den inledande <body>
-taggen, vilket gör den till den tidigaste händelsen i datalagrets händelsekö.
Behållarschema container
Behållarschemat används av följande komponenter:
Behållarschemat definieras så här.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
shownItems // array of the displayed item IDs
}
Följande händelser är relevanta för behållarschemat:
cmp:click
cmp:show
cmp:hide
Bildschema image
Bildschemat används av följande komponent:
Bildschemat definieras så här.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
image // asset detail (see below section)
}
Följande händelse är relevant för bildschemat:
cmp:click
Resursschema asset
Resursschemat används inuti Image-komponenten.
Resursschemat definieras så här.
id: {
repo:id // asset UUID
repo:path // asset path
@type // asset resource type
xdm:tags // asset tags
repo:modifyDate
}
Följande händelse är relevant för resursschemat:
cmp:click
Innehållsfragmentschema content-fragment
Innehållsfragmentschemat används av komponenten Innehållsfragment.
Schemat Innehållsfragment definieras så här.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
elements // array of the Content Fragment elements
}
Schemat som används för elementet Content Fragment är följande.
{
xdm:title // title
xdm:text // text
}
Kärnkomponentshändelser events
Det finns ett antal händelser som kärnkomponenter utlöser via datalagret. Det bästa sättet att interagera med datalagret är att registrera en händelseavlyssnare och sedan vidta en åtgärd baserat på händelsetypen och/eller komponenten som utlöste händelsen. På så sätt undviks potentiella konkurrensförhållanden med asynkrona skript.
Nedan visas några av de färdiga händelserna som AEM Core Components tillhandahåller:
cmp:click
- Om du klickar på ett klickbart element (ett element som har ettdata-cmp-clickable
-attribut) utlöser datalagret encmp:click
-händelse.cmp:show
ochcmp:hide
- Om du ändrar dragspelet (utöka/komprimera), karusellen (nästa/föregående knappar) och flikarna (tabbmarkera) utlöser datalagretcmp:show
- respektivecmp:hide
-händelser. Encmp:show
-händelse skickas också vid sidinläsning och förväntas vara den första händelsen.cmp:loaded
- När datalagret har fyllts i med kärnkomponenterna på sidan utlöser datalagret encmp:loaded
-händelse.
Händelser som utlösts av komponent events-components
I följande tabeller visas de standardkomponenter som utlöser händelser tillsammans med dessa händelser.
cmp:show
och cmp:hide
cmp:click
cmp:click
cmp:show
och cmp:hide
cmp:click
cmp:click
cmp:show
cmp:show
och cmp:hide
cmp:click
Information om händelsens sökväg event-path-info
Varje datalagerhändelse som utlöses av en AEM Core-komponent kommer att innehålla en nyttolast med följande JSON-objekt:
eventInfo: {
path: '<component-path>'
}
Där <component-path>
är JSON-sökvägen till komponenten i datalagret som utlöste händelsen. Värdet, som är tillgängligt via event.eventInfo.path
, är viktigt eftersom det kan användas som en parameter till adobeDataLayer.getState(<component-path>)
som hämtar det aktuella tillståndet för komponenten som utlöste händelsen, vilket gör att anpassad kod kan komma åt ytterligare data och lägga till dem i datalagret.
Till exempel:
function logEventObject(event) {
if(event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
console.debug("The component that triggered this event: ");
console.log(dataObject);
}
}
window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
dl.addEventListener("cmp:show", logEventObject);
});
Självstudiekurs
Vill du utforska datalagret och kärnkomponenterna mer i detalj? Kolla in den här självstudiekursen.