了解如何使用 Adobe用戶端資料層與AEM核心元件 收集Adobe Experience Manager Sites中某頁面的相關資料。 Experience Platform Launch 和 Adobe Analytics擴充功能 可用來建立規則,以將頁面資料傳送至Adobe Analytics。
在本教學課程中,您將根據Adobe用戶端資料層的事件觸發Launch規則、新增應觸發規則的條件,並傳送 頁面名稱 和 頁面範本 的AEM頁面。
需要下列項目:
需要整合Launch和您的AEM網站的協助嗎? 請觀看此影片系列.
https://wknd.site 是以 開放原始碼專案 設計為參考, 教學課程 AEM實作。
您不必設定AEM環境並安裝WKND程式碼基底,而是可以使用Experience Platform偵錯器,以 開關 現場 https://wknd.site/ to 您的 啟動屬性。 當然,如果您的AEM網站已具備 Adobe用戶端資料層已啟用
登入Experience Platform Launch和 建立Launch屬性 (如果尚未)。
從您的程式庫已發佈到的環境中複製Launch內嵌程式碼。
在您的瀏覽器中開啟新標籤,並導覽至 https://wknd.site/
開啟Experience Platform偵錯器瀏覽器擴充功能
導覽至 Launch > 設定 和 插入的內嵌程式碼 將現有的Launch內嵌程式碼取代為 您的 從步驟3複製的內嵌程式碼。
啟用 主控台記錄 和 鎖定 WKND標籤上的除錯程式。
此 WKND參考專案 是以AEM核心元件建置,且 Adobe用戶端資料層已啟用 依預設。 接下來,驗證Adobe客戶端資料層是否已啟用。
導覽至 https://wknd.site.
開啟瀏覽器的開發人員工具,並導覽至 主控台. 執行下列命令:
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用戶端資料層是 事件 驅動資料層。 當AEM 頁面 資料層已載入,將觸發事件 cmp:show
. 建立根據 cmp:show
事件。
導覽至Experience Platform Launch,並導覽至與AEM網站整合的Web屬性。
導覽至 規則 區段,然後按一下 建立新規則.
為規則命名 已載入頁面.
按一下 事件 新增 開啟 事件設定 嚮導。
在 事件類型 選取 自訂程式碼.
按一下 開啟編輯器 在主面板中,輸入下列程式碼片段:
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)
的URL。 trigger()
是Launch中的保留名稱,且將「觸發」Launch規則。 我們通過 event
物件,而此參數又會由Launch中另一個保留名稱公開,名稱為 event
. Launch中的資料元素現在可以參照各種屬性,如下所示: event.component['someKey']
.
儲存變更。
下一個 動作 按一下 新增 開啟 動作設定 嚮導。
在 動作類型 選擇 自訂程式碼.
按一下 開啟編輯器 在主面板中,輸入下列程式碼片段:
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中,將程式碼推廣至 環境 用於AEM網站。
使用 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中。 在資料元素為 引用 規則內。 因此,在規則內使用此資料元素是安全的,如 已載入頁面 在上一步中建立的規則 但 在其他情況下使用將不安全。
按一下 新增資料元素.
針對 名稱 輸入 頁面名稱.
針對 資料元素類型 選取 自訂程式碼.
按一下 開啟編輯器 並在自訂程式碼編輯器中輸入下列內容:
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 擴充功能,按一下 安裝
在 程式庫管理 > 報表套裝,請輸入您要用於每個Launch環境的報表套裝id。
在本教學課程中,您可以針對所有環境使用一個報表套裝,但在實際情況中,您會想要使用個別的報表套裝,如下圖所示
建議您使用 為我管理程式庫選項 作為「程式庫管理」設定,因為它可讓 AppMeasurement.js
程式庫的最新資訊。
核取方塊以啟用 使用Activity Map.
在 一般 > 追蹤伺服器,請輸入您的追蹤伺服器,例如 tmd.sc.omtrdc.net
. 如果您的網站支援,請輸入SSL追蹤伺服器 https://
按一下 儲存 以儲存變更。
接下來,更新 已載入頁面 規則來使用 元件資源類型 資料元素,以確保規則只在 cmp:show
事件適用於 頁面. 其他元件可以觸發 cmp:show
事件,例如當投影片變更時,輪播元件就會引發。 因此,請務必為此規則新增條件。
在Launch UI中,導覽至 已載入頁面 規則。
在 條件 按一下 新增 開啟 條件設定 嚮導。
針對 條件類型 選取 值比較.
將表單欄位中的第一個值設為 %Component Resource Type%
. 您可以使用資料元素圖示 ,選擇 元件資源類型 資料元素。 將比較器設定為
Equals
.
將第二個值設為 wknd/components/page
.
可以在監聽的自訂程式碼函式中新增此條件 cmp:show
在教學課程先前建立的事件。 不過,在UI中新增該規則,可讓可能需要變更規則的其他使用者更清楚了解。 此外,我們還可以使用資料元素!
儲存變更。
目前 已載入頁面 規則只會輸出console陳述式。 接下來,使用資料元素和Analytics擴充功能,將Analytics變數設為 動作 在 已載入頁面 規則。 我們也會設定其他動作來觸發 頁面檢視信標 並將收集的資料傳送至Adobe Analytics。
在 已載入頁面 規則 移除 the 核心 — 自訂程式碼 動作(控制台陳述式):
在「動作」底下,按一下 新增 以新增動作。
設定 擴充功能 類型 Adobe Analytics 並設定 動作類型 to 設定變數
在主面板中選取可用 eVar 並設為資料元素的值 頁面範本. 使用資料元素圖示 ,選擇 頁面範本 元素。
向下捲動,在下方 其他設定 set 頁面名稱 至資料元素 頁面名稱:
儲存變更。
接下來,在 Adobe Analytics — 設定變數 點選 plus 圖示:
設定 擴充功能 類型 Adobe Analytics 並設定 動作類型 to 傳送信標. 由於這被視為頁面檢視,請將預設追蹤設為 s.t()
.
儲存變更。此 已載入頁面 規則現在應具備下列設定:
cmp:show
事件。儲存所有變更並建置您的Launch程式庫,並提升至適當的環境。
現在, 已載入頁面 規則會傳送Analytics信標,則您應該可以使用Analytics Debugger查看Analytics追蹤變數。
開啟 WKND站點 在瀏覽器中。
按一下Debugger圖示 以開啟Experience Platform偵錯器。
確認Debugger將Launch屬性對應至 您的 開發環境,如先前和 主控台記錄 已勾選。
開啟Analytics功能表,並確認報表套裝已設為 您的 報表套裝。 「頁面名稱」也應填入:
向下捲動並展開 網路請求. 您應該能夠找到 evar 為 頁面範本:
返回瀏覽器,開啟開發人員主控台。 點進 輪播 頁面頂端。
在瀏覽器主控台中觀察主控台陳述式:
這是因為轉盤會觸發 cmp:show
事件 但 因為我們檢查了 元件資源類型,則不會引發任何事件。
如果您沒有看見任何主控台記錄,請確定 主控台記錄 在下方勾選 Launch 在Experience Platform偵錯器中。
導覽至文章頁面,如 西澳大利亞. 觀察「頁面名稱」和「範本類型」變更。
您只是使用事件導向的Adobe用戶端資料層和Experience Platform Launch,從AEM網站收集資料頁面資料,並將其傳送至Adobe Analytics。
查看下列教學課程,了解如何使用事件導向的Adobe用戶端資料層,以 追蹤Adobe Experience Manager網站上特定元件的點按次數.