可視化體驗撰寫器選項

當您在Adobe Target Visual Experience Composer (VEC)中按一下頁面元素時,功能表會顯示該元素型別可用的選項。 此外,DOM 路徑會顯示在頁面底部,讓您輕鬆導覽頁面結構。

各種Visual Experience Composer (VEC)動作會分組到適當的功能表選項中,讓您的工作更快更有效率:

VEC 選項功能表

NOTE
可用的選項取決於您建立或編輯的活動型別。

Edit

可使用下列選項:

Text/HTML edit-text-html

變更元素的 HTML 程式碼,例如文字區域、按鈕或連結的文字。

除了 HTML 程式碼,您可以編輯和插入自訂 JavaScript。

編輯A/B和Experience Targeting活動的文字和HTML時,有數個RTF格式選項可供使用。 您可選擇字型、選取字型樣式、變更文字對齊方式,以及其他標準文字格式化選項。修改 HTML 時,您可在 HTML 的程式碼檢視和 RTF 編輯之間切換。

以下是可巢狀的 HTML5 標記:

標記
允許的巢狀標記
<a>
<h1-h6>, <p>, <ul>, <ol>, <menu>, <div>, <figure>, <figcaption>
<ins>
<h1-h6>, <p>, <ul>, <ol>, <menu>
<del>
<ul>, <ol>, <menu>, <h1-h6>, <p>
<label>
<p>

Background Color

使用檢色器來選取或設定背景顏色。您可以選取一個色票,然後使用 RGB 值或色彩十六進位代碼調整它。檢色器中的紅色 x 可讓背景透明化。

注意: 此選項無法供設定了背景影像的元素使用。

Styles styles

使用Styles面板檢視或編輯所選元素的現有樣式的值。 您也可以新增其他樣式。

若要存取Styles面板,請按一下VEC中的頁面元素,然後按一下​ Edit > Styles

Styles面板會顯示在VEC的右側。 此面板包含可讓您編輯或新增至所選元素的樣式清單。如果您習慣使用階層式樣式表 (CSS) 或如果您收到來自開發人員的程式碼,即時 CSS 編輯器可讓您檢視變更及新增樣式。

樣式面板

當您套用不同的樣式時,在您變更任何區段後,只要按一下顯示於Styles面板右上角的Revert圖示,即可隨時回覆變更。 按一下Revert圖示會還原目前區段面板上的所有變更。

展開每個區段以編輯或新增樣式 (如下所述)。若要儲存變更,請按一下面板頂端的Back圖示以返回面板的主要顯示,然後按一下​ Save

主面板上以及各個區段面板上每個選項旁的藍點表示,您已變更對應的樣式。 此視覺指示器可讓您在按一下Save前輕鬆檢閱變更。

