使用Adobe Analytics追蹤點按的元件

使用事件驅動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事件在啟動中建立事件導向規則。
依元件資源類型篩選不同事件。
設定已點按的元件ID，並使用追蹤連結信標傳送事件Adobe Analytics。

必備條件

本教學課程是使用Adobe Analytics收集頁面資料的延續課程，並假設您有：

啟用Adobe Analytics擴展的啟動屬性
Adobe Analyticst/dev報表套裝ID和追蹤伺服器。請參閱以下檔案，瞭解如何建立新的報表套裝](https://docs.adobe.com/content/help/zh-Hant/analytics/admin/manage-report-suites/new-report-suite/new-report-suite.html)。[
Experience Platform 除錯瀏覽器擴充功能已設定，您的Launch屬性已載入 https://wknd.site/us/en. html或啟AEM用Adobe資料層的網站。

Inspect按鈕與摘要架構

在啟動中建立規則之前，請先檢閱按鈕和摘要](https://docs.adobe.com/content/help/zh-Hant/experience-manager-core-components/using/developing/data-layer/overview.html#item)的[架構，然後在資料層實作中加以檢查。

導覽至https://wknd.site/us/en.html
開啟瀏覽器的開發人員工具，並導覽至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中建立的規則將使用此架構。

建立CTA點按規則

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']的值與「檢視行程」類似。

元件ID

導覽至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點按規則

接著，更新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。

儲存變更。

設定Analytics變數並觸發追蹤連結信標

目前，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規則現在應具備下列設定：
- 1. 聽聽活 cmp:click 動。
- 2. 檢查事件是否由「按鈕」或「摘要」觸發。
- 3. 將Analytics變數設定為，以追蹤元件ID 為 eVar、 prop，以及事件Adobe。
- 4. 傳送Analytics追蹤連結信標(且不要將其視為頁面檢視)。
儲存所有變更並建立您的啟動程式庫，並升級至適當的環境。

驗證追蹤連結信標和分析呼叫

現在，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下選中了控制台日誌。