使用Adobe Analytics收集頁面資料

瞭解如何使用Adobe客戶端資料層的內置功能與核心元件<a1/AEM>收集Adobe Experience Manager Sites某頁的相關資料。 Experience Platform 啟動和 Adobe Analytics 擴充功能將用來建立規則，以傳送頁面資料至Adobe Analytics。

您將建立的

頁面資料追蹤

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

目標

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

必備條件

以下為必要項目：

Experience Platform LaunchProperty
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 除錯瀏覽器擴充功能。本教學課程中的螢幕擷取自Chrome瀏覽器。
（可選）啟AEM用Adobe客戶端資料層的站點。本教學課程將使用公開對應網站https://wknd.site/us/en.html，但歡迎您使用您自己的網站。

注意

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

WKND站點的交換機啟動環境

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

您不必設定環境AEM並安裝WKND代碼庫，而是可以使用Experience Platform調試器來switch將即時https://wknd.site/設定為您的啟動屬性。當然，如果您自己的站AEM點已啟用Adobe客戶端資料層，則可以使用它

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

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

WKND參考項目是使用核心元件構建的AEM，預設情況下啟用Adobe客戶端資料層。接著，驗證Adobe客戶端資料層是否已啟用。

導覽至https://wknd.site。
開啟瀏覽器的開發人員工具，並導覽至Console。運行以下命令：
```
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"

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

注意

看不到adobeDataLayer javascript物件？確保您的站點上已啟用Adobe客戶端資料層。

建立載入頁面的規則

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

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

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

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

注意

使用Adobe Experience Platform調試器將嵌入代碼切換到Development環境非常有用。
導覽至您的AEM網站並開啟開發人員工具以檢視主控台。重新整理頁面，您應該會看到主控台訊息已記錄：

建立資料元素

接著，建立數個資料元素，從Adobe用戶端資料層擷取不同的值。如前一練習中所述，我們可以直接透過自訂程式碼存取資料層的屬性。使用資料元素的好處是，可跨啟動規則重複使用這些元素。

從資料層公開的頁面架構之前叫出：

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

元件資源類型

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

注意

請記住，event物件已設為可用，且範圍以啟動中觸發Rule的事件為基礎。在規則中「資料元素」是referenced之前，不會設定「資料元素」的值。因此，在規則內使用此資料元素是安全的，例如在前一步驟中建立的頁面載入規則，但在其他上下文中使用則不安全。

頁面名稱

按一下添加資料元素。
對於名稱，輸入頁面名稱。
對於資料元素類型，選擇自定義代碼。

按一下開啟編輯器，然後在自定義代碼編輯器中輸入以下內容：

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並進入與網站整合的WebAEM屬性。
前往Extensions > Catalog
找到Adobe Analytics副檔名，然後按一下安裝
在資料庫管理 > 報表套裝下，輸入您要用於每個啟動環境的報表套裝ID。

注意

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

秘訣

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

新增條件至「載入頁面」規則

接著，更新頁面載入規則，以使用元件資源類型資料元素，確保只有當cmp:show事件用於Page時才會觸發規則。其他元件可以觸發cmp:show事件，例如，當投影片變更時，轉盤元件會觸發它。因此，為此規則新增條件很重要。

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

注意

您可在自訂程式碼函式中新增此條件，以監聽在教學課程之前建立的cmp:show事件。不過，在UI中新增它可讓需要變更規則的其他使用者看到更多內容。此外，我們還可使用我們的資料元素！
儲存變更。

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

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

在Page Loaded規則remove中Core - Custom Code動作（控制台語句）:
在「操作」(Actions)下，按一下「添加」(Add)以添加新操作。
將擴展類型設定為Adobe Analytics，並將操作類型設定為設定變數
在主面板中，選擇可用eVar，並設為「資料元素頁面範本」的值。使用「資料元素」圖示來選取「頁面範本」元素。
向下捲動，在Additional Settings下，將Page Name設為資料元素Page Name:

儲存變更。
接著，點選plus圖示，在Adobe Analytics-設定變數右側新增其他動作：
將擴展類型設定為Adobe Analytics，並將操作類型設定為發送信標。由於此視為頁面檢視，請將預設追蹤設定保留為s.t()。
儲存變更。載入的頁面規則現在應具備下列設定：
- 1. 聽聽活 cmp:show 動。
- 2. 檢查事件是否由頁面觸發。
- 3. 設定頁面名稱和頁面范本的 分析變數
- 4. 傳送分析頁面檢視信標
儲存所有變更並建立您的啟動程式庫，並升級至適當的環境。

驗證頁面檢視信標和分析呼叫

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

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

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

注意

如果您未看到任何控制台日誌，請確定在Experience Platform調試器中的Launch下選中了控制台日誌。
導覽至Western Australia之類的文章頁面。觀察頁面名稱和範本類型的變更。