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

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.

TIP

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 de Gegevens van de Cliënt van Adobe met de Componenten van de Kern, zie DATA_LAYER_INTEGRATION.md dossier in de bewaarplaats van de Componenten van de Kern.

Installatie en activering

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 projecten die door AEM Project Archetype v. 24+ worden geproduceerd omvatten standaard een geactiveerde Laag van Gegevens.

Om de Laag van Gegevens manueel te activeren moet u een context-bewuste configuratie voor het tot stand brengen:

  1. Maak de volgende structuur onder de map /conf/<mySite>, waarbij <mySite> de naam van het project van uw site is:

    • /conf/<mySite>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig
    • Waar elk knooppunt een jcr:primaryType heeft ingesteld op nt:unstructured.

  2. Voeg een booleaanse eigenschap met de naam enabled toe en stel deze in op true.

    Locatie van DataLayerConfig in WKND Reference Site

    Locatie van DataLayerConfig in WKND Reference Site

  3. Voeg een eigenschap sling:configRef toe aan het jcr:content-knooppunt van uw site onder /content (bijvoorbeeld /content/<mySite>/jcr:content) en stel deze in op /conf/<mySite> uit de vorige stap.

  4. Zodra toegelaten, kunt u de activering verifiëren door een pagina van de plaats buiten de redacteur te laden, bijvoorbeeld door Mening te gebruiken zoals Gepubliceerd optie in de redacteur. Inspect de paginabron en de tag <body> moeten een kenmerk data-cmp-data-layer-enabled bevatten

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

  5. U kunt ook de ontwikkelaarsgereedschappen van uw browser openen en in de console moet het JavaScript-object adobeDataLayer beschikbaar zijn. Ga het volgende bevel in om de staat van de Laag van Gegevens van uw huidige pagina te krijgen:

    window.adobeDataLayer.getState();

Ondersteunde componenten

De volgende componenten steunen de Laag van Gegevens.

Verwijs ook naar gebeurtenissen die door de componenten worden teweeggebracht.

Gegevensschema's voor kerncomponenten

Het volgende is een lijst van schema's die de Componenten van de Kern met de Laag van Gegevens gebruiken.

Component-/containeritemschema

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
}

De volgende gebeurtenis is relevant voor het schema Component/Container-item:

  • cmp:click

Paginaschema

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
}

Bij het laden van de pagina wordt een gebeurtenis cmp:show geactiveerd. Deze gebeurtenis wordt verzonden vanuit inline JavaScript direct onder de openingstag <body>, waardoor deze de oudste gebeurtenis in de wachtrij met gegevenslaaggebeurtenissen is.

Containerschema

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
}

De volgende gebeurtenissen zijn relevant voor het containerschema:

  • cmp:click
  • cmp:show
  • cmp:hide

Afbeeldingsschema

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

De volgende gebeurtenis is relevant voor het beeldschema:

  • cmp:click

Elementschema

Het schema Asset wordt gebruikt in de 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
}

De volgende gebeurtenis is relevant voor het schema Asset:

  • cmp:click

Inhoudsfragmentschema

Het inhoudsfragmentschema wordt gebruikt door de 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
}

Gebeurtenissen kerncomponent

Er zijn een aantal gebeurtenissen die de Componenten van de Kern via de Laag van Gegevens teweegbrengen. De beste manier om met de Laag van Gegevens in wisselwerking te staan is een gebeurtenisluisteraar te registreren en dan een actie te voeren die op het gebeurtenistype en/of de component wordt gebaseerd die de gebeurtenis teweegbracht. 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 - Als u op een klikbaar element (een element met een data-cmp-clickable kenmerk) klikt, activeert de gegevenslaag een cmp:click gebeurtenis.
  • cmp:show en cmp:hide - Door het manipuleren van de accordeon (uitvouwen/samenvouwen), de carrousel (volgende/vorige knoppen) en de tabs (geselecteerde tabbladen) worden respectievelijk de gegevenslaag geactiveerd cmp:show en een cmp:hide gebeurtenis. Er wordt ook een cmp:show-gebeurtenis verzonden bij 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 een cmp:loaded gebeurtenis.

Gebeurtenissen geactiveerd door component

In de volgende tabellen worden de standaard Core Components weergegeven die gebeurtenissen met deze gebeurtenissen activeert.

Component Gebeurtenis(sen)
Accordeon cmp:show and 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

Info van gebeurtenispad

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

Hierbij is <component-path> het JSON-pad naar de component in de gegevenslaag die de gebeurtenis heeft geactiveerd. De waarde, beschikbaar via event.eventInfo.path, is belangrijk aangezien het als parameter aan adobeDataLayer.getState(<component-path>) kan worden gebruikt 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);
});

Zelfstudie

Wilt u de componenten van de Laag en van de Kern van Gegevens meer in detail onderzoeken? Bekijk deze praktische zelfstudie.

TIP

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.

Op deze pagina