使用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. 為​eVarsProps​和​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偵錯器,向下捲動並展開​網路請求 > 您的報表套裝。 您應該能夠找到​eVarprop​和​event​集。

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

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

    按一下頁尾中的導覽連結

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

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

    注意

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

恭喜!

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

本頁內容