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

Adobe用戶端資料層引進了標準方法,用於收集和儲存網頁上訪客體驗的相關資料,並且讓此資料易於存取。 Adobe用戶端資料層不受平台限制,但已完全整合至核心元件,以便與AEM搭配使用。

注意

想在AEM網站上啟用Adobe用戶端資料層嗎? 請參閱這裡的指示

探索資料層

您只需使用瀏覽器的開發人員工具和即時 WKND參考網站,即可了解Adobe用戶端資料層的內建功能。

注意

從Chrome瀏覽器擷取的下方螢幕擷取畫面。

  1. 導覽至https://wknd.site

  2. 開啟開發人員工具,並在​主控台​中輸入以下命令:

    window.adobeDataLayer.getState();
    

    Inspect回應,可查看AEM網站上資料層的目前狀態。 您應該會看到頁面和個別元件的相關資訊。

    Adobe資料層回應

  3. 在主控台中輸入下列內容,將資料物件推送至資料層:

    window.adobeDataLayer.push({
        "component": {
            "training-data": {
                "title": "Learn More",
                "link": "learn-more.html"
            }
        }
    });
    
  4. 再次運行命令adobeDataLayer.getState()並查找training-data的條目。

  5. 接下來新增路徑參數,只傳回元件的特定狀態:

    window.adobeDataLayer.getState('component.training-data');
    

    只傳回單一元件資料項目

使用事件

根據資料層的事件觸發任何自訂程式碼是最佳作法。 接下來,探索註冊和聆聽不同事件。

  1. 在主控台中輸入下列協助方法:

    function getDataObjectHelper(event, filter) {
        if (event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
            var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
            if (dataObject != null) {
                for (var property in filter) {
                    if (!dataObject.hasOwnProperty(property) || (filter[property] !== null && filter[property] !== dataObject[property])) {
                        return;
                    }
                    return dataObject;
                }
            }
        }
        return;
    }
    

    上述程式碼將檢查event物件,並使用adobeDataLayer.getState方法來取得觸發事件之物件的目前狀態。 協助方法接著會檢查filter條件,且只有目前的dataObject符合篩選條件時,才會傳回該條件。

    注意

    在本練習中重新整理瀏覽器很重要,否則主控台JavaScript將會遺失。

  2. 接下來,輸入當​Teaser​元件顯示在​Carousel​中時將調用的事件處理程式。

    function teaserShownHandler(event) {
        var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/teaser"});
        if(dataObject != null) {
            console.log("Teaser Shown: " + dataObject['dc:title']);
            console.log(dataObject);
        }
    }
    

    teaserShownHandler將呼叫getDataObjectHelper方法,並傳入wknd/components/teaser篩選器作為@type,以篩選掉其他元件所觸發的事件。

  3. 接下來,將事件接聽程式推送至資料層,以接聽cmp:show事件。

    window.adobeDataLayer.push(function (dl) {
         dl.addEventListener("cmp:show", teaserShownHandler);
    });
    

    cmp:show事件由許多不同的元件觸發,例如當新幻燈片顯示在​轉盤​中,或當在​標籤​元件中選擇了新頁簽時。

  4. 在頁面上切換輪播投影片,並觀察主控台陳述式:

    切換轉盤,並查看事件接聽程式

  5. 從資料層中移除事件監聽器,以停止cmp:show事件的監聽:

    window.adobeDataLayer = window.adobeDataLayer || [];
    window.adobeDataLayer.push(function(dl) {
        dl.removeEventListener("cmp:show", teaserShownHandler);
    });
    
  6. 返回頁面並切換輪播投影片。 請注意,不會再記錄任何陳述式,且不會監聽事件。

  7. 接下來,輸入觸發頁面顯示事件時將呼叫的事件處理常式:

    function pageShownHandler(event) {
        var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/page"});
        if(dataObject != null) {
            console.log("Page Shown: " + dataObject['dc:title']);
            console.log(dataObject);
        }
    }
    

    請注意,資源類型wknd/components/page用於篩選事件。

  8. 接下來,將事件接聽程式推送至資料層,以接聽cmp:show事件,並呼叫pageShownHandler

    window.adobeDataLayer = window.adobeDataLayer || [];
    window.adobeDataLayer.push(function (dl) {
         dl.addEventListener("cmp:show", pageShownHandler);
    });
    
  9. 您應會立即看到頁面資料引發的主控台陳述式:

    頁面顯示資料

    頁面的cmp:show事件會在頁面最上方的每個頁面載入時觸發。 您可能會問,當頁面顯然已載入時,為何觸發事件處理常式?

    這是Adobe客戶端資料層的獨特功能之一,因為您可以在​之前註冊事件偵聽器,或在​之後註冊事件偵聽器。 這是避免種族狀況的關鍵特徵。

    資料層會維護依序發生的所有事件的佇列陣列。 依預設,資料層會針對​past​中發生的事件,以及​future​中的事件觸發事件回呼。 可將事件篩選為過去或未來。 如需詳細資訊,請參閱本檔案

後續步驟

請查看下列教學課程,了解如何使用事件導向的Adobe用戶端資料層來收集頁面資料並傳送至Adobe Analytics

或者,了解如何使用AEM元件🔗自訂Adobe用戶端資料層

其他資源

本頁內容