新增 Adobe Analytics

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

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

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

前往​ 擴充功能 > 目錄

找到 Adobe Analytics 擴充功能

按一下​ 安裝

在 程式庫管理>報表套裝，輸入您要用於每個標籤環境的報表套裝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 Service 找到 Adobe Analytics Product String 擴充功能，然後按一下​ 安裝

請花一點時間閱讀指示

按一下​ 儲存至程式庫

前往 規則 區段，然後按一下 新增規則

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

按一下​ 事件 > 新增，開啟 Event Configuration 畫面

選取​ 事件類型 > DOM 就緒

將 Order 設為 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 中再次看到它。