新增 Adobe Analytics

擴充功能設定，可管理核心 AppMeasurement.js 程式庫設定，且可設定全域變數

規則動作，可執行下列操作：

1. 設定變數
2. 清除變數
3. 傳送 Analytics 信標

移至​擴充功能>目錄

找到 Adobe Analytics 擴充功能

按一下​安裝

在Library Management > Report Suites底下，輸入您要用於每個標籤環境的報表套裝ID。 如果您的使用者有權存取Adobe Analytics，請注意，開始在方塊中輸入時，您會看到預先填入的所有報表套裝清單。 (在本教學課程中，您可針對所有環境使用同一個報告套裝，但在現實情況中，您需使用個別的報告套裝，如下圖所示)

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

在全域變數區段其他設定底下，使用您的Page Name資料元素設定頁面名稱變數。 按一下 圖示，開啟強制回應視窗並選擇頁面 Page Name 資料元素

按一下​儲存至資料庫

前往左側導覽中的​ 規則 ​區段，然後按一下​新增規則

將規則命名為 All Pages - DOM Ready

按一下「事件>新增」以開啟Event Configuration畫面

選取​事件型別> DOM就緒 （請注意，規則的順序為「50」）

按一下​保留變更

在「動作」底下，按一下 以新增動作

選取​擴充功能> Adobe Analytics

選取​動作型別>傳送信標

將 Tracking 保留設為 s.t()。 請注意，若要在點擊事件規則中發出 s.tl() 呼叫，也可以使用「傳送信標」動作執行此操作。

按一下​ 保留變更 ​按鈕

按一下​儲存至程式庫並建置

在 Chrome 瀏覽器中開啟 Luma 網站

按一下Debugger圖示 以開啟​Adobe Experience Cloud Debugger

如先前的課程所述，確認Debugger將標籤屬性對應至​ 您的 ​開發環境

按一下以開啟 Analytics 標籤

展開您的報告套裝名稱以顯示對其提出的所有請求。

確認已使用 Page Name 變數和值引發請求

按一下左側導覽中的​資料元素

按一下​新增資料元素

將資料元素命名為 Page Type

選取​資料元素型別> JavaScript變數

使用digitalData.page.category.type作為​JavaScript變數名稱

檢查​ 清除文字 ​和​ 強制小寫 ​選項

按一下​儲存至資料庫

按一下左側導覽中的​資料元素

按一下​新增資料元素

將資料元素命名為 Product Id

選取​資料元素型別> JavaScript變數

使用digitalData.product.0.productInfo.sku作為​JavaScript變數名稱

檢查​ 清除文字 ​和​ 強制小寫 ​選項

按一下​儲存至資料庫

前往擴充功能 > 目錄頁面

找到Adobe Consulting Services的Adobe Analytics Product String擴充功能，然後按一下[安裝]​​

請花一點時間閱讀指示

按一下​儲存至資料庫

前往左側導覽中的​ 規則 ​區段，然後按一下​新增規則

將規則命名為 Product Details - DOM Ready - 40

按一下「事件>新增」以開啟Event Configuration畫面

選取​事件型別> DOM就緒

將​ 順序 ​設為40，讓規則在​ 包含「傳送>傳送信標」動作的規則之前 ​執行

按一下​保留變更

在​ 條件 ​下，按一下 以開啟Condition Configuration畫面

1. 選取​條件型別>值比較

2. 使用資料元素選擇器，在第一個欄位中選擇 Page Type

3. 從比較運運算元下拉式清單中選取​包含

4. 在下一個欄位中輸入 product-page (這是從 PDP 上的資料層提取的頁面類型值的唯一部分)

5. 按一下​保留變更

   

在「動作」底下，按一下 以新增動作

選取​擴充功能> Adobe Analytics Product String

選取​動作型別>設定s.products

在​ Analytics電子商務事件 ​區段中，選取​prodView

在產品資料的​ 資料層變數 ​區段中，使用資料元素選擇器來選擇Product Id資料元素

按一下​保留變更

在「動作」底下，按一下 以新增動作

選取​擴充功能> Adobe Analytics

選取​動作型別>設定變數

選取​ eVar1 >設為 ​並輸入product detail page

設定​event1，將選填值保留為空白

在「事件」底下，按一下​ 新增其他 ​按鈕

設定​ prodView ​事件，將選填值保留為空白

按一下​保留變更

按一下​儲存至程式庫並建置

在 Chrome 瀏覽器中開啟 Luma 網站

導覽至任何產品詳細資料頁面

按一下Debugger圖示 以開啟​Adobe Experience Cloud Debugger

按一下前往 Analytics 分頁標籤

展開報告套裝

請注意現在位於 Debugger 中的產品詳細資料變數，也就是 eVar1 已設為「product detail page」、Events 變數已設為「event1」和「prodView」、產品變數已使用您檢視之產品的產品 ID 進行設定，而 Page Name 仍由 Analytics 擴充功能設定

前往左側導覽中的​ 規則 ​區段，然後按一下​新增規則

將規則命名為 Homepage - Featured Products enters Viewport

按一下「事件>新增」以開啟Event Configuration畫面

選取​事件型別>進入檢視區。 接著會顯示一個欄位，您需要在此輸入 CSS 選取器，用於識別在瀏覽器中進入檢視畫面時，頁面上應觸發規則的項目。

返回Luma首頁，然後向下捲動至精選產品區段。

以滑鼠右鍵按一下本區段中「精選產品」標題與專案之間的空白處，然後在右鍵功能表中選取Inspect。 這樣一來便接近你所需的項目。

在該處附近，或許就在所選區段的下方，尋找含有 class="we-productgrid aem-GridColumn aem-GridColumn--default--12" 的 div。 請找到此元素。

