新增 Adobe Analytics

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

按一下​ 新增資料元素

將資料元素命名為 Page Type

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

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

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

按一下​ 儲存至資料庫

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

按一下​ 新增資料元素

將資料元素命名為 Product Id

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

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

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

按一下​ 儲存至資料庫

前往擴充功能 > 目錄頁面

找到Adobe Consulting服務的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 網站，並確定您位於首頁頂端。

按一下​ 偵錯工具圖示 以開啟Adobe Experience Cloud偵錯工具

按一下前往 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 天內不會連續傳送相同值多次 (如需依您的需求自訂此程式碼的方式，請參閱說明文件)。

儲存程式碼視窗

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