搭配核心元件使用Adobe使用者端資料層 data-layer-core-components

Adobe Client Data Layer的目標是提供標準化方法,公開和存取任何指令碼的任何型別的資料,以減少檢測網站所需的工作量。

Adobe Client Data Layer不受平台限制,但已完全整合至核心元件,以與AEM搭配使用。

和核心元件一樣,Adobe Client Data Layer的程式碼可在GitHub與其開發人員檔案中取得。 本檔案概述核心元件與資料層的互動方式,但完整技術詳細資訊將遞延至GitHub檔案。

TIP
如需Adobe使用者端資料層的詳細資訊,請參閱其GitHub存放庫中的資源。
如需Adobe使用者端資料層與核心元件整合的詳細技術資訊,請參閱核心元件存放庫中的DATA_LAYER_INTEGRATION.md檔案。

安裝及啟用 installation-activation

截至核心元件2.9.0版,Data Layer會作為AEM使用者端程式庫隨核心元件發佈,無需安裝。 AEM Project Archetype v. 24+產生的所有專案預設包含已啟動的資料層。

若要手動啟動資料層,您必須為其建立內容感知設定

  1. /conf/<mySite>資料夾下方建立下列結構,其中<mySite>是您網站的專案名稱:

    • /conf/<mySite>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig
    • 其中每個節點都將jcr:primaryType設定為nt:unstructured
  2. 新增名稱為enabled的布林值屬性,並將其設定為true

    WKND參照站台中 DataLayerConfig的位置

    WKND參照站台中​ DataLayerConfig的位置

  3. sling:configRef屬性新增至您網站的jcr:content節點,位置在/content (例如/content/<mySite>/jcr:content)下,並將其設定為上一步驟中的/conf/<mySite>

  4. 啟用後,您可以在編輯器之外載入網站的頁面,例如使用編輯器中的​ 以發佈的形式檢視 ​選項,以驗證啟動。 Inspect頁面來源和<body>標籤應包含屬性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. 您也可以開啟瀏覽器的開發人員工具,然後在主控台中,adobeDataLayer JavaScript物件應該可供使用。 輸入下列命令以取得目前頁面的「資料層」狀態:

    code language-javascript
    window.adobeDataLayer.getState();
    

支援的元件 supported-components

下列元件支援資料層。

另請參閱元件所觸發的事件。

核心元件資料結構描述 data-schemas

以下是核心元件搭配Data Layer使用的結構描述清單。

元件/容器專案結構描述 item

元件/容器專案結構用於以下元件中:

元件/容器專案結構描述的定義如下。

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
}

下列事件與元件/容器專案結構描述相關:

  • cmp:click

頁面結構描述 page

「頁面」綱要由下列元件使用:

「頁面」綱要的定義如下。

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
}

頁面載入時會觸發cmp:show事件。 此事件從緊接在開頭<body>標籤下方的內嵌JavaScript中傳送,使其成為資料層事件佇列中最早的事件。

容器結構描述 container

容器結構描述可供下列元件使用:

容器結構描述的定義如下。

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    shownItems          // array of the displayed item IDs
}

下列個事件與容器結構描述相關:

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

影像結構描述 image

影像結構描述可供下列元件使用:

影像結構的定義如下。

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    image               // asset detail (see below section)
}

下列事件與影像結構描述相關:

  • cmp:click

資產結構 asset

資產結構描述用於影像元件內。

資產結構的定義如下。

id: {
    repo:id             // asset UUID
    repo:path           // asset path
    @type               // asset resource type
    xdm:tags            // asset tags
    repo:modifyDate
}

下列事件與資產結構描述相關:

  • cmp:click

內容片段結構描述 content-fragment

內容片段結構描述已由內容片段元件使用。

內容片段結構的定義如下。

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    elements            // array of the Content Fragment elements
}

用於內容片段元素的結構描述如下。

{
    xdm:title           // title
    xdm:text            // text
}

核心元件事件 events

核心元件會透過「資料層」觸發許多事件。 與資料層互動的最佳實務是註冊事件接聽程式,然後​ 根據事件型別和/或觸發事件的元件採取動作。 ​這將避免與非同步指令碼的潛在競爭條件。

以下是AEM核心元件所提供的現成事件:

  • cmp:click — 按一下可點按的元素(具有data-cmp-clickable屬性的元素)會導致資料層觸發cmp:click事件。
  • cmp:show ​和​ cmp:hide — 操作收合式選單(展開/摺疊)、轉盤(下一個/上一個按鈕)和標籤(索引標籤選取)元件會導致資料層分別觸發cmp:showcmp:hide事件。 cmp:show事件也會在頁面載入時傳送,且預期會成為第一個事件。
  • cmp:loaded — 使用頁面上的核心元件填入Data Layer之後,Data Layer就會觸發cmp:loaded事件。

元件觸發的事件 events-components

下表列出會觸發事件以及這些事件的標準核心元件。

元件
事件
折疊式面板
cmp:showcmp:hide
按鈕
cmp:click
階層連結
cmp:click
傳送
cmp:showcmp:hide
語言導覽
cmp:click
導覽
cmp:click
頁面
cmp:show
索引標籤
cmp:showcmp:hide
Teaser
cmp:click

事件路徑資訊 event-path-info

AEM核心元件觸發的每個Data Layer事件將包含具有以下JSON物件的裝載:

eventInfo: {
    path: '<component-path>'
}

其中<component-path>是資料層中觸發事件的元件的JSON路徑。 值是重要的,可透過event.eventInfo.path使用,因為它可以用作adobeDataLayer.getState(<component-path>)的引數,它會擷取觸發事件的元件目前狀態,允許自訂程式碼存取其他資料並將其新增到資料層。

例如:

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

教學課程

想要更詳細地探索資料層和核心元件嗎? 檢視此實作教學課程

TIP
若要進一步探索Data Layer的彈性,請檢閱相關的整合選項,包括如何為自訂元件啟用Data Layer。
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c