使用Adobe Analytics收集頁面資料

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

您將建置的

頁面資料追蹤

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

目標

  1. 根據資料層變更,在Launch中建立事件導向規則
  2. 將頁面資料層屬性對應至Launch中的資料元素
  3. 收集頁面資料並透過頁面檢視信標傳送至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用戶端資料層,您就可以使用

  1. 登入Experience Platform Launch並建立Launch屬性(如果尚未登入)。

  2. 請確定已建立初始的Launch 程式庫,並升級至Launch environment

  3. 從您的程式庫已發佈到的環境中複製Launch內嵌程式碼。

    複製Launch內嵌程式碼

  4. 在您的瀏覽器中開啟新標籤,並導覽至https://wknd.site/

  5. 開啟Experience Platform偵錯器瀏覽器擴充功能

    Experience Platform偵錯器

  6. 導覽至​Launch > Configuration,並在​插入的內嵌程式碼​下方,將現有的Launch內嵌程式碼取代為從步驟3複製的​您的​內嵌程式碼。

    取代內嵌程式碼

  7. 在WKND頁簽上啟用​控制台日誌記錄​和​鎖定調試器

    主控台記錄

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

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

  1. 導覽至https://wknd.site

  2. 開啟瀏覽器的開發人員工具,並導覽至​主控台。 執行下列命令:

    adobeDataLayer.getState();
    

    這會傳回Adobe用戶端資料層的目前狀態。

    Adobe資料層狀態

  3. 展開回應並檢查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:titlexdm:languagexdm:template的標準屬性,將頁面資料傳送至Adobe Analytics。

    注意

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

建立頁面載入規則

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

  1. 導覽至Experience Platform Launch,並導覽至與AEM網站整合的Web屬性。

  2. 導覽至Launch UI中的​Rules​區段,然後按一下​建立新規則

    建立規則

  3. 將規則命名為​Page Loaded

  4. 按一下「事件 添加」以開啟「事件配置」嚮導。

  5. 在​事件類型​下,選擇​自訂代碼

    為規則命名並新增自訂程式碼事件

  6. 按一下主面板中的​開啟編輯器 ,然後輸入下列程式碼片段:

    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']

  7. 儲存變更。

  8. 下一步在​Actions​下,按一下​Add​以開啟​Action Configuration​精靈。

  9. 在「動作類型」下,選擇「自訂程式碼」。

    自訂程式碼動作類型

  10. 按一下主面板中的​開啟編輯器 ,然後輸入下列程式碼片段:

    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 衍生的目前頁面。回想一下資料層公開的頁面架構之前的內容,以查看現成可用的各種索引鍵。

  11. 儲存變更並在Launch中執行build,將程式碼推廣至AEM網站上使用的environment

    注意

    使用Adobe Experience Platform Debugger將內嵌程式碼切換至​開發​環境,會相當實用。

  12. 導覽至您的AEM網站,並開啟開發人員工具以檢視主控台。 重新整理頁面,您應該會看到主控台訊息已記錄:

    頁面載入的主控台訊息

建立資料元素

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

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

資料元素將對應至@typedc:titlexdm:template屬性。

元件資源類型

  1. 導覽至Experience Platform Launch,並導覽至與AEM網站整合的Web屬性。

  2. 導覽至​資料元素​區段,然後按一下​建立新資料元素

  3. 對於​名稱,輸入​元件資源類型

  4. 對於​資料元素類型,請選擇​自訂代碼

    元件資源類型

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

    if(event && event.component && event.component.hasOwnProperty('@type')) {
        return event.component['@type'];
    }
    

    儲存變更。

    注意

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

頁面名稱

  1. 按一下「新增資料元素」。

  2. 對於​名稱,輸入​頁面名稱

  3. 對於​資料元素類型,請選擇​自訂代碼

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

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

    儲存變更。

頁面範本

  1. 按一下「新增資料元素」。

  2. 對於​名稱,輸入​頁面範本

  3. 對於​資料元素類型,請選擇​自訂代碼

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

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

    儲存變更。

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

    規則中的資料元素

