使用Web SDK設定Journey Optimizer Web Channel

最後更新： 2025年7月31日
  • 主題：

建立對象：

  • 初學者
  • 中繼
  • 開發人員

瞭解如何使用Adobe Experience Platform Web SDK實作Adobe Journey Optimizer Web channel。 本課程涵蓋基本Web通路先決條件、設定的詳細步驟，並深入探討以忠誠度狀態為中心的使用案例。

依照本課程，Journey Optimizer使用者可以使用Journey Optimizer網頁設計工具，透過網路管道進行進階的線上個人化。

網頁SDK和Adobe Analytics圖表

學習目標

在本課程結束時，您能夠：

  • 瞭解Web SDK在提供網路頻道體驗方面的功能和重要性。
  • 利用範例Luma忠誠度獎勵使用案例，從頭到尾瞭解建立網路通路行銷活動的流程。
  • 在介面中設定促銷活動屬性、動作和排程。
  • 瞭解Adobe Experience Cloud Visual Editing Helper擴充功能的功用和優點。
  • 瞭解如何使用網頁設計工具編輯網頁內容，包括影像、標題和其他元素。
  • 瞭解如何使用優惠決定元件將優惠插入網頁。
  • 請熟悉確保網路頻道行銷活動品質和成功的最佳實務。

先決條件

若要完成本節中的課程，您必須先：

  • 完成所有Platform Web SDK初始設定的課程，包括設定資料元素和規則。

  • 確認您的Adobe Experience Platform Web SDK標籤擴充功能版本為2.16或更高版本。

  • 如果您使用Journey Optimizer網頁設計工具來製作您的網路頻道體驗，請務必使用Google Chrome或Microsoft®Edge瀏覽器。

  • 同時請確定您已下載並啟用Adobe Experience Cloud Visual Editing Helper瀏覽器擴充功能。

  • 確認您的瀏覽器允許第三方Cookie。 可能也需要停用瀏覽器中的任何廣告封鎖程式。

    注意
    在Journey Optimizer網頁設計工具中，由於下列其中一個原因，某些網站可能無法可靠地開啟：
    1. 網站有嚴格的安全政策。
    2. 網站內嵌於iframe中。
    3. 無法從外部存取客戶的QA或中繼網站（這是內部網站）。

  • 建立Web體驗並包含來自Adobe Experience Manager Assets Essentials資料庫的內容時，需要設定用於發佈此內容的子網域。

  • 如果使用內容實驗功能，請確保您的網路資料集也包含在您的報告設定中。

  • 目前，支援兩種型別的實施，以便在Web屬性上製作和傳送Web Channel行銷活動：

    • 僅限使用者端：若要修改您的網站，您必須實作Adobe Experience Platform Web SDK。
    • 混合模式：您可以利用平台Edge Network伺服器API來要求個人化伺服器端。 來自API的回應會提供給Adobe Experience Platform Web SDK，以便在使用者端上轉譯修改。 如需詳細資訊，請參閱Adobe Experience Platform Edge Network伺服器API檔案。 此部落格中提供混合模式的其他詳細資訊和實作範例。
    注意
    目前不支援僅伺服器端實作。

術語

首先，您應該瞭解在網路通路行銷活動中使用的術語。

  • 網頁管道：透過網頁進行通訊或內容傳遞的媒體。 就本指南而言，其內容指Adobe Journey Optimizer中，透過使用Platform Web SDK將個人化內容傳遞至網站訪客的機制。
  • Web表面：參考由傳送內容的URL所識別的Web屬性。 它可以包含單一或多個網頁。
  • Journey Optimizer網頁設計工具： Journey Optimizer中的特定工具或介面，使用者可在此設計其Web Channel體驗。
  • Adobe Experience Cloud Visual Editing Helper：可協助您以視覺化方式編輯及設計網頁頻道體驗的瀏覽器擴充功能。
  • Datastream： Adobe Experience Platform服務中的組態，可確保Web通路體驗能夠傳遞。
  • 合併原則：確保正確啟用和發佈傳入行銷活動的設定。
  • 對象：符合特定條件的使用者或網站訪客的特定區段。
  • 網頁設計工具：此介面或工具可協助您以視覺化方式編輯及設計網頁體驗，而不需深入探索程式碼。
  • 運算式編輯器：網頁設計工具中的工具，可讓使用者根據資料屬性或其他條件，將個人化加入網頁內容。
  • 優惠決定元件：網頁設計工具中的元件，可協助您根據決定管理，決定最適合向特定訪客顯示的優惠。
  • 內容實驗：測試不同內容變異的方法，以找出哪個在所需量度（例如傳入點按次數）方面表現最佳。
  • 處理：在內容實驗的內容中，處理是指要針對其他內容進行測試的特定內容變化。
  • 模擬：一種預覽機制，可在為即時受眾啟用網路頻道體驗之前，將其視覺化。

