使用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網站整合的標籤屬性。

導覽至標籤屬性UI中的​ 規則 ​區段，然後按一下​ 新增規則。

將規則​ 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物件傳遞為引數，而該引數又由標籤屬性中的另一個保留名稱公開。 標籤屬性中的資料元素現在可以使用程式碼片段（例如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 Clicked ​規則：

已按下

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

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

在​ 名稱 ​欄位中，輸入​ 元件識別碼。

針對​ 資料元素型別 ​欄位，選取​ 自訂程式碼。

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

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

儲存變更。

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

在​ Name ​欄位中，輸入​ 元件標題。

針對​ 資料元素型別 ​欄位，選取​ 自訂程式碼。

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

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;

上述程式碼會先檢查資源型別是否來自​ Button，或資源型別是否來自​ Teaser ​內的CTA。

儲存變更。

在​ CTA Clicked ​規則中，移除 核心 — 自訂程式碼 ​動作（主控台陳述式）：

在[動作]底下，按一下[新增] ​ ​以建立動作。

將​ 擴充功能 ​型別設定為​ Adobe Analytics，並將​ 動作型別 ​設定為​ 設定變數。

設定​ eVars、Props ​和​ Events ​的下列值：

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

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

將​ 擴充功能 ​型別設定為​ Adobe Analytics，並將​ 動作型別 ​設定為​ 傳送信標。

在​ 追蹤 ​底下，將選項按鈕設定為​ s.tl()。

對於​ 連結型別 ​欄位，請選擇​ 自訂連結，對於​ 連結名稱，將值設定為： %Component Title%: CTA Clicked：

傳送連結信標的

上述設定結合資料元素​ 元件標題 ​的動態變數與靜態字串​ 已點按。

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

• 1。 ​接聽cmp:click事件。
• 2。 ​檢查事件是否由​ 按鈕 ​或​ Teaser ​觸發。
• 3。 ​設定Analytics變數以追蹤​ 元件識別碼，作為​ eVar、prop ​和​ 事件。
• 4。 ​傳送Analytics追蹤連結信標（並​ 不會 ​將其視為頁面檢視）。

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

在瀏覽器中開啟WKND網站。

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

如先前所述，確認Debugger將標籤屬性對應至​ 您的 ​開發環境，並檢查​ 主控台記錄。

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

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

要按一下

返回Experience Platform偵錯工具，向下捲動並展開​ 網路要求 > 您的報表套裝。 您應該可以找到​ eVar、prop ​和​ 事件 ​集。

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

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

上述訊息是因為Navigation元件確實觸發cmp:click事件​ 但，因為規則🔗的條件會檢查資源型別，而不會採取任何動作。