新增Analytics擴充功能

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

  1. 導覽至Experience Platform Launch,並導覽至與AEM網站整合的Web屬性。

  2. 前往​擴充功能 > 目錄

  3. 找到​Adobe Analytics​擴充功能,然後按一下​Install

    Adobe Analytics擴充功能

  4. 在「程式庫管理 > 報表套裝」下方,輸入您要用於每個Launch環境的報表套裝ID。

    輸入報表套裝ID

    注意

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

    秘訣

    建議您使用​為我管理程式庫選項​作為「程式庫管理」設定,因為這可讓AppMeasurement.js程式庫更容易保持最新。

  5. 核取方塊以啟用​使用Activity Map

    啟用使用Activity Map

  6. 在​一般 > 追蹤伺服器​下,輸入您的追蹤伺服器,例如tmd.sc.omtrdc.net。 如果您的網站支援https://,請輸入SSL追蹤伺服器

    輸入追蹤伺服器

  7. 按一下​儲存​以儲存變更。

新增條件至頁面載入規則

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

  1. 在Launch UI中,導覽至先前建立的​Page Loaded​規則。

  2. 在​Conditions​下,按一下​Add​以開啟​Condition Configuration​精靈。

  3. 對於​條件類型,選擇​值比較

  4. 將表單欄位中的第一個值設為%Component Resource Type%。 您可以使用資料元素圖示data-element圖示來選取​元件資源類型​資料元素。 將比較器設定為Equals

  5. 將第二個值設為wknd/components/page

    頁面載入規則的條件設定

    注意

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

  6. 儲存變更。

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

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

  1. 在​Page Loaded​規則​remove​中, Core - Custom Code​動作(主控台陳述式):

    移除自訂程式碼動作

  2. 在「動作」底下,按一下​Add​以新增動作。

  3. 將​Extension​類型設定為​Adobe Analytics,並將​Action Type​設定為​Set Variables

    將動作擴充功能設為Analytics設定變數

  4. 在主面板中,選取可用的​eVar,並設為資料元素​頁面範本​的值。 使用資料元素表徵圖資料元素表徵圖選擇​頁面模板​元素。

    設定為eVar頁面範本

  5. 向下捲動,在​Additional Settings​下,將​Page Name​設定為資料元素​Page Name:

    頁面名稱環境變數集

    儲存變更。

  6. 接下來,點選​加號​圖示,在​Adobe Analytics — 設定變數​的右側新增其他動作:

    新增其他Launch動作

  7. 將​Extension​類型設為​Adobe Analytics,並將​Action Type​設為​Send Beacon。 由於這被視為頁面檢視,請將預設追蹤設為​s.t()

    傳送信標Adobe Analytics動作

  8. 儲存變更。Page Loaded​規則現在應具備下列設定:

    最終啟動設定

    • 1. 聽取事 cmp:show 件。
    • 2. 檢查頁面是否觸發事件。
    • 3. 為頁面名稱和 頁面 範本設 定Analytics變數
    • 4. 傳送Analytics頁面檢視信標
  9. 儲存所有變更並建置您的Launch程式庫,並提升至適當的環境。

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

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

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

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

  3. 如先前所述,確認Debugger將Launch屬性對應至​您的​開發環境,且已勾選​主控台記錄

  4. 開啟Analytics功能表,並確認報表套裝已設為​您的​報表套裝。 「頁面名稱」也應填入:

    Analytics標籤除錯程式

  5. 向下捲動並展開​網路請求。 您應該能夠找到為​頁面範本​設定的​evar:

    Evar和頁面名稱集

  6. 返回瀏覽器,開啟開發人員主控台。 按一下頁面頂端的​轉盤

    點進轉盤頁面

  7. 在瀏覽器主控台中觀察主控台陳述式:

    不符合條件

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

    注意

    如果您沒有看見任何主控台記錄,請確定已在Experience Platform偵錯器的​Launch​下勾選​主控台記錄

  8. 導覽至Western Australia之類的文章頁面。 觀察「頁面名稱」和「範本類型」變更。

恭喜!

您只是使用事件導向的Adobe用戶端資料層和Experience Platform Launch,從AEM網站收集資料頁面資料,並將其傳送至Adobe Analytics。

後續步驟

查看下列教學課程,了解如何使用事件導向的Adobe用戶端資料層追蹤Adobe Experience Manager網站上特定元件的點按

本頁內容