使用Adobe Analytics收集頁面資料

了解如何搭配AEM核心元件🔗使用Adobe用戶端資料層的內建功能，收集Adobe Experience Manager Sites中某頁面的相關資料。 Experience Platform Launch和Adobe Analytics 擴充功能將用來建立規則，以將頁面資料傳送至Adobe Analytics。

您將建置的

頁面資料追蹤

在本教學課程中，您將根據來自Adobe用戶端資料層的事件觸發Launch規則，新增應觸發規則的條件，並將AEM頁面的頁面名稱和頁面範本傳送至Adobe Analytics。

目標

根據資料層變更，在Launch中建立事件導向規則
將頁面資料層屬性對應至Launch中的資料元素
收集頁面資料並透過頁面檢視信標傳送至Adobe Analytics

必備條件

需要下列項目：

Experience Platform LaunchProperty
Adobe Analyticstest/dev報表套裝ID和追蹤伺服器。請參閱下列檔案，了解如何建立新的報表套裝🔗。
Experience Platform Debuggerbrowser擴充功能。本教學課程中的螢幕擷取畫面是從Chrome瀏覽器擷取。
（選用）啟用Adobe用戶端資料層的AEM網站。本教學課程將使用公開的網站https://wknd.site/us/en.html，但歡迎您使用自己的網站。

注意

需要整合Launch和您的AEM網站的協助嗎？請觀看此影片系列。

為WKND站點切換啟動環境

https://wknd.site 是以開放原始碼專案為基礎所建置的公開網站，專為AEM實作提供參考和 🔗 教學課程。

您不必設定AEM環境並安裝WKND程式碼基底，而是可以使用Experience Platform偵錯器來switch即時https://wknd.site/偵錯至您的 Launch屬性。當然，如果您自己的AEM網站已啟用Adobe用戶端資料層，您就可以使用

登入Experience Platform Launch並建立Launch屬性（如果尚未登入）。
請確定已建立初始的Launch 程式庫，並升級至Launch environment。
從您的程式庫已發佈到的環境中複製Launch內嵌程式碼。
在您的瀏覽器中開啟新標籤，並導覽至https://wknd.site/
開啟Experience Platform偵錯器瀏覽器擴充功能
導覽至Launch > Configuration，並在插入的內嵌程式碼下方，將現有的Launch內嵌程式碼取代為從步驟3複製的您的內嵌程式碼。
在WKND頁簽上啟用控制台日誌記錄和鎖定調試器。

驗證WKND站點上的Adobe客戶端資料層

WKND參考專案是使用AEM核心元件建置，預設會啟用Adobe用戶端資料層。接下來，驗證Adobe客戶端資料層是否已啟用。

導覽至https://wknd.site。
開啟瀏覽器的開發人員工具，並導覽至主控台。執行下列命令：
```
adobeDataLayer.getState();
```
這會傳回Adobe用戶端資料層的目前狀態。

展開回應並檢查page項目。您應會看到下列資料結構：

page-2eee4f8914:
    @type: "wknd/components/page"
    dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
    dc:title: "WKND Adventures and Travel"
    repo:modifyDate: "2020-08-31T21:02:21Z"
    repo:path: "/content/wknd/us/en.html"
    xdm:language: "en-US"
    xdm:tags: ["Attract"]
    xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"

我們將使用衍生自資料層的頁面結構、dc:title、xdm:language和xdm:template的標準屬性，將頁面資料傳送至Adobe Analytics。

注意

沒有看見adobeDataLayer javascript物件？請確定您的網站上已啟用Adobe用戶端資料層。

建立頁面載入規則

Adobe客戶端資料層是event驅動的資料層。載入AEM Page資料層時，會觸發事件cmp:show。建立將根據cmp:show事件觸發的規則。

導覽至Experience Platform Launch，並導覽至與AEM網站整合的Web屬性。
導覽至Launch UI中的Rules區段，然後按一下建立新規則。
將規則命名為Page Loaded。
按一下「事件添加」以開啟「事件配置」嚮導。
在事件類型下，選擇自訂代碼。

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