NOTE
版面變更、背景顏色、調整大小和移動的快速動作在 VEC 功能表中也有個別的動作可供使用。這些選項可作為個別動作使用,您也可以使用「樣式」選單,如以下所述。
  • Background

    變更背景顏色和影像。

    • 顏色 (指定顏色代碼或使用檢色器)

    • 影像 (從影像選擇器選取影像)

    • 影像來源 (指定外部 URL)

    • 附件

      • 按一下頂端的下拉式清單,選取捲動、固定或本機
      • 按一下底部的下拉式清單,選取重複、重複 x、重複 y、不重複、空格或圓角
    • 片段

      • 按一下頂端的下拉式清單,選取邊框方塊、邊框間距方塊、內容方塊或文字
      • 按一下底部的下拉式清單,選取自動音訊或音訊
  • Typography

    變更元素的印刷樣式。印刷樣式編輯既快速又簡單。

    雖然RTF編輯器(編輯文字/HTML)可供進行微調使用,但可透過此選項使用變更整個元素的快速動作。 如果您只要將印刷樣式變更套用至局部文字 (而非全部文字),請使用 RTF 編輯器

    您可以編輯下列印刷樣式:

    • Font size
    • Font weight
    • Font style
    • Color (指定色彩代碼或使用檢色器)
    • Word spacing
    • Line height
    • Text alignment
  • Margin

    變更所選元素的邊界。您可以變更上、下、左、右邊界。

    按一下每個邊界的下拉式圖示,以從下列選項中選擇:

    • Auto
    • Value (拖曳滑桿以設定邊界,或指定每個邊界的畫素數量)

    邊界支援正值和負值。

    Target也支援其他大小單位,例如rem、pc、em。 如需這些單位的詳細資訊,請參閱網頁樣式表CSS提示與秘訣

  • Padding

    變更所選元素的邊框間距。您可以變更上、下、左、右邊框間距。

    拖曳滑桿以設定邊框間距,或為邊框間距指定像素數量。

    邊框間距支援 0 以上的寬度刻度。

    Target也支援其他大小單位,例如rem、pc、em。

  • Border

    按一下面板頂端的邊框圖示,以變更所選元素的邊界。

    您可以編輯每個邊框的以下樣式 (上、下、左和右):

    • Border style (無、隱藏、點狀、虛線、實線或雙線)
    • Border color (指定色彩代碼或使用檢色器)
    • Border width (拖曳滑桿以選取邊框寬度,或以畫素指定寬度)

    邊框支援 0 以上的寬度刻度。

    Target也支援其他大小單位,例如rem、pc、em。

  • Position

    從所選元素的目前位置移動該元素。您可以變更專案的上、下、左、右和Z索引位置。

    按一下Static下拉式清單,以從下列位置選項中選擇:

    • Static
    • Relative
    • Absolute
    • Sticky
    • Fixed

    按一下每個位置的下拉式圖示,以從下列選項中選擇:

    • Auto
    • Value (拖曳滑桿以定位元素,或指定您要移動元素的畫素數量)

    位置支援正值和負值。

    Target也支援其他大小單位,例如rem、pc、em。

  • Size

    變更所選元素的寬度和高度。

    按一下Width和Height旁的下拉式圖示,以從下列選項中選擇:

    • Auto
    • Value (拖曳滑桿以調整元素大小,或指定每個維度的畫素數量)
  • Filter

    拖曳每個篩選器選項的滑桿,或指定想要的百分比:

    • Sepia
    • Contrast
    • Brightness
    • GrayScale
    • Blur
    • Opacity
    • Invert
      *​ Hue-rotate
    • Saturate
  • CSS Editor

    如果您習慣使用階層式樣式表 (CSS) 或如果您收到來自開發人員的程式碼,即時 CSS 編輯器可讓您檢視變更及新增樣式。

    CSS 編輯器會在樣式面板中顯示您所做的任何變更。如下圖所示,已變更字型大小、上邊框和影像大小:

    含有變更的 CSS 編輯器

    請注意上圖中Typography、Border和Size選項旁的藍點。 這些點代表您已變更這些區段。 如果您開啟這些區段面板,藍點會顯示在您已變更的特定選項旁邊。

    如果Styles中預設沒有您想要的樣式,您可以輸入自己的程式碼。

    CSS編輯器只會顯示目前工作階段的詳細資料。 如果您儲存變更然後重新開啟編輯器,即使您再次選取相同的元素,先前變更的相關詳細資料也不會顯示在編輯器中。

    note important
    IMPORTANT
    您可以使用 CSS 編輯器套用背景影像,但可能會導致忽隱忽現的情形。請在部署前測試您的變更。

CSS Class

指定用於元素的預先定義 CSS 類別。如果選取超過一個元素,請將多個 CSS 類別以空格分隔。

可用於A/B、Automated Personalization和Multivariate Test活動。

變更連結中的 URL。

使用「編輯連結」來更新選取器以指向相同的影像元素。不過,不支援連結至不同的影像元素。若要連結至不同的影像元素,請從程式碼編輯器中刪除原始動作,並使用Visual Experience Composer將動作套用至其他影像元素。

Insert Before

可使用下列選項:

Offer Decision

新增在 Adobe Journey Optimizer🔗中建立的優惠方案,以使用offer decisioning向客戶呈現最佳優惠方案和體驗。

注意: ​此選項僅在編輯或建立手動A/B TestExperience Targeting (XT)活動時可用。 此選項不適用於其他活動型別。

如需詳細資訊,請參閱使用優惠決定

Image、HTML和Text

除了修改現有內容以外,新增任何類型的元素至您的頁面。新增文字、代碼、清單和更多內容來建立完全不同的體驗進行測試。

