文件Journey Optimizer B2BJourney Optimizer B2B Edition 文件

[Beta]{class="badge informative" title="此功能目前在有限測試版中提供"}

網站體驗設計

Last update: Wed Mar 25 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 使用者

在您建立網頁體驗之後，請使用內容設計空間來定義您要套用至網頁的修改。

recommendation-more-help

先決條件

在設計Web體驗之前，請確定已符合下列需求：

  • 產品管理員已設定一或多個網路通道，以定義要納入網路體驗的URL （頁面）。 如需詳細資訊，請參閱網路通道設定。

  • 您的網站已實作Adobe Experience Platform Web SDK (alloy.js)，以識別訪客並傳送內容。 需要Adobe Experience Platform Web SDK 2.16版或更高版本。

  • 您擁有必要的許可權，才能在歷程中建立和管理網頁體驗：

    • 行銷活動 > 管理行銷活動 — 需要新增或更新Web個人化動作節點。
    • 行銷活動 > 檢視行銷活動 — 需要檢視Web個人化動作節點的詳細資料。
style
shade-box
IMPORTANT
在設計網頁體驗之前，請確定您已為網頁瀏覽器安裝Adobe Experience Cloud Visual Editing Helper瀏覽器擴充功能。 若要在Journey Optimizer B2B edition網頁體驗設計空間以可靠的方式開啟、編寫及預覽網頁，則必須使用此擴充功能。
Google Chrome和Microsoft Edge是目前唯一支援Journey Optimizer B2B edition擴充功能和編寫Web體驗的瀏覽器。 如需詳細資訊，請參閱安裝Visual Editing Helper擴充功能。

網站體驗編輯器

Journey Optimizer B2B edition提供兩種型別的編輯器，可用於設計Web修改：

編輯者
說明
最適合
視覺化編輯器
顯示您的網站並允許您直接選取和修改元素的WYSIWYG (What You See Is What You Get)編輯器。 它需要Google Chrome或Microsoft Edge網頁瀏覽器中的Visual Editing Helper擴充功能。
對可見的頁面元素（例如文字、影像、按鈕和橫幅）進行視覺化變更。
非視覺化編輯器
程式碼型編輯器，可套用無法透過視覺化編輯器進行的修改。
鎖定在視覺上難以選取的元素、套用進階CSS變更，或修改隱藏元素。

在Web體驗屬性中，使用​ 視覺化編輯器 ​選項來決定編輯器的型別。 啟用使用視覺化編輯器的選項，或停用它以使用非視覺化編輯器。

視覺化編輯器選項已啟用 {width="400"}

視覺編輯器 visual-editor

視覺化編輯器會在iframe內載入網頁，您可於其中選取元素，並直接在頁面預覽中套用修改。 完成下列步驟，使用視覺化編輯器設計您的網頁體驗：

  1. 在網頁體驗詳細資訊頁面中顯示​ 內容 ​索引標籤時，按一下右側面板中的​編輯網頁體驗。

    視覺化編輯器會根據Web Channel設定載入您的網站。

    網頁體驗視覺化編輯器 {width="800" modal="regular"}

  2. 如有需要，請按一下右上方的​瀏覽，並使用網站導覽列載入您要修改的特定頁面。

    您也可以在上方的欄位中輸入頁面URL。

    note note
    NOTE
    確保載入的頁面符合在您的Web Channel設定中定義的URL模式。 按一下右上角的​檢視組態詳細資料，即可檢視所選Web通道組態的URL或頁面比對規則。

    在視覺化編輯器中 瀏覽模式 {width="700" modal="regular"}

    按一下右上角的​設計，以載入設計空間中的頁面。

  3. 若要定義您要如何修改網頁體驗的顯示頁面，您可以：

    • 將新元件 (分隔線、HTML、影像、標題、段落或連結)插入網頁體驗頁面。

    • 從頁面中選取任何現有的元素，例如影像、按鈕、段落、文字、容器、標題或連結，然後為網頁體驗修改它。

    • 為元素新增點選追蹤，以測量參與度並收集深入分析。

  4. 重複步驟2以載入您要納入網頁體驗的其他頁面，並重複步驟3以定義頁面修改。

  5. 檢閱您的修改，並視需要進行任何調整。

  6. 修改完成後，按一下編輯器上方的左箭頭，返回Web體驗屬性。

修改元素

按一下顯示頁面中的元素以選取它。 藍色邊框會指出選取的元素，而內容工具列則會顯示修改選項。

選取要修改的元素 {width="700" modal="regular"}

工具列選項視選取的元件型別而定：

動作
說明
文字選項
變更所選元素的文字元素類別或文字樣式。
選擇影像
取代影像來源或將影像新增至元素。
編輯連結/新增連結
修改或新增連結URL。
安排
在顯示內將選取的元素向後或向前移動。
新增個人化
插入個人化。
點選追蹤元素
為元素新增點選追蹤。
刪除
從頁面中移除選取的元素。

