DokumentationAEMAnvändarhandbok om grundläggande komponenter

Använda Adobe-klientdatalagret med kärnkomponenterna data-layer-core-components

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Utvecklare
  • Administratör

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.

TIP
Mer information om Adobe Client Data Layer finns i resurserna i dess GitHub-databas.
Mer teknisk information om integreringen av Adobe Client Data Layer med Core Components finns i filen 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:

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

  2. Lägg till en boolesk egenskap med namnet enabled och ställ in den på true.

    Plats för DataLayerConfig i WKND-referensplats

    Plats för DataLayerConfig i WKND-referensplats

  3. Lägg till en sling:configRef-egenskap till jcr: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.

  4. 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 attributet data-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>

  5. 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 ett data-cmp-clickable -attribut) utlöser datalagret en cmp:click -händelse.
  • cmp:show och cmp:hide - Om du ändrar dragspelet (utöka/komprimera), karusellen (nästa/föregående knappar) och flikarna (tabbmarkera) utlöser datalagret cmp:show - respektive cmp:hide -händelser. En cmp: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 en cmp: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.

Komponent
Händelser
Dragspel
cmp:show och cmp:hide
Knapp
cmp:click
Breadcrumb
cmp:click
Carousel
cmp:show och cmp:hide
Språknavigering
cmp:click
Navigering
cmp:click
Sida
cmp:show
Tabbar
cmp:show och cmp:hide
Teaser
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.

TIP
Om du vill utforska datalagrets flexibilitet ytterligare kan du granska integreringsalternativen, inklusive hur du aktiverar datalagret för dina anpassade komponenter.
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c