新增 Target 擴充功能

Adobe Target 擴充功能支援將 Target 的 JavaScript SDK 用於現代網路 at.js 的用戶端實施。仍在使用Target舊版程式庫mbox.js 的客戶應升級至at.js 2.x,才能使用標籤。

Target v2 擴充功能包含兩個主要部分:

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

  2. 規則動作,可執行下列操作:

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

在第一個練習中,我們將新增擴充功能並審視設定。在稍後的練習中,將會使用這些動作。

新增擴充功能的方式

  1. 移至​ 擴充功能>目錄

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

  3. 按一下​ 安裝

    安裝 Target v2 擴充功能

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

  5. 按一下​ 儲存至資料庫

    儲存擴充功能

此時,Target 實際並未執行任何動作,因此沒有任何要驗證的內容。

NOTE
每一版Target擴充功能都會隨附特定的at.js版本,詳情請見擴充功能說明中列出的資訊。 您可以更新 Target 擴充功能以更新 at.js 版本。

載入 Target 並引發頁面載入請求

行銷人員在測試及鎖定目標內容時,可使用 Target 控制頁面上的訪客體驗。由於這對於頁面的顯示而言至關重要,Target 應盡早載入,以將對頁面顯示的影響降至最低。在本節中,我們將載入 Target JavaScript 程式庫 at.js,並引發頁面載入請求 (在舊版 at.js 中稱為「全域 mbox」)。

您可以使用在「新增資料元素、規則和程式庫」一課中建立的 All Pages - Library Loaded 規則來實施 Target,因為它已在頁面載入時盡早觸發。

載入 Target 的方式

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

    開啟「所有頁面 - 程式庫已載入」規則

  2. 在「動作」底下,按一下 按一下加號圖示 以新增動作

    按一下加號圖示以新增動作

  3. 選取​ 擴充功能> Adobe Target v2

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

  5. 按一下​ 保留變更

    按一下「保留變更」

新增載入 Load Target 動作後,at.js 隨即會在頁面上載入。不過在新增 Fire Page Load Request 動作之前,不會引發任何 Target 請求。

引發頁面載入請求

  1. 在「動作」底下,再按一下 按一下加號圖示 以新增另一個動作

    按一下加號圖示以新增另一個動作

  2. 選取​ 擴充功能> Adobe Target v2

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

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

  5. 按一下​ 保留變更

    「引發頁面載入請求」動作

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

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

    儲存並建置

驗證頁面載入請求

現在您已新增Target v2擴充功能並引發Load TargetFire Page Load Request動作,因此應在使用標籤屬性的所有頁面上發出頁面載入請求。

驗證「載入 Target」和「引發頁面載入請求」動作的方式

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

  2. 開啟 Luma 網站

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

    Debugger中顯示的標籤開發環境

  4. 前往 Debugger 的「摘要」標籤

  5. Launch 區段中,確認 Target 顯示在 Extensions 標題下方

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

    確認 Target 出現在 Debugger 的「摘要」標籤中

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

    確認已提出「頁面載入」請求

恭喜!您已實施 Target!

新增參數

在 Target 請求中傳遞參數可將強大的功能新增到目標鎖定、測試及個人化活動。標籤擴充功能提供可傳遞引數的兩項動作:

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

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

您可以在 Load Target 動作​ ​使用這些動作,而且可以根據您的規則設定,在不同的頁面上設定不同參數。使用您在透過 Identity Service 設定客戶 ID 時使用的規則排序功能,在引發頁面載入請求的規則之前,設定 Library Loaded 事件的其他參數。

TIP
由於大部分實施都會使用頁面載入請求來傳送活動,因此只使用Add Params to Page Load Requests動作通常便已足夠。

請求 (mbox) 參數

參數可用來將自訂資料傳遞至 Target,讓您的個人化功能更加豐富。參數最適合在瀏覽作業階段期間經常變更的屬性,例如頁面名稱、範本等,而且不會持續不變。

