使用Adobe Analytics追蹤已點按的元件

使用事件導向的Adobe用戶端資料層搭配AEM核心元件來追蹤Adobe Experience Manager網站上特定元件的點按次數。了解如何使用Experience Platform Launch中的規則來監聽點按事件、依元件篩選資料，以及透過追蹤連結信標將資料傳送至Adobe Analytics。

您將建置的

WKND行銷團隊想要了解哪個動作呼叫(CTA)按鈕在首頁上表現最佳。在本教學課程中，我們將在Experience Platform Launch中新增規則，監聽來自Teaser和Button元件的cmp:click事件，並將元件ID和新事件連同追蹤連結信標一併傳送至Adobe Analytics。

建立追蹤點按次數的項目

目標

根據cmp:click事件在Launch中建立事件導向規則。
依元件資源類型篩選不同的事件。
設定已點按的元件id，並傳送具有追蹤連結信標的事件Adobe Analytics。

必備條件

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

啟用Adobe Analytics擴充功能的Launch屬性
Adobe Analyticstest/dev報表套裝ID和追蹤伺服器。請參閱下列檔案，了解如何建立新的報表套裝🔗。
Experience Platform Debuggerbrowser擴充功能已設定您的Launch屬性，載入https://wknd.site/us/en. html或AEM網站，並啟用Adobe資料層。

Inspect按鈕和預告結構

在Launch中建立規則之前，請先檢閱按鈕和Teaser🔗的架構，並在資料層實作中檢查它們。

導覽至https://wknd.site/us/en.html
開啟瀏覽器的開發人員工具，並導覽至主控台。執行下列命令：
```
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客戶端資料層是event驅動的資料層。按一下任何核心元件時， cmp:click事件會透過資料層發送。接下來，建立規則以監聽cmp:click事件。

導覽至Experience Platform Launch，並導覽至與AEM網站整合的Web屬性。
導覽至Launch UI中的Rules區段，然後按一下Add Rule。
將規則命名為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中的保留名稱，且將「觸發」Launch規則。我們會以參數形式傳遞event物件，而此參數將會由Launch中名為event的其他保留名稱公開。 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，將程式碼推廣至AEM網站上使用的environment。

注意

使用Adobe Experience Platform Debugger將內嵌程式碼切換至開發環境，會相當實用。
導覽至WKND Site，並開啟開發人員工具以檢視主控台。選擇保留日誌。
按一下Teaser或Button CTA按鈕之一以導覽至其他頁面。
在開發人員主控台中，觀察已引發CTA Clicked規則：

建立資料元素

接著建立資料元素，以擷取已點按的元件ID和標題。回想一下，在上一次練習中，event.path的輸出與component.button-b6562c963d類似，而event.component['dc:title']的值與「檢視行程」類似。

元件ID

導覽至Experience Platform Launch，並導覽至與AEM網站整合的Web屬性。
導覽至資料元素區段，然後按一下新增資料元素。
對於名稱，輸入元件ID。
對於資料元素類型，請選擇自訂代碼。
按一下「開啟編輯器」，然後在自訂程式碼編輯器中輸入下列內容：
```
if(event && event.path && event.path.includes('.')) {
    // split on the `.` to return just the component ID
    return event.path.split('.')[1];
}
```
儲存變更。

注意

回想一下，event物件已可供使用，且範圍是根據Launch中觸發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在資料層中被視為個別物件，因此請務必檢查父項，確認其是否來自預告。

在Launch UI中，導覽至先前建立的CTA已點按規則。
在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中， Core - Custom Code動作（主控台陳述式）:
在「動作」底下，按一下Add以新增動作。
將Extension類型設定為Adobe Analytics，並將Action Type設定為Set Variables。
為eVars、Props和Events設定下列值：
- evar8 - %Component ID%
- prop8 - %Component ID%
- event8
注意

此處使用%Component ID%，因為它會取得所點按CTA的唯一識別碼。使用%Component ID%的潛在缺點是Analytics報表將包含button-2e6d32893a之類的值。使用%Component Title%可提供更人性化的名稱，但值可能不是唯一的。
接下來，點選加號圖示，在Adobe Analytics — 設定變數的右側新增其他動作：
將Extension類型設為Adobe Analytics，並將Action Type設為Send Beacon。
在Tracking下，將選項按鈕設為s.tl()。
對於連結類型，選擇自訂連結，對於連結名稱，將值設定為：%Component Title%: CTA Clicked:

這會結合資料元素元件標題中的動態變數，以及靜態字串CTA Clicked。
儲存變更。CTA Clicked規則現在應具備下列設定：
- 1. 聽取事 cmp:click 件。
- 2. 檢查事件是否由按鈕或預告觸發。
- 3. 將的Analytics變數設為，以便將元件ID設 為eVar 、prop和事件。
- 4. 傳送Analytics追蹤連結信標(且請勿將其視為頁面檢視)。
儲存所有變更並建置您的Launch程式庫，並提升至適當的環境。

驗證追蹤連結信標和Analytics呼叫

現在，CTA Clicked規則傳送了Analytics信標，您應該可以使用Analytics Debugger查看Analytics追蹤變數。

在瀏覽器中開啟WKND網站。
按一下Debugger圖示以開啟Experience PlatformDebugger。
如先前所述，確認Debugger將Launch屬性對應至您的開發環境，且已勾選主控台記錄。
開啟Analytics功能表，並確認報表套裝已設為您的報表套裝。
在瀏覽器中，按一下Teaser或Button CTA按鈕之一以導覽至其他頁面。
返回Experience Platform偵錯器，向下捲動並展開網路請求 > 您的報表套裝。您應該能夠找到eVar、prop和event集。
返回瀏覽器，開啟開發人員主控台。導覽至網站頁尾，然後按一下其中一個導覽連結：
在瀏覽器主控台中，觀察規則「CTA已點按」的訊息「自訂程式碼」不符合。

這是因為導覽元件確實會觸發cmp:click事件但，因為我們會根據資源類型檢查，不會採取任何動作。

注意

如果您沒有看見任何主控台記錄，請確定已在Experience Platform偵錯器的Launch下勾選主控台記錄。