使用Adobe Analytics收集頁面資料

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

您將建立的

頁面資料追蹤

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

目標

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

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

  2. 確保已建立初始的啟動並升級到啟動環境

  3. 從您的資料庫已發佈至的環境中複製啟動內嵌代碼。

    複製啟動內嵌代碼

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

  5. 開啟Experience Platform除錯程式瀏覽器擴充功能

    Experience Platform除錯程式

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

    取代內嵌代碼

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

    控制台記錄

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

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

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

  2. 開啟瀏覽器的開發人員工具,並導覽至​Console。 運行以下命令:

    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"
    

    我們將使用從資料層的Page架構dc:titlexdm:languagexdm:template衍生的標準屬性,將頁面資料傳送至Adobe Analytics。

    注意

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

建立載入頁面的規則

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

  1. 導覽至Experience Platform Launch並進入與網站整合的WebAEM屬性。

  2. 導覽至「啟動UI」中的「規則」區段,然後按一下「建立新規則​」。

    建立規則

  3. 將規則命名為​已載入頁面

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

    注意

    使用Adobe Experience Platform調試器將嵌入代碼切換到​Development​環境非常有用。

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

    頁面載入的主控台訊息

建立資料元素

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

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

資料元素將映射至@typedc:titlexdm:template屬性。

元件資源類型

  1. 導覽至Experience Platform Launch並進入與網站整合的WebAEM屬性。

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

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

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

    元件資源類型

  5. 按一下​開啟編輯器,然後在自定義代碼編輯器中輸入以下內容:

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

    儲存變更。

    注意

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

頁面名稱

  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並進入與網站整合的WebAEM屬性。

  2. 前往​Extensions > Catalog

  3. 找到​Adobe Analytics​副檔名,然後按一下​安裝

    Adobe Analytics分機

  4. 在​資料庫管理 > 報表套裝​下,輸入您要用於每個啟動環境的報表套裝ID。

    輸入報表套裝ID

    注意

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

    秘訣

    我們建議使用​*「管理我的程式庫」選項*​作為「程式庫管理」設定,因為這可讓AppMeasurement.js程式庫保持最新狀態。

  5. 選中該框以啟用​使用Activity Map

    啟用使用Activity Map

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

    輸入追蹤伺服器

  7. 按一下​保存​保存更改。

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

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

  1. 在啟動UI中,導覽至先前建立的​頁面載入​規則。

  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變數設為​action。 我們也將設定其他動作,以觸發​頁面檢視信標,並將收集的資料傳送至Adobe Analytics。

  1. 在​Page Loaded​規則​remove​中​Core - Custom Code​動作(控制台語句):

    移除自訂程式碼動作

  2. 在「操作」(Actions)下,按一下「添加」(Add)以添加新操作。

  3. 將​擴展​類型設定為​Adobe Analytics,並將​操作類型​設定為​設定變數

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

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

    設為eVar頁面範本

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

    頁面名稱環境變數集

    儲存變更。

  6. 接著,點選​plus​圖示,在​Adobe Analytics-設定變數​右側新增其他動作:

    新增其他啟動動作

  7. 將​擴展​類型設定為​Adobe Analytics,並將​操作類型​設定為​發送信標。 由於此視為頁面檢視,請將預設追蹤設定保留為​s.t()

    傳送信標Adobe Analytics動作

  8. 儲存變更。載入的頁面​規則現在應具備下列設定:

    最終啟動設定

    • 1. 聽聽活 cmp:show 動。
    • 2. 檢查事件是否由頁面觸發。
    • 3. 設定頁面名稱和頁 面范 本的 分析變數
    • 4. 傳送分析頁面檢視信標
  9. 儲存所有變更並建立您的啟動程式庫,並升級至適當的環境。

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

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

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

  2. 按一下「除錯程式」圖示「體驗平台除錯程式」圖示以開啟「Experience Platform除錯程式」。

  3. 請確定除錯程式正將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網站上特定元件的點按次數

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now