針對選取的元素，右側面板中的屬性會變更，以反映可用的樣式和動作。 按一下面板頂端的動作圖示，即可複製、按一下追蹤、刪除或隱藏選取的元素。

按一下所選元素的動作圖示 {width="300"}

文字元素

  1. 在頁面上選取文字元素。

  2. 輸入新的文字內容，或選取文字字串並輸入取代文字。

  3. （選擇性）使用文字格式選項，例如粗體、斜體和對齊。

  4. Click outside the text element to apply the change.

For more information about text styling options for text components, see Content components.

Image elements

  1. Select an image element on the page.

  2. Click the Choose image icon in the contextual toolbar or the right panel.

  3. Browse and select an image from your assets library.

  4. Use the image styling options in the right panel as needed.

Button elements

  1. Select a button element on the page.

  2. (Optional) Enter new text for the button, or select the text string and enter your replacement text.

    You can use personalization to alter the button text using data from account or person profiles.

  3. Use the button styling options in the right panel as needed.

Container elements

  1. Select a container element on the page.

  2. Use the container styling options in the right panel as needed.

Insert new components

When you select the + icon in the design left navigation for the visual editor, you can add the following components types to the page as a web experience modification:

  • Divider - Use this component to insert a dividing line to organize the layout and content of your email. You can adjust styling attributes such as the line color, style, and height from the properties in the right panel. See Divider in Content components for more information.
  • HTML - Use this component to copy-paste HTML code in the existing structure. It enables you to create free modular HTML components to reuse some external content. See HTML in Content components for more information.
  • Image - Use this component to insert an image file into the page. You can adjust styling attributes such as the width and height from the properties in the right panel. 如需詳細資訊，請參閱​ 內容元件 ​中的影像。
  • 標題 — 使用此元件插入標題類別文字。 您可以從右側面板中的屬性調整樣式屬性，例如文字顏色、樣式、字型和大小。 如需詳細資訊，請參閱​ 內容元件 ​中的文字。
  • 段落 — 使用此元件插入標準文字元素。 您可以從右側面板中的屬性調整樣式屬性，例如文字顏色、樣式、字型和大小。 如需詳細資訊，請參閱​ 內容元件 ​中的文字。
  • 連結 — 使用此元件將獨立文字連結插入至指定的URL。 您可以從右側面板中的屬性調整樣式屬性，例如文字顏色、樣式、對齊方式和大小。

在左側選取元件型別，然後將滑鼠游標停留在您要新增元件的位置旁的元素上。

視覺化編輯器介面 — 新元件 {width="800" modal="regular"}

按一下顯示的按鈕之一來放置元件：

  • *插入至​之前 — 在選取的元素之前插入元件。
  • *插入至​之後 — 在選取的元素之後插入元件。

若要取消選取要插入的元件型別，請在頁面頂端顯示的內容藍色橫幅中按一下​ESC。

非視覺化編輯器 non-visual-editor

當您需要進行無法在視覺化編輯器中輕鬆完成的修改時，請使用非視覺化編輯器。 這種程式碼型方法可讓您精確控制元素目標定位和修改。 完成下列步驟，使用非視覺化編輯器設計您的網頁體驗：

  1. 在網頁體驗詳細資料頁面中顯示​ 內容 ​索引標籤時，按一下右側面板中的​新增修改。

    非視覺化編輯器會根據Web Channel設定載入頁面。

    非視覺化編輯器介面 {width="800" modal="regular"}

  2. 定義您要進行的第一個修改。

    左側面板會顯示現有修改的清單（如果有的話）。 按一下​ 新增 ​以定義新的修改。 如果未定義任何修改，面板會預設為​ 新增修改 ​選項。

    • 選擇​修改型別：

      table 0-row-2 1-row-2 2-row-2
      類型 說明
      CSS選取器 使用CSS選取器字串的目標元素。
      頁面 將自訂HTML、CSS或JavaScript插入頁面層級的元素，例如<head>或<body>。

    • 根據型別設定修改引數：

      • CSS選擇器 — 輸入有效的CSS選擇器以鎖定特定元素。
      • 動作型別 — 選擇要執行的動作（編輯、隱藏、刪除、插入、取代）。
      • 內容 — 提供要套用的內容或樣式。

  3. 按一下​ 儲存 ​以套用修改。

CSS選擇器修改

CSS選取器修改可讓您使用標準CSS選取器語法精確地鎖定元素。

  1. 選擇​ CSS選取器 ​作為修改型別。

  2. 在​ CSS元素選取器 ​欄位中輸入選取器。

**範例選取器：**

