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

瀏覽至 wknd首頁

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

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結構：

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"

以上資料詳細資料是根據 元件/容器專案結構描述. 新標籤規則會使用此結構描述。

導覽至Experience Platform並進入與AEM網站整合的標籤屬性。

導覽至 規則 區段，然後按一下 新增規則.

為規則命名 已點選的CTA.

按一下 活動 > 新增 以開啟 事件設定 精靈。

的 事件型別 欄位，選取 自訂程式碼.

按一下 開啟編輯器 在主面板中，輸入下列程式碼片段：

var componentClickedHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger Tag 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 Tag Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Tag Property 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() 函式是標籤屬性中的保留名稱，它 觸發器 規則。 此 event 物件會作為引數傳遞，而引數會由tag屬性中的另一個保留名稱公開。 標籤屬性中的資料元素現在可以使用程式碼片段（例如），參照各種屬性 event.component['someKey'].

儲存變更。

下一個在 動作 按一下 新增 以開啟 動作設定 精靈。

的 動作型別 欄位，選擇 自訂程式碼.

按一下 開啟編輯器 在主面板中，輸入下列程式碼片段：

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() 方法，且是觸發點按的元素。

儲存變更並執行 版本編號 將程式碼提升至 環境 用於您的AEM網站。

導覽至 WKND網站 並開啟開發人員工具以檢視主控台。 此外，請選取 保留記錄 核取方塊。

按一下其中一項 Teaser 或 按鈕 CTA按鈕以導覽至其他頁面。

在開發人員主控台中觀察 已點選的CTA 規則已引發：

導覽至Experience Platform並進入與AEM網站整合的標籤屬性。

導覽至 資料元素 區段並按一下 新增資料元素.

的 名稱 欄位，輸入 元件ID.

的 資料元素型別 欄位，選取 自訂程式碼.

按一下 開啟編輯器 按鈕，並在自訂程式碼編輯器中輸入下列內容：

if(event && event.path && event.path.includes('.')) {
    // split on the `.` to return just the component ID
    return event.path.split('.')[1];
}

儲存變更。

導覽至 資料元素 區段並按一下 新增資料元素.

的 名稱 欄位，輸入 元件標題.

的 資料元素型別 欄位，選取 自訂程式碼.

按一下 開啟編輯器 按鈕，並在自訂程式碼編輯器中輸入下列內容：

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

儲存變更。

在標籤屬性UI中，導覽至 已點選的CTA 規則先前已建立。

在 條件 按一下 新增 以開啟 條件設定 精靈。

的 條件型別 欄位，選取 自訂程式碼.

按一下 開啟編輯器 並在自訂程式碼編輯器中輸入下列內容：

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;

上述程式碼會先檢查資源型別是否來自 按鈕 或資源型別是否來自內的CTA Teaser.

儲存變更。

在 已點選的CTA 規則， 移除 此 核心 — 自訂程式碼 動作（主控台陳述式）：

在「動作」底下，按一下 新增 以建立動作。

設定 副檔名 輸入至 Adobe Analytics 並設定 動作型別 至 設定變數.

設定下列值 eVar， Prop、和 活動：

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

接下來，在「 」的右側新增一個額外動作 Adobe Analytics — 設定變數 點選 加 圖示：

設定 副檔名 輸入至 Adobe Analytics 並設定 動作型別 至 傳送信標.

在 追蹤 將選項按鈕設為 s.tl().

的 連結型別 欄位，選擇 自訂連結 和 連結名稱 將值設為： %Component Title%: CTA Clicked：

上述設定結合了資料元素中的動態變數 元件標題 和靜態字串 已點選的CTA.

儲存變更。 此 已點選的CTA 規則現在應具有下列設定：

• 1. 聆聽 cmp:click 事件。
• 2. 檢查事件是否由 按鈕 或 Teaser.
• 3. 設定Analytics變數以追蹤 元件ID as a eVar， prop，以及 事件.
• 4. 傳送Analytics追蹤連結信標(並 非 視為頁面檢視)。

儲存所有變更並建置您的標籤程式庫，升級至適當的環境。

開啟 WKND網站 在您的瀏覽器中。

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

確認Debugger將標籤屬性對應至 您的 開發環境，如先前所述，以及 主控台記錄 已勾選。

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

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

返回Experience PlatformDebugger，向下捲動並展開 網路要求 > 您的報表套裝. 您應該能夠找到 eVar， prop、和 事件 設定。

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

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

出現上述訊息是因為導覽元件確實觸發 cmp:click 事件 但是 因為 規則的條件 會檢查資源型別，而不會執行任何動作。