以滑鼠右鍵按一下此專案，然後選取​複製>複製選取器

返回標籤，然後從剪貼簿將此值貼到標示為Elements matching the CSS selector的欄位。

1. 順帶一提，您可自行決定如何識別 CSS 選擇器。 此方法有點脆弱，因為頁面上的某些變更可能會導致此選擇器中斷。 在標籤中使用任何CSS選取器時，可考慮使用此方法。

按一下​保留變更

在「條件」底下，按一下 以新增條件

選取​條件型別>值比較

使用資料元素選擇器，在第一個欄位中選擇 Page Name

從比較運運算元下拉式清單中選取​等於

在下一個欄位中輸入 content:luma:us:en (這是從資料層提取之首頁的頁面名稱 - 我們只希望此規則在首頁上執行)

按一下​保留變更

在「動作」底下，按一下 以新增動作

選取​擴充功能> Adobe Analytics

選取​動作型別>設定變數

將 eVar3 設為 Home Page - Featured Products

將 prop3 設為 Home Page - Featured Products

將 Events 變數設為 event3

按一下​保留變更

在「動作」底下，按一下 以新增另一個動作

選取​擴充功能> Adobe Analytics

選取​動作型別>傳送信標

選擇​ s.tl() ​追蹤選項

在​ 連結名稱 ​欄位中，輸入Scrolled down to Featured Products。 此值將放入 Analytics 的「自訂連結」報表中。

按一下​保留變更

按一下​儲存至程式庫並建置

在 Chrome 瀏覽器中開啟 Luma 網站，並確定您位於首頁頂端。

按一下​Debugger圖示 以開啟Adobe Experience Cloud Debugger

按一下前往 Analytics 分頁標籤

展開報告套裝的點擊

請注意含有頁面名稱等資料的首頁一般頁面檢視點選（但eVar3或prop3中沒有任何內容）。

在Debugger開啟的狀態下，向下捲動您的網站，直到看到「精選產品」區段為止

再次檢視 Debugger，應該會出現另一個 Analytics 點擊。 此點擊應該含有與您所設定 s.tl() 點擊相關聯的參數，也就是：

1. LinkType = "link_o" (這表示點擊是自訂連結點擊，而不是頁面檢視點擊)

2. LinkName = "Scrolled down to Featured Products"

3. prop3 = "Home Page - Featured Products"

4. eVar3 = "Home Page - Featured Products"

5. Events = "event3"

   

移至​擴充功能>已安裝

在Adobe Analytics擴充功能中，按一下​設定

在​ 資料庫管理 ​下，選取標示為Make tracker globally accessible的方塊。 如說明泡泡圖示所示，這會使追蹤器變成 window.s 下的全域範圍，當您在客戶 JavaScript 中參照它時，這是很重要的一點。

維持在 Analytics 擴充功能中，向下捲動並展開 Configure Tracker Using Custom Code. 區段

按一下​開啟編輯器

將下列程式碼貼到程式碼編輯器中：

/* Plugin Config */
s.usePlugins=true
s.doPlugins=function(s) {
/* Add calls to plugins here */
}

將此視窗保持開啟以供後續步驟使用

複製下列程式碼

/* Adobe Consulting Plugin: getValOnce v2.01 */
s.getValOnce=function(vtc,cn,et,ep){if(vtc&&(cn=cn||"s_gvo",et=et||0,ep="m"===ep?6E4:864E5,vtc!==this.c_r(cn))){var e=new Date;e.setTime(e.getTime()+et*ep);this.c_w(cn,vtc,0===et?0:e);return vtc}return""};

在程式碼視窗中 (如果您還是尚未開啟程式碼視窗，請按照上一個步驟重新開啟)，將它貼入 Analytics 擴充功能中整個 doPlugins 函數的​下方 (不包含在其中)。

複製下列程式碼：

s.campaign = s.Util.getQueryParam("cid");

將它貼入 doPlugins 函數中。 這會在目前頁面 URL 中尋找 cid 參數，並將其放到 s.campaign 變數中。

複製下列程式碼並將其貼到對 getQueryParam 提出的呼叫的正下方，以便呼叫 getValOnce 函數：

s.campaign=s.getValOnce(s.campaign,'s_cmp',30);

此程式碼將可確保 30 天內不會連續傳送相同值多次 (如需依您的需求自訂此程式碼的方式，請參閱說明文件)。

儲存程式碼視窗

按一下​儲存至程式庫並建置

在 Chrome 瀏覽器中開啟 Luma 網站

按一下Debugger圖示 以開啟​Adobe Experience Cloud Debugger

按一下前往 Analytics 標籤

展開報表套裝

請注意，Analytics 點擊沒有 Campaign 變數

將 Debugger 保持開啟，返回 Luma 網站並將 ?cid=1234 新增到 URL 中，然後按 Enter 重新整理頁面，並納入該查詢字串

檢查 Debugger 並確認是否有將 Campaign 變數設為 1234 的第二個 Analytics 請求

再次返回 Luma 頁面並重新整理，仍將查詢字串保留在 URL 中

在 Debugger 中檢查下一個點擊，Campaign 變數​ 不應 ​存在，因為 getValOnce 外掛程式已確保該變數不會重複，且看起來不會像是另一個人從促銷活動追蹤程式碼進入。

額外練習：您可以變更查詢字串中 cid 參數的值，不斷地反覆測試。 應該只有在您​ 第一次 ​使用此值執行頁面時，Campaign 變數才會存在。 如果您沒有在 Debugger 中看到 Campaign 值，請變更 URL 的查詢字串中 cid 的值，然後按下 Enter，應該就能在 Debugger 中再次看到它。