var pageShownEventHandler = 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:show 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:show into the data layer
window.adobeDataLayer.push(function (dl) {
   //add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
   dl.addEventListener("cmp:show", pageShownEventHandler);
});

上述程式碼片段會透過推送函式至資料層來新增事件監聽器。觸發cmp:show事件時，會呼叫pageShownEventHandler函式。在此函式中，會新增一些健全性檢查，並針對觸發事件的元件，使用資料層🔗的最新狀態來建構新的event。

之後呼叫trigger(event)。 trigger() 是Launch中的保留名稱，且將「觸發」Launch規則。我們會以參數形式傳遞event物件，而此參數將會由Launch中名為event的其他保留名稱公開。 Launch中的資料元素現在可以參照各種屬性，如下所示：event.component['someKey']。

儲存變更。
下一步在Actions下，按一下Add以開啟Action Configuration精靈。
在「動作類型」下，選擇「自訂程式碼」。
按一下主面板中的開啟編輯器 ，然後輸入下列程式碼片段：
```
console.debug("Page Loaded ");
console.debug("Page name: " + event.component['dc:title']);
console.debug("Page type: " + event.component['@type']);
console.debug("Page template: " + event.component['xdm:template']);
```
event物件是從自訂事件中呼叫的trigger()方法傳遞。 component 是從自訂事件中的資料層 getState 衍生的目前頁面。回想一下資料層公開的頁面架構之前的內容，以查看現成可用的各種索引鍵。
儲存變更並在Launch中執行build，將程式碼推廣至AEM網站上使用的environment。

注意

使用Adobe Experience Platform Debugger將內嵌程式碼切換至開發環境，會相當實用。
導覽至您的AEM網站，並開啟開發人員工具以檢視主控台。重新整理頁面，您應該會看到主控台訊息已記錄：

建立資料元素

接著，建立數個資料元素，以從Adobe用戶端資料層擷取不同值。如先前練習所示，我們已看到可透過自訂程式碼直接存取資料層的屬性。使用資料元素的好處是，可在各個Launch規則中重複使用資料元素。

從資料層公開的頁面架構前面回想：

資料元素將對應至@type、dc:title和xdm:template屬性。

元件資源類型

導覽至Experience Platform Launch，並導覽至與AEM網站整合的Web屬性。
導覽至資料元素區段，然後按一下建立新資料元素。
對於名稱，輸入元件資源類型。
對於資料元素類型，請選擇自訂代碼。
按一下「開啟編輯器」，然後在自訂程式碼編輯器中輸入下列內容：
```
if(event && event.component && event.component.hasOwnProperty('@type')) {
    return event.component['@type'];
}
```
儲存變更。

注意

回想一下，event物件已可供使用，且範圍是根據Launch中觸發Rule的事件而定。在規則內的資料元素為referenced之前，資料元素的值不會設定。因此，在規則內使用此資料元素是安全的，例如在前一個步驟中建立的Page Loaded規則，但在其他內容中使用則不安全。

頁面名稱

按一下「新增資料元素」。
對於名稱，輸入頁面名稱。
對於資料元素類型，請選擇自訂代碼。

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

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

儲存變更。

頁面範本

按一下「新增資料元素」。
對於名稱，輸入頁面範本。
對於資料元素類型，請選擇自訂代碼。

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

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

儲存變更。

您現在應該有三個資料元素作為規則的一部分：

新增Analytics擴充功能

接下來，將Analytics擴充功能新增至您的Launch屬性。我們需要將這些資料傳送到某處！

導覽至Experience Platform Launch，並導覽至與AEM網站整合的Web屬性。
前往擴充功能 > 目錄
找到Adobe Analytics擴充功能，然後按一下Install
在「程式庫管理 > 報表套裝」下方，輸入您要用於每個Launch環境的報表套裝ID。

注意