在頁面上選取元素,然後按一下「Insert Before」並選擇您要插入影像、HTML或文字。 插入的元素會出現在選取的元素之前。

所插入元素的行為取決於頁面、CSS 和其他頁面組態選項的結構。需要 HTML 才能讓您的頁面正確出現。在插入項目之後,請一律測試您的頁面,以確定它能如預期般顯示。

Recommendations支援Insert Before DIV、SECTION和ARTICLE標籤的內容。

注意: 插入影像需要啟用 Adobe Scene7 Publishing System 發佈系統,這樣您才會具備影像資料庫的存取權。

建議

包括 A/B 測試 (含自動分配和自動鎖定目標) 與體驗鎖定目標 (XT) 活動內的建議。如需詳細資訊,請參閱以選件方式使用 Recommendations

Experience Fragment

在 Target 活動中插入在 Adobe Experience Manager (AEM) 中建立的體驗片段,以輔助最佳化或個人化。如需詳細資訊,請參閱 AEM Experience 體驗片段

Insert After

可使用下列選項:

Offer Decision

新增在 Adobe Journey Optimizer🔗中建立的優惠方案,以使用offer decisioning向客戶呈現最佳優惠方案和體驗。

注意: ​此選項僅在編輯或建立手動A/B TestExperience Targeting (XT)活動時可用。 此選項不適用於其他活動型別。

如需詳細資訊,請參閱使用優惠決定

Image、HTML和Text

除了修改現有內容以外,新增任何類型的元素至您的頁面。新增文字、代碼、清單和更多內容來建立完全不同的體驗進行測試。

在頁面上選取元素,然後按一下「Insert After」並選擇您要插入影像、HTML或文字。 插入的元素會出現在選取的元素之後。

所插入元素的行為取決於頁面、CSS 和其他頁面組態選項的結構。需要 HTML 才能讓您的頁面正確出現。在插入項目之後,請一律測試您的頁面,以確定它能如預期般顯示。

Recommendations支援Insert After DIV、SECTION和ARTICLE標籤的內容。

注意: 插入影像需要啟用 Adobe Scene7 Publishing System 發佈系統,這樣您才會具備影像資料庫的存取權。

建議

包括 A/B 測試 (含自動分配和自動鎖定目標) 與體驗鎖定目標 (XT) 活動內的建議。如需詳細資訊,請參閱以選件方式使用 Recommendations

Experience Fragment

在 Target 活動中插入在 Adobe Experience Manager (AEM) 中建立的體驗片段,以輔助最佳化或個人化。如需詳細資訊,請參閱 AEM Experience 體驗片段

Replace Content

可使用下列選項:

Offer Decision

新增在 Adobe Journey Optimizer🔗中建立的優惠方案,以使用offer decisioning向客戶呈現最佳優惠方案和體驗。

注意: ​此選項僅在編輯或建立手動A/B TestExperience Targeting (XT)活動時可用。 此選項不適用於其他活動型別。

如需詳細資訊,請參閱使用優惠決定

Image

從內容庫選取不同的影像。可用於交換的影像包括上傳至 Experience Cloud 資產資料夾或上傳在 Target 內容庫中的影像。

在初始活動建立期間,顯示的 URL 不是用於傳遞的 URL。在活動同步時,該 URL 會更新為生產 Scene7 URL。

例如,初始 URL 看起來可能如以下範例:

https://test.marketing.adobe.com/content/dam/mac/scholasticinc/Aug_MBM.jpeg?ch_ck=1470774943867

活動同步之後,傳送 URL 看起來可能如以下範例:

http://s7d2.scene7.com/is/image/TargetTest/Aug_MBM?tm=1470768352933&fit=constrain&hei=173&wid=300

Recommendations 在 DIV、SECTION 和 ARTICLE 標記中可支援「取代為」。

注意: 交換影像需要 Adobe Scene7 發佈系統帳戶。

HTML Offer

從Content Library中選取其他選件。

注意: ​Target HTML 選件會儲存在 伺服器上。

HTML選件最高可達256 KB。

建議

包括 A/B 測試 (含自動分配和自動鎖定目標) 與體驗鎖定目標 (XT) 活動內的建議。如需詳細資訊,請參閱以選件方式使用 Recommendations

