新增 Adobe Target

管理核心程式庫設定的擴充功能設定

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

1. 載入 Target (at.js 2.x)
2. 將參數新增至頁面載入請求
3. 將參數新增至所有請求
4. 引發頁面載入請求

移至​ 擴充功能>目錄

在篩選器中輸入 target 以快速找到 Adobe Target 擴充功能。擴充功能有兩種：Adobe Target 和 Adobe Target v2。本教學課程將使用 v2 版的擴充功能，此擴充功能使用最新版 at.js (目前為 2.x)，最適合傳統網站和單頁應用程式 (SPA)。

按一下​ 安裝

新增擴充功能時，會從 Target 介面匯入許多 (但並非全部) at.js 設定，如下圖所示。逾時是其中一項不會匯入的設定，新增擴充功能後該設定一律為 3000ms。在本教學課程中，請保留預設設定。請注意，左側會顯示目前擴充功能版本隨附的 at.js 版本。

按一下​ 儲存至資料庫

前往左側導覽中的​ Rules，然後按一下All Pages - Library Loaded以開啟規則編輯器

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

選取​ 擴充功能> Adobe Target v2

選取​ 動作型別>載入目標

按一下​ 保留變更

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

選取​ 擴充功能> Adobe Target v2

選取​ 動作型別>引發頁面載入要求

關於是否要隱藏頁面和用於預先隱藏的 CSS 選取器，有一些可供頁面載入請求使用的設定。這些設定可與頁面上以硬式編碼撰寫的預先隱藏程式碼片段搭配使用。保留預設設定。

按一下​ 保留變更

新動作會依序新增至 Load Target 動作之後，且動作會依此順序執行。您可以拖放動作來重新排列順序，但在此案例中，Load Target 必須排在 Fire Page Load Request 之前。

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

重新載入範例頁面。應該不會再發生延遲三秒才顯示頁面的情況。如果您使用 file:// 通訊協定載入範例頁面，應在 Firefox 或 Safari 瀏覽器中執行此步驟，因為使用 file:// 通訊協定時，Chrome 不會引發 Target 請求。

開啟 Luma 網站

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

前往 Debugger 的「摘要」標籤

在 Launch 區段中，確認 Target 顯示在 Extensions 標題下方

在 Target 區段中，確認您的 at.js 程式庫版本有顯示

最後，前往 Target 標籤，展開用戶端程式碼，並確認您的頁面載入請求已出現：

Add Params to Page Load Request，會將參數新增至頁面載入請求 (相當於 targetPageParams() 方法)

Add Params to All Requests，會在所有 Target 請求中新增參數，例如頁面載入請求，加上自訂程式碼動作或在網站上以硬式編碼撰寫的其他請求 (等同於 targetPageParamsAll() 方法)

前往左側導覽中的​ Rules，然後按一下All Pages - Library Loaded以開啟規則編輯器。

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

選取​ 擴充功能> Adobe Target v2

選取​ 動作型別>將引數新增至頁面載入要求

輸入pageName作為​ 名稱

按一下 ，開啟資料元素強制回應視窗

按一下 Page Name 資料元素

按一下​ 選取 ​按鈕

按一下​ 保留變更

按一下並拖曳 Add Params to Page Load Request 動作的左側邊緣，重新排列 Fire Page Load Request 動作前面的動作 (可在 Load Target 動作之前或之後)

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

開啟 Luma 網站

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

使用 test@adobe.com/test 憑證登入 Luma 網站

返回 Luma 首頁

開啟瀏覽器的開發人員工具

按一下「網路」標籤

將請求篩選為 tt.omtrdc (或 Target 請求的 CNAME'd 網域)

展開 Headers > Request Payload > id.customerIds.0 區段，驗證客戶 ID 設定和值：

在另一個標籤中，開啟 Target 使用者介面

移至​ 管理>屬性

識別您要使用的屬性，然後按一下​ </> （或建立新屬性）

將<script></script>中的程式碼片段複製到剪貼簿

在標籤標籤中，前往左側導覽的​ 規則，然後按一下All Pages - Library Loaded以開啟規則編輯器。

在「動作」底下，按一下 Core - Custom Code 動作以開啟 Action Configuration

開啟程式碼編輯器，並從包含targetPageParams()函式的Target介面貼上程式碼

按一下​ 儲存 ​按鈕

勾選​ 全域執行 ​方塊，以便在全域範圍中宣告targetPageParams()

按一下​ 保留變更

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

開啟 Luma 網站

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

開啟瀏覽器的開發人員工具

按一下「網路」標籤

將請求篩選為 tt.omtrdc (或 Target 請求的 CNAME'd 網域)

展開 Headers > Request Payload > property.token 區段以驗證值

按一下​ 新增資料元素

將資料元素命名為 Cart SKUs (Target)

選取​ 資料元素型別>自訂程式碼

針對 Target，SKU 必須是以逗號分隔的清單。此自訂程式碼會將資料層陣列重新格式化為適當的格式。在自訂程式碼編輯器中，貼入下列內容：

var targetProdSkus="";
for (var i=0; i<digitalData.cart.cartEntries.length; i++) {
  if(i>0) {
    targetProdSkus = targetProdSkus + ",";
  }
  targetProdSkus = targetProdSkus + digitalData.cart.cartEntries[i].sku;
}
return targetProdSkus;

勾選 Force lowercase value 選項

勾選 Clean text 選項

按一下​ 儲存至資料庫

按一下左側導覽中的​ 規則

按一下​ 新增規則

將規則命名為 Order Confirmation Page - Library Loaded - 60

按一下​ 事件>新增

1. 選取​ 事件型別>載入的程式庫（頁面頂端）
2. 在​ 進階選項 ​下，將Order變更為60，使其在Load Target動作（在我們的All Pages - Library Loaded規則中，Order設定為50）之後引發
3. 按一下​ 保留變更

按一下​ 條件>新增

1. 選取​ 條件型別>不含查詢字串的路徑

2. 對 Path equals 輸入 thank-you.html

3. 開啟「規則運算式」選項，將邏輯從 equals 變更為 contains (您可使用 Test 功能，確認測試會連同 URL https://luma.enablementadobe.com/content/luma/us/en/user/checkout/order/thank-you.html 一起傳送)

   

4. 按一下​ 保留變更

按一下​ 動作>新增

1. 選取​ 動作型別>自訂程式碼

2. 按一下​ 開啟編輯器

3. 將下列程式碼貼入 Edit Code 強制回應視窗中

   code language-javascript

   adobe.target.getOffer({ "mbox": "orderConfirmPage", "params":{ "orderId": _satellite.getVar('Order Id'), "orderTotal": _satellite.getVar('Cart Amount'), "productPurchasedId": _satellite.getVar('Cart SKUs (Target)') }, "success": function(offer) { adobe.target.applyOffer({ "mbox": "orderConfirmPage", "offer": offer }); }, "error": function(status, error) { console.log('Error', status, error); } });

4. 按一下​ 儲存 ​以儲存自訂程式碼

5. 按一下​ 保留變更 ​保留動作

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

開啟 Luma 網站

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

瀏覽網站，然後將多項產品新增到購物車中

繼續結帳

在結帳過程中，只有 First Name 和 Last Name 是必填欄位

在「檢閱訂單」頁面上，請務必按一下 Place Order 按鈕

開啟瀏覽器的開發人員工具

按一下「網路」標籤

將請求篩選為 tt.omtrdc (或 Target 請求的 CNAME'd 網域)

按一下第二個請求

展開 Headers > Request Payload > execute.mboxes.0 區段以驗證請求名稱和訂單參數：