Het doel van de de Gegevens van de Cliënt van Adobe is de inspanning aan instrumentwebsites te verminderen door een gestandaardiseerde methode te verstrekken om om het even welk soort gegevens voor om het even welk manuscript bloot te stellen en toegang te hebben.
De gegevenslaag van de Cliënt van Adobe is platform agnostic, maar is volledig geïntegreerd in de Componenten van de Kern voor gebruik met AEM.
Als de Componenten van de Kern, is de code voor de Laag van Gegevens van de Cliënt van Adobe beschikbaar op GitHub samen met zijn ontwikkelaardocumentatie. Dit document geeft een overzicht van hoe de Componenten van de Kern met de Laag van Gegevens in wisselwerking staan, maar de volledige technische details worden uitgesteld aan de documentatie GitHub.
Voor meer informatie over de Laag van Gegevens van de Cliënt van Adobe, verwijs naar de middelen in zijn bewaarplaats GitHub.
Voor verdere technische details over de integratie van de Laag van Gegevens van de Cliënt van Adobe met de Componenten van de Kern, zie DATA_LAYER_INTEGRATION.md
in de opslagplaats voor kerncomponenten.
Vanaf versie 2.9.0 van de Componenten van de Kern, wordt de Laag van Gegevens gedistribueerd met de Componenten van de Kern als AEM Bibliotheek van de Cliënt en geen installatie is noodzakelijk. Alle door de AEM Project Archetype v. 24+ Neem standaard een geactiveerde gegevenslaag op.
Als u de gegevenslaag handmatig wilt activeren, moet u een contextbewuste configuratie voor it :
De volgende structuur maken onder de /conf/<mySite>
map, waar <mySite>
is de naam van het project van uw Site:
/conf/<mySite>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig
jcr:primaryType
instellen op nt:unstructured
.Een Booleaanse eigenschap met de naam enabled
en stel deze in op true
.
Locatie van DataLayerConfig in WKND Reference Site
Voeg een sling:configRef
aan de jcr:content
knooppunt van uw site hieronder /content
(bijvoorbeeld /content/<mySite>/jcr:content
) en instellen op /conf/<mySite>
uit de vorige stap.
Zodra toegelaten, kunt u de activering verifiëren door een pagina van de plaats buiten de redacteur te laden, bijvoorbeeld door te gebruiken Weergeven als gepubliceerd in de editor. Inspect de paginabron en de <body>
tag moet een kenmerk bevatten data-cmp-data-layer-enabled
<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>
U kunt ook de ontwikkelaarsgereedschappen van uw browser openen en in de console de adobeDataLayer
JavaScript-object moet beschikbaar zijn. Ga het volgende bevel in om de staat van de Laag van Gegevens van uw huidige pagina te krijgen:
window.adobeDataLayer.getState();
De volgende componenten steunen de Laag van Gegevens.
Zie ook de gebeurtenissen die door de componenten worden geactiveerd.
Het volgende is een lijst van schema's die de Componenten van de Kern met de Laag van Gegevens gebruiken.
Het schema Component/Container Item wordt gebruikt in de volgende componenten:
Het schema Component/Container Item is als volgt gedefinieerd.
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
}
Het volgende event is relevant voor het Component/Container Item-schema:
cmp:click
Het paginaschema wordt gebruikt door de volgende component:
Het paginaschema wordt als volgt gedefinieerd.
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
}
A cmp:show
gebeurtenis wordt geactiveerd bij het laden van de pagina. Deze gebeurtenis wordt verzonden vanuit online JavaScript direct onder het openen <body>
tag, waardoor deze de oudste gebeurtenis in de gebeurteniswachtrij voor gegevenslagen wordt.
Het containerschema wordt gebruikt door de volgende componenten:
Het containerschema wordt als volgt gedefinieerd.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
shownItems // array of the displayed item IDs
}
Het volgende gebeurtenissen zijn relevant voor het containerschema:
cmp:click
cmp:show
cmp:hide
Het schema van het Beeld wordt gebruikt door de volgende component:
Het afbeeldingsschema wordt als volgt gedefinieerd.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
image // asset detail (see below section)
}
Het volgende event is relevant voor het afbeeldingsschema:
cmp:click
Het schema Element wordt gebruikt in het dialoogvenster Afbeeldingscomponent.
Het schema Asset wordt als volgt gedefinieerd.
id: {
repo:id // asset UUID
repo:path // asset path
@type // asset resource type
xdm:tags // asset tags
repo:modifyDate
}
Het volgende event is relevant voor het schema voor activa:
cmp:click
Het inhoudsfragmentschema wordt gebruikt door het Inhoudsfragmentcomponent.
Het inhoudsfragmentschema wordt als volgt gedefinieerd.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
elements // array of the Content Fragment elements
}
Het schema dat voor het element Inhoudsfragment wordt gebruikt, ziet er als volgt uit.
{
xdm:title // title
xdm:text // text
}
Er zijn een aantal gebeurtenissen die de Componenten van de Kern via de Laag van Gegevens teweegbrengen. De beste praktijken voor het in wisselwerking staan met de Laag van Gegevens zijn: een gebeurtenislistener registreren en dan Voer een actie uit op basis van het gebeurtenistype en/of de component die de gebeurtenis heeft geactiveerd. Dit zal potentiële rassenvoorwaarden met asynchrone manuscripten vermijden.
Hieronder vindt u de gebeurtenissen uit de box die worden geleverd door AEM Core Components:
cmp:click
- Op een klikbaar element klikken (een element dat een data-cmp-clickable
kenmerk) activeert de gegevenslaag een cmp:click
gebeurtenis.cmp:show
en cmp:hide
- De gegevenslaag wordt geactiveerd door het manipuleren van de componenten accordeon (uit-/samenvouwen), carrousel (uit-/vorige knoppen) en tabbladen (selecteren) cmp:show
en cmp:hide
gebeurtenissen. A cmp:show
gebeurtenis wordt ook verzonden tijdens het laden van de pagina en dit is naar verwachting de eerste gebeurtenis.cmp:loaded
- Zodra de Laag van Gegevens met de Componenten van de Kern op de pagina wordt bevolkt, teweegbrengt de Laag van Gegevens a cmp:loaded
gebeurtenis.In de volgende tabellen worden de standaard Core Components weergegeven die gebeurtenissen met deze gebeurtenissen activeert.
Component | Gebeurtenis(sen) |
---|---|
Accordeon | cmp:show en cmp:hide |
Knop | cmp:click |
Broodkruimel | cmp:click |
Carousel | cmp:show en cmp:hide |
Taalnavigatie | cmp:click |
Navigatie | cmp:click |
Pagina | cmp:show |
Tabs | cmp:show en cmp:hide |
Teaser | cmp:click |
Elke gebeurtenis van de Laag van Gegevens die door een AEM Component van de Kern wordt teweeggebracht zal een lading met het volgende voorwerp JSON omvatten:
eventInfo: {
path: '<component-path>'
}
Wanneer <component-path>
is het JSON-pad naar de component in de gegevenslaag die de gebeurtenis heeft geactiveerd. De waarde, beschikbaar via event.eventInfo.path
, is belangrijk omdat het kan worden gebruikt als parameter voor adobeDataLayer.getState(<component-path>)
die de huidige staat van de component terugwint die de gebeurtenis teweegbracht, toestaand douanecode om tot extra gegevens toegang te hebben en het toe te voegen aan de Laag van Gegevens.
Bijvoorbeeld:
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);
});
Wilt u de componenten van de Laag en van de Kern van Gegevens meer in detail onderzoeken? Deze praktische zelfstudie bekijken.
Om de flexibiliteit van de Laag van Gegevens verder te onderzoeken, herzie over de integratieopties met inbegrip van hoe te om de Laag van Gegevens voor uw douanecomponenten toe te laten.