Experience Fragment

在 Target 活動中插入在 Adobe Experience Manager (AEM) 中建立的體驗片段,以輔助最佳化或個人化。如需詳細資訊,請參閱 AEM Experience 體驗片段

Layout

可使用下列選項:

Rearrange

將元素拖曳到相同上層元素內的另一個位置或 DIV。其他元素會移動位置,為重新排列的元素騰出空間。

注意:點選追蹤對重新排列的專案沒有作用。

目前,某些VEC動作(例如Rearrange和Move)假設來源和目的地父元素的同層級元素已完全載入。 如果在父DOM元素(來源或目的地)底下發生延遲載入,這些VEC動作可能會造成不一致的行為。 我們正在研究更可靠的方法,讓VEC動作在延遲載入的DOM元素中運作。 作為臨時因應措施,您可以在這些案例中使用Custom Code來呈現您的體驗。

Resize

在您的頁面上調整元素的大小。選取Resize時,元素右下角會出現控制代碼,可讓您拖曳該角調整大小。 按住 Shift 鍵來保持相同的外觀比例。

注意: 不能對行內元素調整大小。

Move move

在頁面上移動元素。與Rearrange選項不同,Move不會移動其他元素來騰出空間給要移動的元素。 使用方向鍵來微調此移動。(規劃的增強功能:支援確保移動的元素不會隱藏在其他元素後面。)

在某些情況下,例如當CSS限制需要元素保留在其上層元素內時,您無法將元素移出其上層之外。 元素無法移到有下列 CSS 屬性的容器之外: overflow: hidden

請參閱上述Rearrange,以取得由於延遲載入DOM元素而導致Move和Rearrange動作不一致之行為的詳細資訊。

Hide

隱藏元素。白色空間會保留,但移除內容。

Remove

移除元素。影像背後的白色空間會移除,而元素所在位置的空間會折疊。

注意: 您無法使用此選項移除 "classic" mbox 內的項目 (在 Target Classic 促銷活動內建立的 mbox)。

Expand Section

除了原始選取的元素以外,請選取上層元素。選取任何上層元素時,系統會自動選取該元素的所有下層。您可以展開選取範圍多次。

開啟連結的目的地。

Undo/Redo

在編輯工作階段期間,還原您對活動所進行的變更。您也可以重做先前已還原的變更。

考量事項 considerations

  • 如果選件包含HTML內容,請參閱at.js如何運作中的「at.js如何呈現具有HTML內容的選件」以取得詳細資訊。

自訂元素支援 custom

VEC支援Web元件,可讓您在自訂元素以及自訂元素內部的元素上建立和測試個人化體驗和選件。 此功能適用於所有Target活動型別。

NOTE
at.js version 2.7.0 (或更新版本)支援自訂元素的VEC支援。 確保您的網站已部署所需版本。 如果您正在使用視覺化體驗撰寫器Helper擴充功能,它也必須部署必要的at.js版本。 上述VEC選項無法看見,且無法搭配不支援的at.js版本使用。
Adobe Experience Platform Web SDK目前不支援自訂元素的VEC支援。

大部分的VEC動作都可在自訂事件和內部自訂事件上支援,但下列例外情況除外:

下列動作不適用於自訂元素:

  • Edit

    • Text/HTML
    • Link
    • Edit Source
  • Replace Content

下列動作在自訂元素中無法使用:

  • Layout
    • Rearrange

使用DOM路徑導覽元素 dom-path

當您按一下頁面上的元素時,VEC 選項功能表隨即顯示。此外,當您按一下元素時,對應的 DOM 路徑會顯示於頁面底部。

DOM 路徑

您可以使用 DOM 路徑快速查看有關已選取元素 (類型、ID 和類別) 的資訊,然後向上或向下移動 DOM 路徑以選取想要的元素。

當您將游標暫留在 DOM 路徑上方時,藍色方塊隨即醒目提示 VEC 中的對應元素。當您按一下元素時,橘色方塊隨即醒目提示元素且 VEC 選項功能表隨即顯示 (如上所述)。

您可以使用 DOM 路徑,輕鬆導覽至 VEC 中的任何父項、同層級項目或子項元素。

設定點擊追蹤時,也可使用 DOM 路徑功能。

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654