現在來將先前於Page Name新增資料元素、規則和程式庫課程中建立的資料元素新增為請求參數。

新增請求參數的方式

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

    開啟「所有頁面 - 程式庫已載入」規則

  2. 在「動作」底下,按一下 按一下加號圖示 以新增動作

    按一下加號圖示以新增動作

  3. 選取​ 擴充功能> Adobe Target v2

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

  5. 輸入pageName作為​ 名稱

  6. 按一下 資料元素圖示 ,開啟資料元素強制回應視窗

  7. 按一下 Page Name 資料元素

  8. 按一下​ 選取 ​按鈕

    按一下「選取」按鈕

  9. 按一下​ 保留變更

    按一下「保留變更」

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

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

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

驗證請求參數

目前,使用 at.js 2.x 請求傳遞的自訂參數在 Debugger 中不易檢視,因此我們將運用瀏覽器的開發人員工具。

驗證 pageName 請求參數的方式

  1. 重新載入Luma網站,確認已對應至您自己的標籤屬性
  2. 開啟瀏覽器的開發人員工具
  3. 按一下「網路」標籤
  4. 將請求篩選為 tt.omtrdc (或 Target 請求的 CNAME'd 網域)
  5. 展開 Headers > Request Payload > execute.pageLoad.parameters 區段,驗證 pageName 參數和值

Debugger 中的 pageName 參數

設定檔參數

與請求參數類似,設定檔參數是透過 Target 請求傳遞。不過,設定檔參數會儲存在 Target 訪客設定檔資料庫中,且在訪客的設定檔期間持續存在。您可以在網站的某個頁面上設定這些參數,並用於其他頁面上的 Target 活動。以下是來自某個汽車網站的範例。當訪客前往車輛頁面時,您可以傳遞設定檔參數「profile.lastViewed=sportscar」,以記錄其對於該特定車輛的興趣。當訪客瀏覽到其他非車輛的頁面時,您可以根據其檢視的上一個車輛鎖定目標內容。設定檔參數適用於很少變更或只會在某些頁面上使用的屬性

在本教學課程中,您不需要傳遞任何設定檔參數,但工作流程幾乎與剛剛傳遞 pageName 參數時的做法相同。有一項差異是,您必須為設定檔參數名稱加上 profile. 前置詞。這就是「userType」設定檔參數在 Add Params to Page Load Request 動作中看起來的樣子:

配置設定檔案參數

實體參數

實體參數是 Recommendations 實施中使用的特殊參數 ,主要原因有三:

  1. 作為觸發產品建議的索引鍵。例如,使用「已檢視產品 X 的使用者也已檢視 Y」等建議演算法時,「X」是建議的「索引鍵」。這通常是訪客目前正在檢視的產品 SKU (entity.id) 或類別 (entity.categoryId)。
  2. 收集訪客行為以支援建議演算法,例如「Recently Viewed Products」或「Most Viewed Products」。
  3. 填入 Recommendations 目錄。Recommendations 中包含您網站上所有產品或文章的資料庫,以便在建議活動內容中提供這些項目。例如,建議產品時,您通常會想要顯示產品名稱 (entity.name) 和影像 (entity.thumbnailUrl) 等屬性。某些客戶使用後端摘要填入其目錄,但也可以使用 Target 請求中的實體參數填入。

在本教學課程中,您不需要傳遞任何實體引數,但工作流程與先前傳遞pageName請求引數時的做法相同,只需將引數命名為以「entity」為前置詞的名稱, 並將參數對應至相關的資料元素即可。請注意,某些通用實體已保留必須使用的名稱 (例如用於產品 SKU 的 entity.id)。以下是在 Add Params to Page Load Request 動作中設定實體參數看起來的樣子:

新增實體參數

新增客戶 ID 參數

透過 Adobe Experience Platform Identity Service 收集客戶 ID,讓您可使用 Adobe Experience Cloud 的客戶屬性功能,輕鬆將 CRM 資料匯入 Target。此外,還可以實現跨裝置訪客拼接,讓客戶在筆記型電腦和行動裝置之間切換時,仍能維持一致的使用體驗。

在引發頁面載入請求之前,必須先在 Identity Service 的 Set Customer IDs 動作中設定客戶 ID。為此,請確認您的網站上具備下列功能:

  • 客戶ID必須可在標籤內嵌程式碼之前的頁面上使用
  • 必須安裝 Adobe Experience Platform Identity Service 擴充功能
  • 您必須在「載入的程式庫」(頁面頂端)」事件引發的規則中使用 Set Customer IDs 動作
  • 在「設定客戶 ID」動作​ 之後 ​引發的規則中使用 Fire Page Load Request 動作

在上一堂課新增 Adobe Experience Platform Identity Service 中,您建立了 All Pages - Library Loaded - Authenticated - 10 規則以引發「設定客戶 ID」動作。由於此規則的 Order 設定為 10,因此會在頁面載入請求從 Order 設定為 50All Pages - Library Loaded 規則引發之前設定客戶 ID。如此一來,您已實施用於 Target 的客戶 ID 集合!

驗證客戶 ID

目前,使用 at.js 2.x 請求傳遞的自訂參數在 Debugger 中不易檢視,因此我們將運用瀏覽器的開發人員工具。

驗證客戶 ID 的方式

  1. 開啟 Luma 網站

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

    Debugger中顯示的標籤開發環境

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

  4. 返回 Luma 首頁

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

  6. 按一下「網路」標籤

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

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

Debugger 中的客戶 ID 設定

WARNING
Adobe Experience Platform Identity Service可讓您將多個ID傳送至服務,但只有第一個ID會傳送至Target。

新增屬性代號參數

NOTE
這是適用於Target Premium客戶的選用練習。

屬性代號是搭配 Target Premium Enterprise User Permissions 功能使用的保留參數。它可用來定義不同的數位屬性,這樣 Experience Cloud 組織的不同成員就能獲派各個屬性的不同權限。例如,您可能希望一組使用者能在您的網站上設定 Target 活動,但不能在行動應用程式中設定。

Target屬性類似於標籤屬性和Analytics報表套裝。 如果企業擁有多個品牌、網站和行銷團隊,可能會使用不同的Target屬性、標籤屬性,以及適用於各個網站或行動應用程式的Analytics報表套裝。 標籤屬性是以其內嵌程式碼區別、Analytics報表套裝是以其報表套裝ID區別,而Target屬性是以其屬性代號引數區別。

屬性代號必須使用具有targetPageParams()函式的標籤中的自訂程式碼動作實作。 如果您透過單一標籤屬性使用不同的at_property值來實作多個網站,您可以透過資料元素管理at_property值。

若您是 Target Premium 客戶,且想在教學課程屬性中實施屬性代號,以下是可供使用的選用練習:

  1. 在另一個標籤中,開啟 Target 使用者介面

  2. 移至​ 管理>屬性

  3. 識別您要使用的屬性,然後按一下​ </> (或建立新屬性)

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

    從 Adobe Target 介面取得屬性代號

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

    開啟「所有頁面 - 程式庫已載入」規則

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

    開啟「將參數新增至頁面載入請求」動作

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

  8. 按一下​ 儲存 ​按鈕

    開啟「將參數新增至頁面載入請求」動作

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

  10. 按一下​ 保留變更

    按一下「保留變更」

  11. 按一下​ 儲存至程式庫並建置
    按一下「儲存至程式庫並建置」

WARNING
如果您嘗試透過​ 將引數新增至頁面載入請求 ​動作新增at_property引數,引數將會填入網路請求中,但Target的視覺化體驗撰寫器(VEC)在載入頁面時無法自動偵測它。 一律使用[自訂程式碼]動作中的targetPageParams()函式填入at_property

驗證屬性代號

目前,使用 at.js 2.x 請求傳遞的自訂參數在 Debugger 中不易檢視,因此我們將運用瀏覽器的開發人員工具。

驗證屬性代號參數的方式

  1. 開啟 Luma 網站

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

    Debugger中顯示的標籤開發環境

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

  4. 按一下「網路」標籤

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

  6. 展開 Headers > Request Payload > property.token 區段以驗證值
    屬性代號應在每個請求中顯示為 at_property 參數

新增自訂請求

新增訂單確認請求

訂單確認請求是用於傳送訂單詳細資訊給 Target 的特殊請求類型。包含三個特定請求參數 orderId、orderTotal 和 productPurchasedId,因而將一般 Target 請求變成訂購請求。除了提供收入報表以外,訂單請求也會執行下列動作:

  1. 重新提交刪除重複的意外訂單
  2. 篩選極端訂單 (其總計超過平均值的三個標準差的訂單)
  3. 在背景使用不同的演算法來計算統計可信度
  4. 建立特殊、可下載之個別訂單詳細資料的稽核報表

最佳做法是在所有訂單漏斗(甚至非零售網站)中使用訂單確認請求。 例如,銷售機會開發網站通常會有潛在客戶漏斗,其尾端會產生唯一的「lead id」。這些網站應將靜態值 (例如「1」) 用於 orderTotal 以實施訂單請求。

如果客戶將Analytics for Target (A4T)整合用於其大多數報表,則在使用Automated Personalization活動(不支援A4T)時,可能也想要實施訂單請求。 此外,訂單請求是Recommendations實施中的關鍵元素,可根據購買行為支援演演算法。 如需A4T支援的最新資訊,請參閱檔案

訂單確認請求應從只在訂單確認頁面或事件上觸發的規則引發,通常可與設定 Adobe Analytics 購買事件的規則組合。您必須使用核心擴充功能的「自訂程式碼」動作進行設定,使用相關資料元素來設定 orderId、orderTotal 和 productPurchasedId 參數。

現在來新增在 Luma 網站上引發訂單確認請求所需的資料元素和規則。由於您已建立多個資料元素,此處將提供簡略的指示。

為 Order ID 建立資料元素的方式

  1. 按一下左側導覽中的​ 資料元素
  2. 按一下​ 新增資料元素
  3. 將資料元素命名為 Order Id
  4. 選取​ 資料元素型別> JavaScript變數
  5. 使用 digitalData.cart.orderId 作為 JavaScript variable name
  6. 勾選 Clean text 選項
  7. 按一下​ 儲存至資料庫
    (在完成訂購確認請求的所有變更之前,不會建置程式庫)

為 Cart Amount 建立資料元素的方式

  1. 按一下​ 新增資料元素
  2. 將資料元素命名為 Cart Amount
  3. 選取​ 資料元素型別> JavaScript變數
  4. 使用 digitalData.cart.cartAmount 作為 JavaScript variable name
  5. 勾選 Clean text 選項
  6. 按一下​ 儲存至資料庫

為 Cart SKU (Target) 建立資料元素的方式

  1. 按一下​ 新增資料元素

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

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

  4. 針對 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;
    
  5. 勾選 Force lowercase value 選項

  6. 勾選 Clean text 選項

  7. 按一下​ 儲存至資料庫

現在需要建立一個規則,以便使用這些資料元素作為訂購確認頁面上的參數來引發訂購確認請求。

為「訂單確認」頁面建立規則的方式

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

  2. 按一下​ 新增規則

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

  4. 按一下​ 事件>新增

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

    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. 按一下​ 保留變更

  6. 按一下​ 動作>新增

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

    2. 按一下​ 開啟編輯器

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

      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. 按一下​ 保留變更 ​保留動作

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