設定資料串流

您已將Adobe Experience Platform服務新增至資料流。 現在您需要啟用Adobe Journey Optimizer選項，才能傳遞網路頻道體驗。

若要在資料流中設定Adobe Journey Optimizer：

  1. 移至資料彙集介面。

  2. 在左側導覽中，選取​ 資料串流。

  3. 選取先前建立的Luma Web SDK資料流。

    選取資料流

  4. 選取Adobe Experience Platform服務中的​ 編輯。

    編輯資料流

  5. 勾選​ Adobe Journey Optimizer ​方塊。

    勾選AJO方塊

  6. 選取「儲存」。

這可確保Adobe Experience Platform Edge Network正確處理Journey Optimizer的傳入事件。

設定合併原則

確定已在啟用​ Active-On-Edge合併原則 ​選項的情況下定義合併原則。 Journey Optimizer傳入頻道會使用此合併原則選項，以確保在邊緣準確啟用和發佈傳入行銷活動。

若要在合併原則中設定選項：

  1. 前往Experience Platform或Journey Optimizer介面中的​ 客戶 > 設定檔 ​頁面。

  2. 選取​ 合併原則 ​索引標籤。

  3. 選取您的原則（通常最好使用預設時間型原則），並在​ 設定 ​步驟中切換​ Edge上主動合併原則 ​選項。

    切換合併原則

設定用於內容實驗的網路資料集

若要在Web Channel行銷活動中使用內容實驗，您必須確保使用的網路資料集也包含在您的報告設定中。 Journey Optimizer報表系統以唯讀方式使用資料集來填入現成可用的內容實驗報表。

新增內容實驗報告的資料集在本節中有詳細說明。

使用案例概述 — 忠誠度獎勵

在本課程中，忠誠度獎勵使用案例範例用於詳細說明使用網路SDK的網路通路體驗實作。

此使用案例可讓您更瞭解Journey Optimizer如何運用Journey Optimizer行銷活動和Web設計工具，協助為客戶提供最佳傳入體驗。

由於本教學課程的目標是實施者，因此請注意，本課程涉及Journey Optimizer的大量介面工作。 雖然這類介面任務通常由行銷人員處理，但對於實作者來說，將insight帶入流程可能有所助益，即使他們通常不需要負責建立網路通路行銷活動。

建立熟客獎勵行銷活動

現在您已擷取我們的忠誠度資料範例並建立我們的區段，請在Adobe Journey Optimizer中建立忠誠度獎勵網路管道行銷活動。

若要建立範例行銷活動：

  1. 開啟Journey Optimizer介面

    注意
    結構描述、資料集和對象都是常見的Experience Platform建構，因此也可以在Journey Optimizer介面中建置。

  2. 在左側導覽中導覽至​ 歷程管理 > 行銷活動

  3. 按一下右上角的​ 建立行銷活動。

  4. 在​ 屬性 ​區段中，指定您要如何執行行銷活動。 若為「熟客獎勵」使用案例，請選擇​ 已排程。

    已排程的行銷活動

  5. 在​ 動作 ​區段中，選擇​ 網頁管道。 作為​ 網頁表面，請選取​ 頁面URL。

    注意
    Web介面是指由傳送內容的URL所識別的Web屬性。 它可以對應至單一頁面URL或包含多個頁面，讓您在一或多個網頁上套用修改。

  6. 選擇​ 頁面URL ​網頁介面選項，將體驗部署在此行銷活動的單一頁面上。 輸入Luma頁面的URL，https://luma.enablementadobe.com/content/luma/us/en.html

  7. 定義網頁表面後，請選取​ 建立。

    選取網頁表面

  8. 現在新增一些其他詳細資料至新的網路頻道行銷活動。 首先，為行銷活動命名。 呼叫它Luma Loyalty Rewards – Gold Status。 您可以選擇新增說明至行銷活動。 同時新增​ 標籤 ​以改進整體行銷活動分類法。

    為行銷活動命名

  9. 依預設，促銷活動對所有網站訪客都有效。 就此使用案例而言，只有金級狀態獎勵會員應該會看到體驗。 若要啟用此功能，請按一下​ 選取對象 ​並選擇Luma Loyalty Rewards – Gold Status對象。

  10. 在​ 身分識別名稱空間 ​欄位中，選取用於識別所選區段內個人的名稱空間。 由於您是在Luma網站上部署行銷活動，因此可以選擇ECID名稱空間。 Luma Loyalty Rewards – Gold Status對象內缺少各種身分識別中的ECID名稱空間的設定檔，不會成為Web Channel促銷活動的目標。

    選擇身分型別

  11. 使用​ 行銷活動開始 ​選項將行銷活動排程為從今天的日期開始，並使用​ 行銷活動結束 ​選項將行銷活動排程在一週內結束。

    行銷活動排程

