使用事件驅動Adobe客戶端資料層與核心元件<a1/AEM>來跟蹤Adobe Experience Manager站點上特定元件的按一下。 瞭解如何使用Experience Platform Launch中的規則來監聽點按事件、依元件篩選,以及使用追蹤連結信標將資料傳送至Adobe Analytics。
WKND行銷團隊想瞭解哪些「行動呼籲(CTA)」按鈕在首頁上表現最佳。 在本教學課程中,我們將在Experience Platform Launch中新增一個規則,監聽來自Teaser和Button元件的cmp:click
事件,並將元件ID和新事件與追蹤連結信標一起傳送至Adobe Analytics。
cmp:click
事件在啟動中建立事件導向規則。本教學課程是使用Adobe Analytics收集頁面資料的延續課程,並假設您有:
在啟動中建立規則之前,請先檢閱按鈕和摘要](https://docs.adobe.com/content/help/zh-Hant/experience-manager-core-components/using/developing/data-layer/overview.html#item)的[架構,然後在資料層實作中加以檢查。
開啟瀏覽器的開發人員工具,並導覽至Console。 運行以下命令:
adobeDataLayer.getState();
這會傳回Adobe用戶端資料層的目前狀態。
展開響應並查找前置詞為button-
和teaser-xyz-cta
條目的條目。 您應看到如下的資料結構:
按鈕結構:
button-2e6d32893a:
@type: "wknd/components/button"
dc:title: "View All"
parentId: "page-2eee4f8914"
repo:modifyDate: "2020-07-11T22:17:55Z"
xdm:linkURL: "/content/wknd/us/en/magazine.html"
摘要架構:
teaser-da32481ec8-cta-adf3c09db9:
@type: "wknd/components/teaser/cta"
dc:title: "Surf's Up"
parentId: "teaser-da32481ec8"
xdm:linkURL: "/content/wknd/us/en/magazine/san-diego-surf.html"
這些是以元件/容器項目結構為基礎。 我們將在Launch中建立的規則將使用此架構。
Adobe客戶端資料層是事件驅動的資料層。 當任何核心元件被點按時,cmp:click
事件會透過資料層傳送。 接著建立規則以監聽cmp:click
事件。
導覽至Experience Platform Launch並進入與網站整合的WebAEM屬性。
導覽至「啟動UI」中的「規則」區段,然後按一下「新增規則」。
將規則命名為CTA Clicked。
按一下事件 > 添加以開啟事件配置嚮導。
在事件類型下,選擇自訂代碼。
按一下主面板中的開啟編輯器,然後輸入下列程式碼片段:
var componentClickedHandler = 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:click 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:click into the data layer
window.adobeDataLayer.push(function (dl) {
//add event listener for `cmp:click` and callback to the `componentClickedHandler` function
dl.addEventListener("cmp:click", componentClickedHandler);
});
上述程式碼片段將透過將函式推送至資料層來新增事件偵聽器。 觸發cmp:click
事件時,會呼叫componentClickedHandler
函式。 在此函式中,添加一些例行性檢查,並使用觸發事件的元件的資料層的最新狀態構造新的event
對象。
在呼叫trigger(event)
之後。 trigger()
是Launch中的保留名稱,將「觸發」啟動規則。我們將event
物件傳遞為參數,而此參數將會在名為event
的Launch中以另一個保留名稱公開。 Launch中的資料元素現在可以參照各種屬性,例如:event.component['someKey']
。
儲存變更。
下一步,在Actions下,按一下Add以開啟Action Configuration嚮導。
在「動作類型」下,選擇「自訂代碼」。
按一下主面板中的開啟編輯器,然後輸入下列程式碼片段:
console.debug("Component Clicked");
console.debug("Component Path: " + event.path);
console.debug("Component type: " + event.component['@type']);
console.debug("Component text: " + event.component['dc:title']);
event
物件是從自訂事件中呼叫的trigger()
方法傳遞。 component
是從觸發點按的資料層衍生的元件 getState
目前狀態。
儲存變更並在Launch中執行build,將程式碼提升至您網站上使用的環境<a3/AEM>。
使用Adobe Experience Platform調試器將嵌入代碼切換到Development環境非常有用。
導覽至WKND網站,並開啟開發人員工具以檢視主控台。 選擇保留日誌。
按一下Teaser或Button CTA按鈕之一,以導覽至另一頁。
在開發人員主控台中,觀察CTA Clicked規則已引發:
接著建立資料元素,以擷取已點按的元件ID和標題。 回想一下,在上一次練習中,event.path
的輸出與component.button-b6562c963d
類似,而event.component['dc:title']
的值與「檢視行程」類似。
導覽至Experience Platform Launch並進入與網站整合的WebAEM屬性。
導覽至資料元素區段,然後按一下新增資料元素。
對於名稱,輸入元件ID。
對於資料元素類型,選擇自定義代碼。
按一下開啟編輯器,然後在自定義代碼編輯器中輸入以下內容:
if(event && event.path && event.path.includes('.')) {
// split on the `.` to return just the component ID
return event.path.split('.')[1];
}
儲存變更。
請記住,event
物件已設為可用,且範圍以啟動中觸發Rule的事件為基礎。 在規則中「資料元素」是referenced之前,不會設定「資料元素」的值。 因此,在規則內使用此「資料元素」是安全的,例如在上一練習中建立的CTA Clicked規則,但在其他上下文中使用則不安全。
導覽至資料元素區段,然後按一下新增資料元素。
對於名稱,輸入元件標題。
對於資料元素類型,選擇自定義代碼。
按一下開啟編輯器,然後在自定義代碼編輯器中輸入以下內容:
if(event && event.component && event.component.hasOwnProperty('dc:title')) {
return event.component['dc:title'];
}
儲存變更。
接著,更新CTA Clicked規則,以確保只有在Teaser或Button引發cmp:click
事件時才觸發規則。 由於摘要的CTA在資料層中被視為個別物件,因此務必檢查父項以確認摘要是否來自摘要。
在啟動UI中,導覽至先前建立的CTA Clicked規則。
在Conditions下,按一下Add以開啟Condition Configuration嚮導。
對於條件類型,選擇自定義代碼。
按一下開啟編輯器,然後在自定義代碼編輯器中輸入以下內容:
if(event && event.component && event.component.hasOwnProperty('@type')) {
// console.log("Event Type: " + event.component['@type']);
//Check for Button Type OR Teaser CTA type
if(event.component['@type'] === 'wknd/components/button' ||
event.component['@type'] === 'wknd/components/teaser/cta') {
return true;
}
}
// none of the conditions are met, return false
return false;
上述程式碼會先檢查資源類型是否來自Button,然後檢查資源類型是否來自Teaser內的CTA。
儲存變更。
目前,CTA Clicked規則只會輸出主控台陳述式。 接著,使用資料元素和Analytics擴充功能,將Analytics變數設為action。 我們也會設定其他動作來觸發追蹤連結,並將收集的資料傳送至Adobe Analytics。
在CTA Clicked規則remove中核心——自訂代碼動作(控制台語句):
在「操作」(Actions)下,按一下「添加」(Add)以添加新操作。
將擴展類型設定為Adobe Analytics,並將操作類型設定為設定變數。
為eVars、Props和Events設定下列值:
evar8
- %Component ID%
prop8
- %Component ID%
event8
此處使用%Component ID%
,因為它會為所點按的CTA取得唯一識別碼。 使用%Component ID%
的潛在缺點是,Analytics報表將包含button-2e6d32893a
等值。 使用%Component Title%
會提供更人性化的名稱,但值可能不是唯一的。
接著,點選plus圖示,在Adobe Analytics-設定變數右側新增其他動作:
將擴展類型設定為Adobe Analytics,並將操作類型設定為發送信標。
在Tracking下,將選項按鈕設為s.tl()
。
對於連結類型,選擇自定義連結,對於連結名稱,將值設定為:%Component Title%: CTA Clicked
:
這會結合資料元素元件標題中的動態變數,以及靜態字串CTA Clicked。
儲存變更。CTA Clicked規則現在應具備下列設定:
cmp:click
動。儲存所有變更並建立您的啟動程式庫,並升級至適當的環境。
現在,CTA Clicked規則會傳送Analytics信標,您應該可以使用Experience Platform偵錯器來查看Analytics追蹤變數。
在瀏覽器中開啟WKND站點。
按一下「除錯程式」圖示以開啟「Experience Platform除錯程式」。
請確定除錯程式正將Launch屬性對應至您的開發環境,如先前所述,且已勾選控制台記錄。
開啟「Analytics」功能表,並確認報表套裝已設為您的報表套裝。
在瀏覽器中,按一下Teaser或Button CTA按鈕之一,以導覽至另一頁。
返回Experience Platform調試器,並向下滾動並展開網路請求 > 您的報表套裝。 您應該能夠找到eVar、prop和事件集。
返回瀏覽器並開啟開發人員主控台。 導覽至網站的頁尾,然後按一下其中一個導覽連結:
在瀏覽器主控台中,未符合規則"CTA Clicked"的訊息"Custom Code"(自訂代碼)。
這是因為導覽元件確實會觸發cmp:click
事件但,因為我們針對資源類型檢查了該事件,所以不會執行任何動作。
如果您未看到任何控制台日誌,請確定在Experience Platform調試器中的Launch下選中了控制台日誌。
您剛才使用事件導向的Adobe用戶端資料層和Experience Platform Launch來追蹤Adobe Experience Manager網站上特定元件的點按次數。