了解如何搭配AEM核心元件🔗使用Adobe用戶端資料層的內建功能,收集Adobe Experience Manager Sites中某頁面的相關資料。 Experience Platform Launch和Adobe Analytics 擴 充功能將用來建立規則,以將頁面資料傳送至Adobe Analytics。
在本教學課程中,您將根據來自Adobe用戶端資料層的事件觸發Launch規則,新增應觸發規則的條件,並將AEM頁面的頁面名稱和頁面範本傳送至Adobe Analytics。
需要下列項目:
需要整合Launch和您的AEM網站的協助嗎? 請觀看此影片系列。
https://wknd.site 是以開放原始碼專案為基礎所建置的 公開 網站,專為AEM實作提供參考和 🔗 教學課程。
您不必設定AEM環境並安裝WKND程式碼基底,而是可以使用Experience Platform偵錯器來switch即時https://wknd.site/偵錯至您的 Launch屬性。 當然,如果您自己的AEM網站已啟用Adobe用戶端資料層,您就可以使用
登入Experience Platform Launch並建立Launch屬性(如果尚未登入)。
請確定已建立初始的Launch 程式庫,並升級至Launch environment。
從您的程式庫已發佈到的環境中複製Launch內嵌程式碼。
在您的瀏覽器中開啟新標籤,並導覽至https://wknd.site/
開啟Experience Platform偵錯器瀏覽器擴充功能
導覽至Launch > Configuration,並在插入的內嵌程式碼下方,將現有的Launch內嵌程式碼取代為從步驟3複製的您的內嵌程式碼。
在WKND頁簽上啟用控制台日誌記錄和鎖定調試器。
WKND參考專案是使用AEM核心元件建置,預設會啟用Adobe用戶端資料層。 接下來,驗證Adobe客戶端資料層是否已啟用。
開啟瀏覽器的開發人員工具,並導覽至主控台。 執行下列命令:
adobeDataLayer.getState();
這會傳回Adobe用戶端資料層的目前狀態。
展開回應並檢查page
項目。 您應會看到下列資料結構:
page-2eee4f8914:
@type: "wknd/components/page"
dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
dc:title: "WKND Adventures and Travel"
repo:modifyDate: "2020-08-31T21:02:21Z"
repo:path: "/content/wknd/us/en.html"
xdm:language: "en-US"
xdm:tags: ["Attract"]
xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"
我們將使用衍生自資料層的頁面結構、dc:title
、xdm:language
和xdm:template
的標準屬性,將頁面資料傳送至Adobe Analytics。
沒有看見adobeDataLayer
javascript物件? 請確定您的網站上已啟用Adobe用戶端資料層。
Adobe客戶端資料層是event驅動的資料層。 載入AEM Page資料層時,會觸發事件cmp:show
。 建立將根據cmp:show
事件觸發的規則。
導覽至Experience Platform Launch,並導覽至與AEM網站整合的Web屬性。
導覽至Launch UI中的Rules區段,然後按一下建立新規則。
將規則命名為Page Loaded。
按一下「事件 添加」以開啟「事件配置」嚮導。
在事件類型下,選擇自訂代碼。
按一下主面板中的開啟編輯器 ,然後輸入下列程式碼片段:
var pageShownEventHandler = function(evt) {
// defensive coding to avoid a null pointer exception
if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
//trigger Launch Rule and pass event
console.debug("cmp:show event: " + evt.eventInfo.path);
var event = {
//include the path of the component that triggered the event
path: evt.eventInfo.path,
//get the state of the component that triggered the event
component: window.adobeDataLayer.getState(evt.eventInfo.path)
};
//Trigger the Launch Rule, passing in the new `event` object
// the `event` obj can now be referenced by the reserved name `event` by other Launch data elements
// i.e `event.component['someKey']`
trigger(event);
}
}
//set the namespace to avoid a potential race condition
window.adobeDataLayer = window.adobeDataLayer || [];
//push the event listener for cmp:show into the data layer
window.adobeDataLayer.push(function (dl) {
//add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
dl.addEventListener("cmp:show", pageShownEventHandler);
});
上述程式碼片段會透過推送函式至資料層來新增事件監聽器。 觸發cmp:show
事件時,會呼叫pageShownEventHandler
函式。 在此函式中,會新增一些健全性檢查,並針對觸發事件的元件,使用資料層🔗的最新狀態來建構新的event
。
之後呼叫trigger(event)
。 trigger()
是Launch中的保留名稱,且將「觸發」Launch規則。我們會以參數形式傳遞event
物件,而此參數將會由Launch中名為event
的其他保留名稱公開。 Launch中的資料元素現在可以參照各種屬性,如下所示:event.component['someKey']
。
儲存變更。
下一步在Actions下,按一下Add以開啟Action Configuration精靈。
在「動作類型」下,選擇「自訂程式碼」。
按一下主面板中的開啟編輯器 ,然後輸入下列程式碼片段:
console.debug("Page Loaded ");
console.debug("Page name: " + event.component['dc:title']);
console.debug("Page type: " + event.component['@type']);
console.debug("Page template: " + event.component['xdm:template']);
event
物件是從自訂事件中呼叫的trigger()
方法傳遞。 component
是從自訂事件中的資料層 getState
衍生的目前頁面。回想一下資料層公開的頁面架構之前的內容,以查看現成可用的各種索引鍵。
儲存變更並在Launch中執行build,將程式碼推廣至AEM網站上使用的environment。
使用Adobe Experience Platform Debugger將內嵌程式碼切換至開發環境,會相當實用。
導覽至您的AEM網站,並開啟開發人員工具以檢視主控台。 重新整理頁面,您應該會看到主控台訊息已記錄:
接著,建立數個資料元素,以從Adobe用戶端資料層擷取不同值。 如先前練習所示,我們已看到可透過自訂程式碼直接存取資料層的屬性。 使用資料元素的好處是,可在各個Launch規則中重複使用資料元素。
從資料層公開的頁面架構前面回想:
資料元素將對應至@type
、dc:title
和xdm:template
屬性。
導覽至Experience Platform Launch,並導覽至與AEM網站整合的Web屬性。
導覽至資料元素區段,然後按一下建立新資料元素。
對於名稱,輸入元件資源類型。
對於資料元素類型,請選擇自訂代碼。
按一下「開啟編輯器」,然後在自訂程式碼編輯器中輸入下列內容:
if(event && event.component && event.component.hasOwnProperty('@type')) {
return event.component['@type'];
}
儲存變更。
回想一下,event
物件已可供使用,且範圍是根據Launch中觸發Rule的事件而定。 在規則內的資料元素為referenced之前,資料元素的值不會設定。 因此,在規則內使用此資料元素是安全的,例如在前一個步驟中建立的Page Loaded規則,但在其他內容中使用則不安全。
按一下「新增資料元素」。
對於名稱,輸入頁面名稱。
對於資料元素類型,請選擇自訂代碼。
按一下「開啟編輯器」,然後在自訂程式碼編輯器中輸入下列內容:
if(event && event.component && event.component.hasOwnProperty('dc:title')) {
return event.component['dc:title'];
}
儲存變更。
按一下「新增資料元素」。
對於名稱,輸入頁面範本。
對於資料元素類型,請選擇自訂代碼。
按一下「開啟編輯器」,然後在自訂程式碼編輯器中輸入下列內容:
if(event && event.component && event.component.hasOwnProperty('xdm:template')) {
return event.component['xdm:template'];
}
儲存變更。
您現在應該有三個資料元素作為規則的一部分:
接下來,將Analytics擴充功能新增至您的Launch屬性。 我們需要將這些資料傳送到某處!
導覽至Experience Platform Launch,並導覽至與AEM網站整合的Web屬性。
前往擴充功能 > 目錄
找到Adobe Analytics擴充功能,然後按一下Install
在「程式庫管理 > 報表套裝」下方,輸入您要用於每個Launch環境的報表套裝ID。
在本教學課程中,您可以針對所有環境使用一個報表套裝,但在實際情況中,您會想要使用個別的報表套裝,如下圖所示
建議您使用為我管理程式庫選項作為「程式庫管理」設定,因為這可讓AppMeasurement.js
程式庫更容易保持最新。
核取方塊以啟用使用Activity Map。
在一般 > 追蹤伺服器下,輸入您的追蹤伺服器,例如tmd.sc.omtrdc.net
。 如果您的網站支援https://
,請輸入SSL追蹤伺服器
按一下儲存以儲存變更。
接下來,更新Page Loaded規則,以使用元件資源類型資料元素,確保只有在cmp:show
事件為Page時才會觸發規則。 其他元件可以引發cmp:show
事件,例如當投影片變更時,輪播元件就會引發。 因此,請務必為此規則新增條件。
在Launch UI中,導覽至先前建立的Page Loaded規則。
在Conditions下,按一下Add以開啟Condition Configuration精靈。
對於條件類型,選擇值比較。
將表單欄位中的第一個值設為%Component Resource Type%
。 您可以使用資料元素圖示來選取元件資源類型資料元素。 將比較器設定為
Equals
。
將第二個值設為wknd/components/page
。
可以在自訂程式碼函式中新增此條件,該函式會監聽先前在教學課程中建立的cmp:show
事件。 不過,在UI中新增該規則,可讓可能需要變更規則的其他使用者更清楚了解。 此外,我們還可以使用資料元素!
儲存變更。
目前,Page Loaded規則只會輸出主控台陳述式。 接下來,使用資料元素和Analytics擴充功能,將Analytics變數設為Page Loaded規則中的action。 我們也會設定其他動作,以觸發頁面檢視信標,並將收集的資料傳送至Adobe Analytics。
在Page Loaded規則remove中, Core - Custom Code動作(主控台陳述式):
在「動作」底下,按一下Add以新增動作。
將Extension類型設定為Adobe Analytics,並將Action Type設定為Set Variables
在主面板中,選取可用的eVar,並設為資料元素頁面範本的值。 使用資料元素表徵圖選擇頁面模板元素。
向下捲動,在Additional Settings下,將Page Name設定為資料元素Page Name:
儲存變更。
接下來,點選加號圖示,在Adobe Analytics — 設定變數的右側新增其他動作:
將Extension類型設為Adobe Analytics,並將Action Type設為Send Beacon。 由於這被視為頁面檢視,請將預設追蹤設為s.t()
。
儲存變更。Page Loaded規則現在應具備下列設定:
cmp:show
件。儲存所有變更並建置您的Launch程式庫,並提升至適當的環境。
現在,頁面載入規則會傳送Analytics信標,您應該可以使用Experience Platform偵錯器查看Analytics追蹤變數。
在瀏覽器中開啟WKND網站。
按一下Debugger圖示以開啟Experience PlatformDebugger。
如先前所述,確認Debugger將Launch屬性對應至您的開發環境,且已勾選主控台記錄。
開啟Analytics功能表,並確認報表套裝已設為您的報表套裝。 「頁面名稱」也應填入:
向下捲動並展開網路請求。 您應該能夠找到為頁面範本設定的evar:
返回瀏覽器,開啟開發人員主控台。 按一下頁面頂端的轉盤。
在瀏覽器主控台中觀察主控台陳述式:
這是因為轉盤確實會觸發cmp:show
事件,但,因為我們檢查了元件資源類型,所以沒有觸發任何事件。
如果您沒有看見任何主控台記錄,請確定已在Experience Platform偵錯器的Launch下勾選主控台記錄。
導覽至Western Australia之類的文章頁面。 觀察「頁面名稱」和「範本類型」變更。
您只是使用事件導向的Adobe用戶端資料層和Experience Platform Launch,從AEM網站收集資料頁面資料,並將其傳送至Adobe Analytics。
查看下列教學課程,了解如何使用事件導向的Adobe用戶端資料層追蹤Adobe Experience Manager網站上特定元件的點按。