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

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

您將建置的

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

建立追蹤點按次數的項目

目標

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

必備條件

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

Inspect按鈕和預告結構

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

  1. 導覽至https://wknd.site/us/en.html

  2. 開啟瀏覽器的開發人員工具，並導覽至​主控台。 執行下列命令：

    adobeDataLayer.getState();

    這會傳回Adobe用戶端資料層的目前狀態。

    透過瀏覽器主控台的資料層狀態

  3. 展開回應，並尋找以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事件。

  1. 導覽至Experience Platform Launch，並導覽至與AEM網站整合的Web屬性。

  2. 導覽至Launch UI中的​Rules​區段，然後按一下​Add Rule。

  3. 將規則命名為​CTA Clicked。

  4. 按一下「事件 > 新增」以開啟「事件配置」精靈。

  5. 在​事件類型​下，選擇​自訂代碼。

    將規則命名為「CTA已點按」並新增自訂程式碼事件

  6. 按一下主面板中的​開啟編輯器 ，然後輸入下列程式碼片段：

    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']。

  7. 儲存變更。

  8. 下一步在​Actions​下，按一下​Add​以開啟​Action Configuration​精靈。

  9. 在「動作類型」下，選擇「自訂程式碼」。

    自訂程式碼動作類型

  10. 按一下主面板中的​開啟編輯器 ，然後輸入下列程式碼片段：

    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 的目前狀態。

  11. 儲存變更並在Launch中執行build，將程式碼推廣至AEM網站上使用的environment。

    注意

    使用Adobe Experience Platform Debugger將內嵌程式碼切換至​開發​環境，會相當實用。

  12. 導覽至WKND Site，並開啟開發人員工具以檢視主控台。 選擇​保留日誌。

  13. 按一下​Teaser​或​Button CTA按鈕之一以導覽至其他頁面。

    要點按的CTA按鈕

  14. 在開發人員主控台中，觀察已引發​CTA Clicked​規則：

    已點按CTA按鈕

建立資料元素

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

元件ID

  1. 導覽至Experience Platform Launch，並導覽至與AEM網站整合的Web屬性。

  2. 導覽至​資料元素​區段，然後按一下​新增資料元素。

  3. 對於​名稱，輸入​元件ID。

  4. 對於​資料元素類型，請選擇​自訂代碼。

    元件ID資料元素表單

  5. 按一下「開啟編輯器」，然後在自訂程式碼編輯器中輸入下列內容：

    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​規則內使用此資料元素是安全的，但在其他內容中使用​則不安全。

元件標題

  1. 導覽至​資料元素​區段，然後按一下​新增資料元素。

  2. 對於​名稱，輸入​元件標題。

  3. 對於​資料元素類型，請選擇​自訂代碼。

  4. 按一下「開啟編輯器」，然後在自訂程式碼編輯器中輸入下列內容：

    if(event && event.component && event.component.hasOwnProperty('dc:title')) {
    return event.component['dc:title'];
}

    儲存變更。

新增條件至CTA已點按規則

接下來，更新​CTA Clicked​規則，以確保只有在為​Teaser​或​Button​觸發cmp:click事件時，才會觸發規則。 由於預告的CTA在資料層中被視為個別物件，因此務必檢查父項，以確認其是否來自預告。

  1. 在Launch UI中，導覽至先前建立的​CTA已點按​規則。

  2. 在​Conditions​下，按一下​Add​以開啟​Condition Configuration​精靈。

  3. 對於​條件類型，選擇​自訂代碼。

    CTA點按條件自訂程式碼

  4. 按一下「開啟編輯器」，然後在自訂程式碼編輯器中輸入下列內容：

    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。

  5. 儲存變更。

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

目前，CTA Clicked​規則只會輸出主控台陳述式。 接下來，使用資料元素和Analytics擴充功能，將Analytics變數設為​action。 我們也會設定其他動作，以觸發​追蹤連結，並將收集的資料傳送至Adobe Analytics。

  1. 在​CTA Clicked​規則​remove​中， Core - Custom Code​動作（主控台陳述式）:

    移除自訂程式碼動作

  2. 在「動作」底下，按一下​Add​以新增動作。

  3. 將​Extension​類型設定為​Adobe Analytics，並將​Action Type​設定為​Set Variables。

  4. 為​eVars、Props​和​Events​設定下列值：

    • evar8 - %Component ID%
    • prop8 - %Component ID%
    • event8

    設定eVarProp和事件

    注意

    此處使用%Component ID%，因為它會取得所點按CTA的唯一識別碼。 使用%Component ID%的潛在缺點是Analytics報表將包含button-2e6d32893a之類的值。 使用%Component Title%可提供更人性化的名稱，但值可能不是唯一的。

  5. 接下來，點選​加號​圖示，在​Adobe Analytics — 設定變數​的右側新增其他動作：

    新增其他Launch動作

  6. 將​Extension​類型設為​Adobe Analytics，並將​Action Type​設為​Send Beacon。

  7. 在​Tracking​下，將選項按鈕設為​s.tl()。

  8. 對於​連結類型，選擇​自訂連結，對於​連結名稱，將值設定為：%Component Title%: CTA Clicked:

    傳送連結信標的設定

    這會結合資料元素​元件標題​中的動態變數，以及靜態字串​CTA Clicked。

  9. 儲存變更。CTA Clicked​規則現在應具備下列設定：

    最終啟動設定

    • 1. 聽取事 cmp:click 件。
    • 2. 檢查事件是否由按鈕或預 ​​告 觸發。
    • 3. 將的Analytics變數設為，以 便 將元件ID設 為eVar 、prop​和 事件。
    • 4. 傳送Analytics追蹤連結信標(且請勿 ​​將其視為頁面檢視)。

  10. 儲存所有變更並建置您的Launch程式庫，並提升至適當的環境。

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

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

  1. 在瀏覽器中開啟WKND網站。

  2. 按一下Debugger圖示Experience Platform Debugger圖示以開啟Experience PlatformDebugger。

  3. 如先前所述，確認Debugger將Launch屬性對應至​您的​開發環境，且已勾選​主控台記錄。

  4. 開啟Analytics功能表，並確認報表套裝已設為​您的​報表套裝。

    Analytics標籤除錯程式

  5. 在瀏覽器中，按一下​Teaser​或​Button CTA按鈕之一以導覽至其他頁面。

    要點按的CTA按鈕

  6. 返回Experience Platform偵錯器，向下捲動並展開​網路請求 > 您的報表套裝。 您應該能夠找到​eVar、prop​和​event​集。

    點按時追蹤的Analytics事件、eVar和Prop

  7. 返回瀏覽器，開啟開發人員主控台。 導覽至網站頁尾，然後按一下其中一個導覽連結：

    按一下頁尾中的導覽連結

  8. 在瀏覽器主控台中，觀察規則「CTA已點按」的訊息​「自訂程式碼」不符合。

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

    注意

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

恭喜！

您只是使用事件導向的Adobe用戶端資料層和Experience Platform Launch，來追蹤Adobe Experience Manager網站上特定元件的點按次數。

本頁內容