使用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。

您將建立的追蹤點按次數

目標

  1. 根據cmp:click事件在啟動中建立事件導向規則。
  2. 依元件資源類型篩選不同事件。
  3. 設定已點按的元件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)的[架構,然後在資料層實作中加以檢查。

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

  2. 開啟瀏覽器的開發人員工具,並導覽至​Console。 運行以下命令:

    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客戶端資料層是​事件​驅動的資料層。 當任何核心元件被點按時,cmp:click事件會透過資料層傳送。 接著建立規則以監聽cmp:click事件。

  1. 導覽至Experience Platform Launch並進入與網站整合的WebAEM屬性。

  2. 導覽至「啟動UI」中的「規則」區段,然後按一下「新增規則​」。

  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中的保留名稱,將「觸發」啟動規則。我們將event物件傳遞為參數,而此參數將會在名為event的Launch中以另一個保留名稱公開。 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,將程式碼提升至您網站上使用的環境<a3/AEM>。

    注意

    使用Adobe Experience Platform調試器將嵌入代碼切換到​Development​環境非常有用。

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

  13. 按一下​Teaser​或​Button CTA按鈕之一,以導覽至另一頁。

    CTA按鈕,以按一下

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

    已點按CTA按鈕

建立資料元素

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

元件ID

  1. 導覽至Experience Platform Launch並進入與網站整合的WebAEM屬性。

  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物件已設為可用,且範圍以啟動中觸發​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. 在啟動UI中,導覽至先前建立的​CTA Clicked​規則。

  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​中​核心——自訂代碼​動作(控制台語句):

    移除自訂程式碼動作

  2. 在「操作」(Actions)下,按一下「添加」(Add)以添加新操作。

  3. 將​擴展​類型設定為​Adobe Analytics,並將​操作類型​設定為​設定變數

  4. 為​eVarsProps​和​Events​設定下列值:

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

    設定eVarProp和事件

    注意

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

  5. 接著,點選​plus​圖示,在​Adobe Analytics-設定變數​右側新增其他動作:

    新增其他啟動動作

  6. 將​擴展​類型設定為​Adobe Analytics,並將​操作類型​設定為​發送信標

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

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

    傳送連結信標的設定

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

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

    最終啟動設定

    • 1. 聽聽活 cmp:click 動。
    • 2. 檢查事件是否由「按鈕」或「摘 ​要」 觸發
    • 3. 將Analytics變數設定為,以追蹤 件ID eVarprop,以及事件Adobe。
    • 4. 傳送Analytics追蹤連結信標(且不 ​要將其視為頁面檢視)。
  10. 儲存所有變更並建立您的啟動程式庫,並升級至適當的環境。

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

現在,CTA Clicked​規則會傳送Analytics信標,您應該可以使用Experience Platform偵錯器來查看Analytics追蹤變數。

  1. 在瀏覽器中開啟WKND站點

  2. 按一下「除錯程式」圖示「體驗平台除錯程式」圖示以開啟「Experience Platform除錯程式」。

  3. 請確定除錯程式正將Launch屬性對應至​您的​開發環境,如先前所述,且已勾選​控制台記錄

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

    Analytics標籤除錯程式

  5. 在瀏覽器中,按一下​Teaser​或​Button CTA按鈕之一,以導覽至另一頁。

    CTA按鈕,以按一下

  6. 返回Experience Platform調試器,並向下滾動並展開​網路請求 > 您的報表套裝。 您應該能夠找到​eVarprop​和​事件​集。

    點按時追蹤的Analytics事件、evar和prop

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

    按一下頁尾中的「導覽」連結

  8. 在瀏覽器主控台中,未符合規則"CTA Clicked"的訊息​"Custom Code"(自訂代碼)

    這是因為導覽元件確實會觸發cmp:click事件​,因為我們針對資源類型檢查了該事件,所以不會執行任何動作。

    注意

    如果您未看到任何控制台日誌,請確定在Experience Platform調試器中的​Launch​下選中了​控制台日誌

恭喜!

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

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now