在本教學課程中，您可以針對所有環境使用一個報表套裝，但在實際情況中，您會想要使用個別的報表套裝，如下圖所示

秘訣

建議您使用為我管理程式庫選項作為「程式庫管理」設定，因為這可讓AppMeasurement.js程式庫更容易保持最新。
核取方塊以啟用使用Activity Map。
在一般 > 追蹤伺服器下，輸入您的追蹤伺服器，例如tmd.sc.omtrdc.net。如果您的網站支援https://，請輸入SSL追蹤伺服器
按一下儲存以儲存變更。

新增條件至頁面載入規則

接下來，更新Page Loaded規則，以使用元件資源類型資料元素，確保只有在cmp:show事件為Page時才會觸發規則。其他元件可以引發cmp:show事件，例如當投影片變更時，輪播元件就會引發。因此，請務必為此規則新增條件。

在Launch UI中，導覽至先前建立的Page Loaded規則。
在Conditions下，按一下Add以開啟Condition Configuration精靈。
對於條件類型，選擇值比較。
將表單欄位中的第一個值設為%Component Resource Type%。您可以使用資料元素圖示來選取元件資源類型資料元素。將比較器設定為Equals。
將第二個值設為wknd/components/page。

注意

可以在自訂程式碼函式中新增此條件，該函式會監聽先前在教學課程中建立的cmp:show事件。不過，在UI中新增該規則，可讓可能需要變更規則的其他使用者更清楚了解。此外，我們還可以使用資料元素！
儲存變更。

設定Analytics變數並觸發頁面檢視信標

目前，Page Loaded規則只會輸出主控台陳述式。接下來，使用資料元素和Analytics擴充功能，將Analytics變數設為Page Loaded規則中的action。我們也會設定其他動作，以觸發頁面檢視信標，並將收集的資料傳送至Adobe Analytics。

在Page Loaded規則remove中， Core - Custom Code動作（主控台陳述式）:
在「動作」底下，按一下Add以新增動作。
將Extension類型設定為Adobe Analytics，並將Action Type設定為Set Variables
在主面板中，選取可用的eVar，並設為資料元素頁面範本的值。使用資料元素表徵圖選擇頁面模板元素。
向下捲動，在Additional Settings下，將Page Name設定為資料元素Page Name:

儲存變更。
接下來，點選加號圖示，在Adobe Analytics — 設定變數的右側新增其他動作：
將Extension類型設為Adobe Analytics，並將Action Type設為Send Beacon。由於這被視為頁面檢視，請將預設追蹤設為s.t()。
儲存變更。Page Loaded規則現在應具備下列設定：
- 1. 聽取事 cmp:show 件。
- 2. 檢查頁面是否觸發事件。
- 3. 為頁面名稱和頁面範本設 定Analytics變數
- 4. 傳送Analytics頁面檢視信標
儲存所有變更並建置您的Launch程式庫，並提升至適當的環境。

驗證頁面檢視信標和Analytics呼叫

現在，頁面載入規則會傳送Analytics信標，您應該可以使用Experience Platform偵錯器查看Analytics追蹤變數。

在瀏覽器中開啟WKND網站。
按一下Debugger圖示以開啟Experience PlatformDebugger。
如先前所述，確認Debugger將Launch屬性對應至您的開發環境，且已勾選主控台記錄。
開啟Analytics功能表，並確認報表套裝已設為您的報表套裝。「頁面名稱」也應填入：
向下捲動並展開網路請求。您應該能夠找到為頁面範本設定的evar:
返回瀏覽器，開啟開發人員主控台。按一下頁面頂端的轉盤。
在瀏覽器主控台中觀察主控台陳述式：

這是因為轉盤確實會觸發cmp:show事件，但，因為我們檢查了元件資源類型，所以沒有觸發任何事件。

注意

如果您沒有看見任何主控台記錄，請確定已在Experience Platform偵錯器的Launch下勾選主控台記錄。
導覽至Western Australia之類的文章頁面。觀察「頁面名稱」和「範本類型」變更。