注意
請記住，針對網路頻道行銷活動，當訪客開啟頁面時會顯示網路體驗。 因此，與Adobe Journey Optimizer中的其他行銷活動型別不同，動作觸發器 ​區段無法設定。

實驗忠誠度獎勵內容

如果您向上捲動，在​ 動作 ​區段中，您可以選擇建立實驗，以測試哪些內容更適合Luma Loyalty Rewards – Gold Status對象。 讓我們建立並測試兩個處理作為行銷活動設定的元件。

若要建立內容實驗：

  1. 按一下​ 建立實驗。

    建立實驗

  2. 請先選擇​ 成功量度。 這是判斷內容有效性的量度。 選擇​ 不重複傳入點按，以檢視哪些內容處理在網頁體驗CTA上產生更多點按。

    選擇成功量度

  3. 使用Web管道設定實驗並選擇​ 傳入點按、不重複傳入點按、頁面檢視 ​或​ 不重複頁面檢視 ​量度時，點按動作 ​下拉式清單可讓您精確追蹤和監視特定頁面上的點按和檢視。

  4. 您可以選擇指定不接收這兩種處理方式其中之一的​ 保留。 現在不要勾選此方塊。

  5. 也可以選擇選擇平均​ 分配。 核取此選項，以確保處理分割始終平均分割。

進一步瞭解Adobe Journey Optimizer網路頻道中的內容實驗。

使用視覺化協助程式編輯內容

現在，讓我們編寫網頁頻道體驗。 若要這麼做，請使用Adobe Experience Cloud 視覺協助程式。 此工具是與Google Chrome和Microsoft® Edge相容的瀏覽器擴充功能。 在嘗試建置您的體驗之前，請確定您已下載擴充功能。 也請確定網頁包含網頁SDK。

  1. 在行銷活動的​ 動作 ​標籤中，按一下​ 編輯內容。 由於您輸入了單一頁面URL作為介面，因此您應該已準備好開始在撰寫器中工作。

    編輯內容

  2. 現在，按一下​ 編輯網頁 ​開始編寫。

    編輯網頁

  3. 首先，使用網頁撰寫器編輯某些元素。 使用內容功能表來編輯Luma主圖影像標題。 調整右側內容窗格的樣式。

    新增內容編輯

  4. 同時使用​ 運算式編輯器 ​將個人化新增至容器。

    新增個人化

  5. 請確保已正確追蹤點選體驗。 從內容功能表選擇​ 按一下追蹤元素。

    點選追蹤

  6. 使用​ 優惠決定元件 ​在網頁中插入優惠。 此元件使用​ 決定管理 ​來挑選要傳遞給Luma訪客的最佳優惠方案。

HTML設計變更

如果您想要更進階，或對網站進行自訂變更，以作為忠誠獎勵行銷活動的元件，可使用一些方法。

使用​ 元件 ​窗格將HTML或其他內容直接新增至Luma網站。

探索元件窗格

在頁面頂端新增新的HTML元件。 從設計介面或​ 關聯式 ​窗格編輯元件中的HTML。

新增自訂HTML

或者，從​ 修改 ​窗格新增HTML編輯。 此窗格可讓您在頁面上選取元件，並從設計工具介面編輯元件。

在編輯器中，為Luma Loyalty Rewards – Gold Status對象新增HTML。 選取​ 驗證。

驗證HTML

現在，請檢閱新的自訂HTML元件，以掌握其使用範圍和操作方式。

檢閱自訂HTML

使用​ CSS選取器型別 ​修改來編輯特定元件。

修改CSS

使用​ 頁面<head>型別 ​修改來新增自訂程式碼。

修改標題

使用​ Visual Helper ​的可能性是無窮的。