[Beta]{class="badge informative" title="此功能目前在有限測試版中提供"}
網站體驗設計
在您建立網頁體驗之後，請使用內容設計空間來定義您要套用至網頁的修改。
先決條件
在設計Web體驗之前，請確定已符合下列需求：
-
產品管理員已設定一或多個網路通道，以定義要納入網路體驗的URL （頁面）。 如需詳細資訊，請參閱網路通道設定。
-
您的網站已實作Adobe Experience Platform Web SDK (
alloy.js)，以識別訪客並傳送內容。 需要Adobe Experience Platform Web SDK 2.16版或更高版本。 -
您擁有必要的許可權，才能在歷程中建立和管理網頁體驗：
- 行銷活動 > 管理行銷活動 — 需要新增或更新Web個人化動作節點。
- 行銷活動 > 檢視行銷活動 — 需要檢視Web個人化動作節點的詳細資料。
網站體驗編輯器
Journey Optimizer B2B edition提供兩種型別的編輯器，可用於設計Web修改：
在Web體驗屬性中，使用 視覺化編輯器 選項來決定編輯器的型別。 啟用使用視覺化編輯器的選項，或停用它以使用非視覺化編輯器。
視覺化編輯器 visual-editor
視覺化編輯器會在iframe內載入網頁，您可於其中選取元素，並直接在頁面預覽中套用修改。 完成下列步驟，使用視覺化編輯器設計您的網頁體驗：
-
在網頁體驗詳細資訊頁面中顯示 內容 索引標籤時，按一下右側面板中的編輯網頁體驗。
視覺化編輯器會根據Web Channel設定載入您的網站。
-
如有需要，請按一下右上方的瀏覽，並使用網站導覽列載入您要修改的特定頁面。
您也可以在上方的欄位中輸入頁面URL。
note note NOTE 確保載入的頁面符合在您的Web Channel設定中定義的URL模式。 按一下右上角的檢視組態詳細資料，即可檢視所選Web通道組態的URL或頁面比對規則。 在視覺化編輯器中
按一下右上角的設計，以載入設計空間中的頁面。
-
若要定義您要如何修改網頁體驗的顯示頁面，您可以：
-
重複步驟2以載入您要納入網頁體驗的其他頁面，並重複步驟3以定義頁面修改。
-
檢閱您的修改，並視需要進行任何調整。
-
修改完成後，按一下編輯器上方的左箭頭，返回Web體驗屬性。
修改元素
按一下顯示頁面中的元素以選取它。 藍色邊框會指出選取的元素，而內容工具列則會顯示修改選項。
工具列選項視選取的元件型別而定：
針對選取的元素，右側面板中的屬性會變更，以反映可用的樣式和動作。 按一下面板頂端的動作圖示，即可複製、按一下追蹤、刪除或隱藏選取的元素。
-
在頁面上選取影像元素。
-
按一下內容工具列或右側面板中的 選擇影像 圖示。
-
瀏覽並從資產庫中選取影像。
-
視需要使用右側面板中的影像樣式選項。
-
在頁面上選取按鈕元素。
-
（選擇性）為按鈕輸入新文字，或選取文字字串並輸入取代文字。
您可以使用帳戶或個人資料中的資料，透過個人化來變更按鈕文字。
-
視需要使用右側面板中的按鈕樣式選項。
-
在頁面上選取容器元素。
-
視需要使用右側面板中的容器樣式選項。
插入新元件
當您在視覺化編輯器的設計左側導覽中選取 + 圖示時，可以將下列元件型別新增至頁面作為Web體驗修改：
- 分隔線 — 使用此元件插入分隔線，以組織電子郵件的版面配置和內容。 您可以從右側面板中的屬性調整樣式屬性，例如線條顏色、樣式和高度。 如需詳細資訊，請參閱內容元件中的分隔線。
- HTML — 使用此元件在現有結構中複製 — 貼上HTML程式碼。 它可讓您建立免費的模組化HTML元件，以重複使用某些外部內容。 如需詳細資訊，請參閱內容元件中的HTML。
- 影像 — 使用此元件將影像檔案插入頁面。 您可以從右側面板中的屬性調整樣式屬性，例如寬度和高度。 如需詳細資訊，請參閱內容元件中的影像。
- 標題 — 使用此元件插入標題類別文字。 您可以從右側面板中的屬性調整樣式屬性，例如文字顏色、樣式、字型和大小。 如需詳細資訊，請參閱內容元件中的文字。
- 段落 — 使用此元件插入標準文字元素。 您可以從右側面板中的屬性調整樣式屬性，例如文字顏色、樣式、字型和大小。 如需詳細資訊，請參閱內容元件中的文字。
- 連結 — 使用此元件將獨立文字連結插入至指定的URL。 您可以從右側面板中的屬性調整樣式屬性，例如文字顏色、樣式、對齊方式和大小。
在左側選取元件型別，然後將滑鼠游標停留在您要新增元件的位置旁的元素上。
按一下顯示的按鈕之一來放置元件：
- *插入在之前 — 將元件插入在選取的元素之前。
- *插入在之後 — 在選取的元素之後插入元件。
若要取消選取要插入的元件型別，請按一下頁面頂端所顯示的內容藍色橫幅中的ESC。
非視覺化編輯器 non-visual-editor
當您需要進行無法在視覺化編輯器中輕鬆完成的修改時，請使用非視覺化編輯器。 這種程式碼型方法可讓您精確控制元素目標定位和修改。 完成下列步驟，使用非視覺化編輯器設計您的網頁體驗：
-
在網頁體驗詳細資訊頁面中顯示 內容 索引標籤時，按一下右側面板中的新增修改。
非視覺化編輯器會根據Web Channel設定載入頁面。
-
定義您要進行的第一個修改。
左側面板會顯示現有修改的清單（如果有的話）。 按一下[新增] 以定義新的修改。 如果未定義任何修改，面板會預設為 新增修改 選項。
-
按一下[儲存]以套用修改。
CSS選擇器修改
CSS選取器修改可讓您使用標準CSS選取器語法精確地鎖定元素。
-
選擇 CSS選取器 作為修改型別。
-
在 CSS元素選取器 欄位中輸入選取器。
**選取器範例：**
| 選擇器 | 目標 |
| -------- | ------- |
| '#hero-banner' | ID為'hero-banner'的元素 |
| '.cta-button' | 所有具有'cta-button'類別的元素 |
| '頁首nav a' | 導覽內的連結，在標題內 |
| '[data-offer="premium"]' | 具有特定資料屬性的元素 |
-
選擇 動作型別 並指定必要的資訊/內容。
-
設定內容 — 在 內容 欄位中，輸入 CSS元素選取器 值所識別之元素的文字。
-
設定屬性 — 指定與目前CSS選取器關聯的屬性，以便此屬性可以識別元素。 在 屬性名稱 欄位中輸入名稱，並在 內容 欄位中輸入值。 如果屬性已經存在，則會更新值；否則，會新增具有指定名稱和值的新屬性。
-
-
（選擇性）按一下「新增個人化」並使用「個人化編輯器」來建立內容的自訂個人化。
頁面修改
您可以使用頁面<head>修改型別來新增自訂程式碼。 <head>元素是中繼資料（資料的相關資料）的容器，並置於<html>標籤和<body>標籤之間。 在此情況下，程式碼不會等待內文或頁面載入事件，而是在頁面載入開始時執行。
<head>元素通常用於將JavaScript或CSS程式碼新增至頁面頂端。 後續視覺化動作的選取器取決於此標籤中新增的HTML元素。
-
選擇 頁面
<head>作為修改型別。 -
在 內容 方塊中新增您的自訂程式碼。
note caution CAUTION 您只能新增 <script>和<style>專案至<head>區段。 新增<div>標籤和其他元素可能會造成剩餘<head>個元素填入<body>中。
-
（選擇性）按一下「新增個人化」並使用「個人化編輯器」來建立內容的自訂個人化。
管理修改 manage-modifications
您建立的所有修改都會受到追蹤，並可從視覺編輯器和非視覺編輯器的 修改 面板進行管理。 按一下左側工具列中的修改 圖示以檢視所有修改。
每個修改記錄包括：
- 目標元素或選取器
- 修改型別（例如編輯、隱藏或插入）
- 變更的預覽
編輯修改
-
在 修改 清單中，尋找您要編輯的修改。
-
按一下更多功能表 ( … )圖示，然後選擇編輯。
-
視需要更新修改屬性。
-
按一下[儲存]儲存變更。
刪除修改
-
在 修改 清單中，尋找您要移除的修改。
-
按一下更多功能表 ( … )圖示，然後選擇刪除修改。
-
出現提示時確認移除。
預覽您的修改
發佈前，請先預覽修改內容向訪客的顯示方式。
使用視覺編輯器頂端的裝置預覽選項來檢視您的修改內容：
- 桌面
- 平板電腦
- 行動
預覽會更新，以顯示修改在每個裝置大小上的呈現方式。
使用URL列導覽至您網路頻道設定內的不同頁面。 然後，根據您的URL比對規則，驗證修改是否正確套用至目標頁面。
網站體驗的點選追蹤 web-click-tracking
追蹤使用者與元素的互動，以測量參與度並收集深入分析。 點選追蹤資料可在參與報表中取得，並可用於衡量網路體驗修改的成效。
啟用（即時）網頁體驗時，您也可以使用Adobe Customer Journey Analytics建立報表（需要產品訂閱）。 若要改善網站體驗監控功能，您也可以追蹤網站任何特定元素的點按次數。 追蹤可讓您在網頁報告中顯示該元素的點選次數。
如需Customer Journey Analytics和建置Web報表的詳細資訊，請參閱Customer Journey Analytics檔案。
-
在網頁體驗編輯器中選取元素，例如影像或連結。
-
在元素屬性或內容工具列中，按一下 按一下追蹤元素 圖示。
-
開啟左側面板中的點選追蹤清單，並修改 追蹤的動作 值以在您的報告中識別此互動。
