搭配核心元件使用Adobe用戶端資料層

Adobe用戶端資料層的目標,是透過提供標準化方法來公開和存取任何指令碼的任何類型資料,以減少網站的測試工作。

Adobe用戶端資料層不受平台限制,但已完全整合至核心元件,可與AEM搭配使用。

和核心元件一樣,GitHub也提供Adobe用戶端資料層的程式碼及其開發人員檔案。 本檔案概述核心元件與資料層的互動方式,但GitHub檔案會延遲完整的技術詳細資訊。

秘訣

有關Adobe客戶端資料層的詳細資訊,請參考其GitHub儲存庫中的資源。

有關Adobe用戶端資料層與核心元件整合的詳細技術資訊,請參閱核心元件儲存庫中的DATA_LAYER_INTEGRATION.md檔案。

安裝與啟動

自2.9.0版起,資料層會以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

    DataLayerConfig在WKND參考網站中的位置

    DataLayerConfig在WKND參考網站中的位置

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

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

    window.adobeDataLayer.getState();
    

支援的元件

以下元件支援資料層。

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

核心元件資料結構

以下是核心元件與資料層一起使用的方案清單。

元件/容器項方案

元件/容器項模式用於以下元件:

元件/容器項方案定義如下。

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
}

以下event與元件/容器項模式相關:

  • cmp:click

頁面結構

頁面架構由下列元件使用:

頁面結構定義如下。

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
}

下列events與容器結構描述相關:

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

映像架構

以下元件使用映像模式:

映像模式定義如下。

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

以下event與映像架構相關:

  • cmp:click

資產結構

資產架構用於Image元件內。

資產結構定義如下。

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

以下event與資產結構相關:

  • cmp:click

內容片段結構

內容片段架構由內容片段元件使用。

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

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
}

核心元件事件

核心元件會透過資料層觸發許多事件。 與資料層交互的最佳實踐是:註冊事件偵聽器和​,然後​根據觸發事件的事件類型和/或元件採取操作。 這將避免使用非同步指令碼的潛在競爭條件。

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

  • cmp:click -按一下可點按的元素(具有屬性的 data-cmp-clickable 元素)會使資料層觸發 cmp:click 事件。
  • cmp:showcmp:hide -控制accordion(展開/收合)、轉盤(下一個/上一個按鈕)和標籤(標籤選擇)元件,會分別觸發資料層 cmp:show 和事 cmp:hide 件。cmp:show事件也會在頁面載入時派發,並預期會是第一個事件。
  • cmp:loaded -當資料層填入頁面上的核心元件時,資料層就會觸發 cmp:loaded 事件。

元件觸發的事件

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

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

事件路徑資訊

AEM核心元件所觸發的每個資料層事件都會包含包含下列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);
});

教學課程

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

秘訣

若要進一步探索資料層的彈性,請檢視整合選項,包括如何為自訂元件啟用資料層。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free