Använda Adobe-klientdatalagret med kärnkomponenterna

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.

TIPS

Mer information om Adobe klientdatalager finns här: referera till resurserna i GitHub-databasen.

Mer teknisk information om integreringen av Adobe Client Data Layer med Core Components finns i DATA_LAYER_INTEGRATION.md i Core Components-databasen.

Installation och aktivering

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 genererats av AEM Project Archetype v. 24+ inkluderar 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 /conf/<mySite> mapp, var <mySite> är namnet på ditt Site-projekt:

    • /conf/<mySite>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig
    • Där varje nod har en jcr:primaryType ange till nt:unstructured.

  2. Lägg till en boolesk egenskap med namnet enabled och ange true.

    Plats för DataLayerConfig i WKND-referensplats

    Plats för DataLayerConfig i WKND-referensplats

  3. Lägg till en sling:configRef egenskapen till jcr:content nod på din webbplats nedan /content (t.ex. /content/<mySite>/jcr:content) och ange att /conf/<mySite> från föregående steg.

  4. När aktiveringen är aktiverad kan du verifiera aktiveringen genom att läsa in en sida utanför redigeraren, till exempel med hjälp av Visa som publicerad i redigeraren. Inspect, sidkällan och <body> taggen ska innehålla ett attribut 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>

  5. Du kan även öppna utvecklarverktygen i webbläsaren och i konsolen adobeDataLayer JavaScript-objekt ska vara tillgängliga. Ange följande kommando för att hämta den aktuella sidans datalagerstatus:

    window.adobeDataLayer.getState();

Komponenter som stöds

Följande komponenter har stöd för datalagret.

Se även händelser som utlöses av komponenterna.

Datascheman för kärnkomponenter

Här följer en lista med scheman som kärnkomponenterna använder med datalagret.

Komponent-/behållarobjektschema

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 event är relevant för schema för komponent-/behållarobjekt:

  • cmp:click

Sidschema

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
}

A cmp:show -händelsen utlöses vid sidinläsning. Den här händelsen skickas från textbundet JavaScript direkt under öppningen <body> -taggen, vilket gör den till den tidigaste händelsen i datalagrets händelsekö.

Behållarschema

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

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 event är relevant för bildschemat:

  • cmp:click

Resursschema

Resursschemat används i Bildkomponent.

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 event är relevant för resursschemat:

  • cmp:click

Innehållsfragmentschema

Innehållsfragmentschemat används av Innehållsfragmentkomponent.

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

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 - Klicka på ett klickbart element (ett element som har ett data-cmp-clickable attribute) aktiverar datalagret en cmp:click -händelse.
  • cmp:show och cmp:hide - Om du ändrar dragspelsfliken (expanderar/komprimerar), karusellen (nästa/föregående knappar) och flikarna (tabbmarkera) aktiveras datalagret cmp:show och cmp:hide respektive. A cmp:show -händelsen 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 utlösta av komponent

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

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

Plats <component-path> är JSON-sökvägen till komponenten i datalagret som utlöste händelsen. Värdet ä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 läget för den komponent som utlöste händelsen, så 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.

TIPS

Om du vill utforska datalagrets flexibilitet ytterligare kan du granska integreringsalternativen, inklusive hur du aktiverar datalagret för dina anpassade komponenter.

På denna sida