|選取器|目標|
| -------- | ------- |
| &#39;#hero-banner&#39; | ID為&#39;hero-banner&#39;的元素|
| &#39;.cta-button&#39; |類別為&#39;cta-button&#39;的所有元素|
| &#39;header nav a&#39; |導覽內的連結（在標題內）|
| &#39;[data-offer=&quot;premium&quot;]&#39; |具有特定資料屬性的元素|

  1. 選擇​動作型別，並指定必要的資訊/內容。

    • 設定內容 — 在​ 內容 ​欄位中，輸入​ CSS元素選取器 ​值所識別之元素的文字。

    • 設定屬性 — 指定與目前CSS選取器關聯的屬性，以便此屬性可以識別元素。 在​ 屬性名稱 ​欄位中輸入名稱，並在​ 內容 ​欄位中輸入值。 如果屬性已經存在，則會更新值；否則，會新增具有指定名稱和值的新屬性。

    非視覺化編輯器CSS選取器修改 {width="800" modal="regular"}

  2. （選用）按一下​新增個人化，並使用個人化編輯器建立內容的自訂個人化。

頁面修改

您可以使用頁面<head>修改型別來新增自訂程式碼。 <head>元素是中繼資料（資料的相關資料）的容器，並置於<html>標籤和<body>標籤之間。 在此情況下，程式碼不會等待內文或頁面載入事件，而是在頁面載入開始時執行。

<head>元素常用來將JavaScript或CSS程式碼新增至頁面頂端。 後續視覺化動作的選取器，會根據此標籤中新增的 HTML 元素而定。

NOTE
自訂程式碼會在訪客的瀏覽器中執行。 確保您的程式碼安全且經過測試，且不會對頁面效能或使用者體驗產生負面影響。

  1. 選擇​ 頁面<head> ​作為修改型別。

  2. 在​ 內容 ​方塊中新增您的自訂程式碼。

    note caution
    CAUTION
    您只能將<script>和<style>專案新增至<head>區段。 新增<div>標籤和其他元素可能會造成剩餘<head>個元素填入<body>。

    非視覺化編輯器頁首修改 {width="800" modal="regular"}

  3. （選用）按一下​新增個人化，並使用個人化編輯器建立內容的自訂個人化。

管理修改 manage-modifications

您建立的所有修改都會受到追蹤，並可從視覺化編輯器和非視覺化編輯器的​ 修改 ​面板進行管理。 按一下左側工具列中的​修改 圖示以檢視所有修改。

每個修改記錄包括：

  • 目標元素或選取器
  • 修改型別（例如編輯、隱藏或插入）
  • 變更的預覽

修改面板 {width="500" modal="regular"}

編輯修改

  1. 在​ 修改 ​清單中，尋找您要編輯的修改。

  2. 按一下​更多功能表 (… )圖示，然後選擇​編輯。

  3. 視需要更新修改屬性。

  4. 按一下​ 儲存 ​以儲存變更。

刪除修改

  1. 在​ 修改 ​清單中，尋找您要移除的修改。

  2. 按一下​更多功能表 ( … )圖示，然後選擇​刪除修改。

  3. 出現提示時確認移除。

預覽您的修改

發佈前，請先預覽修改內容向訪客的顯示方式。

使用視覺編輯器頂端的裝置預覽選項來檢視您的修改內容：

  • 桌面
  • 平板電腦
  • 行動

變更預覽的裝置大小 {width="550" modal="regular"}

預覽會更新，以顯示修改在每個裝置大小上的呈現方式。

使用URL列導覽至您網路頻道設定內的不同頁面。 然後，根據您的URL比對規則，驗證修改是否正確套用至目標頁面。

網站體驗的點選追蹤 web-click-tracking

追蹤使用者與元素的互動，以測量參與度並收集深入分析。 點選追蹤資料可在參與報表中取得，並可用於衡量網路體驗修改的成效。

啟用（即時）網頁體驗時，您也可以使用Adobe Customer Journey Analytics建立報表（需要產品訂閱）。 若要改善網站體驗監控功能，您也可以追蹤網站任何特定元素的點按次數。 追蹤可讓您在網頁報告中顯示該元素的點選次數。

如需Customer Journey Analytics和建立網頁報表的詳細資訊，請參閱Customer Journey Analytics檔案。

  1. 在網頁體驗編輯器中選取元素，例如影像或連結。

  2. 在元素屬性或內容工具列中，按一下​ 按一下追蹤元素 ​圖示。

    啟用網頁體驗元素的點選追蹤 {width="600" modal="regular"}

  3. 開啟左側面板中的點選追蹤清單，並修改​ 追蹤的動作 ​值，以在您的報告中識別此互動。

    設定網頁體驗的點選追蹤識別 {width="600" modal="regular"}

6ef00091-a233-4243-8773-0da8461f7ef0