當您按一下Adobe Target Visual Experience Composer (VEC)中的頁面元素時,功能表會顯示該元素類型可用的選項。 此外,DOM 路徑會顯示在頁面底部,讓您輕鬆導覽頁面結構。
各種可視化體驗撰寫器 (VEC) 動作會分組成適當的功能表選項,讓您更快速且更有效率地執行工作:
可用的選項取決於您編輯的活動類型。
可使用下列選項:
變更元素的 HTML 程式碼,例如文字區域、按鈕或連結的文字。
除了 HTML 程式碼,您可以編輯和插入自訂 JavaScript。
針對 A/B 和體驗鎖定目標活動編輯文字和 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> |
使用檢色器來選取或設定背景顏色。您可以選取一個色票,然後使用 RGB 值或色彩十六進位代碼調整它。檢色器中的紅色 x 可讓背景透明化。
注意: 此選項無法供設定了背景影像的元素使用。
使用樣式面板檢視或編輯所選元素的現有樣式的值。您也可以新增其他樣式。
若要存取Styles面板,請從VEC中按一下頁面元素,然後按一下「編輯]>Styles」。[
樣式面板會顯示在 VEC 的右側。此面板包含可讓您編輯或新增至所選元素的樣式清單。如果您習慣使用階層式樣式表 (CSS) 或如果您收到來自開發人員的程式碼,即時 CSS 編輯器可讓您檢視變更及新增樣式。
當您套用不同的樣式時,在您對任何區段進行變更後,只要按一下顯示於樣式面板右上角的還原圖示,即可隨時還原變更。請注意,按一下還原圖示會還原目前區段面板上的所有變更。
展開每個區段以編輯或新增樣式 (如下所述)。若要儲存變更,請按一下面板頂端的返回圖示以返回面板的主要顯示,然後按一下儲存。
請注意,主要面板上以及各個區段面板的每個選項旁會顯示藍點,代表您已對對應的樣式做出變更。這可讓您在按一下儲存前輕鬆檢閱變更。
版面變更、背景顏色、調整大小和移動的快速動作在 VEC 功能表中也有個別的動作可供使用。這些選項能以個別的動作運用,或者您也可以按照此處所述使用樣式功能表。
背景
變更背景顏色和影像。
印刷樣式
變更元素的印刷樣式。印刷樣式編輯既快速又簡單。
雖然 RTF 編輯器 (編輯文字/HTML) 可供進行微調使用,仍可透過此選項使用對整個元素進行變更的快速動作。如果您只要將印刷樣式變更套用至局部文字 (而非全部文字),請使用 RTF 編輯器。
您可以編輯下列印刷樣式:
利潤
變更所選元素的邊界。您可以變更上、下、左、右邊界。
按一下每個邊界的下拉式圖示,以從下列選項中選擇:
邊界支援正值和負值。
Target 也支援其他大小單位,例如 rem、pc、em 等。如需這些單位的詳細資訊,請參閱網頁樣式表CSS秘訣與訣竅。
邊框間距
變更所選元素的邊框間距。您可以變更上、下、左、右邊框間距。
拖曳滑桿以設定邊框間距,或為邊框間距指定像素數量。
邊框間距支援 0 以上的寬度刻度。
Target也支援其他大小單位,例如rem、pc、em等。
邊框
按一下面板頂端的邊框圖示,以變更所選元素的邊界。
您可以編輯每個邊框的以下樣式 (上、下、左和右):
邊框支援 0 以上的寬度刻度。
Target也支援其他大小單位,例如rem、pc、em等。
位置
從所選元素的目前位置移動該元素。您可以變更元素的頂端、底部、左側、右側和Z-index位置。
按一下靜態下拉式清單,以從下列位置選項中選擇:
按一下每個位置的下拉式圖示,以從下列選項中選擇:
位置支援正值和負值。
Target也支援其他大小單位,例如rem、pc、em等。
大小
變更所選元素的寬度和高度。
按一下寬度和高度旁邊的下拉式圖示,以從下列選項中選擇:
篩選
拖曳每個篩選器選項的滑桿,或指定想要的百分比:
CSS 編輯器
如果您習慣使用階層式樣式表 (CSS) 或如果您收到來自開發人員的程式碼,即時 CSS 編輯器可讓您檢視變更及新增樣式。
CSS 編輯器會在樣式面板中顯示您所做的任何變更。如下圖所示,已變更字型大小、上邊框和影像大小:
請注意上圖印刷樣式、邊框和大小選項旁邊的藍點。這些點代表您已變更這些區段。如果您開啟這些區段面板,藍點會顯示在您已變更的特定選項旁邊。
如果您想要的樣式無法依預設在樣式中取得,您可以輸入自己的程式碼。
請注意,CSS 編輯器只會顯示目前工作階段的詳細資料。如果您儲存變更然後重新開啟編輯器,即使您再次選取相同的元素,先前變更的相關詳細資料也不會顯示在編輯器中。
您可以使用 CSS 編輯器套用背景影像,但可能會導致忽隱忽現的情形。請在部署前測試您的變更。
指定用於元素的預先定義 CSS 類別。如果選取超過一個元素,請將多個 CSS 類別以空格分隔。
可用於「A/B」、「自動個人化」和「多變數測試」活動。
變更連結中的 URL。
使用「編輯連結」來更新選取器以指向相同的影像元素。不過,不支援連結至不同的影像元素。若要連結至不同的影像元素,請從代碼編輯器刪除原始動作,並使用可視化體驗撰寫器在其他影像元素上套用動作。
可使用下列選項:
除了修改現有內容以外,新增任何類型的元素至您的頁面。新增文字、代碼、清單和更多內容來建立完全不同的體驗進行測試。
在頁面上選取元素,然後按一下「插入在前」,並選擇您要插入影像、HTML 或文字。插入的元素會出現在選取的元素之前。
所插入元素的行為取決於頁面、CSS 和其他頁面組態選項的結構。需要 HTML 才能讓您的頁面正確出現。在插入項目之後,請一律測試您的頁面,以確定它能如預期般顯示。
「建議」支援「插入在前」功能,可在 DIV、SECTION 和 ARTICLE 標籤的內容前插入。
注意: 插入影像需要啟用 Adobe Scene7 Publishing System 發佈系統,這樣您才會具備影像資料庫的存取權。
包括 A/B 測試 (含自動分配和自動鎖定目標) 與體驗鎖定目標 (XT) 活動內的建議。如需詳細資訊,請參閱以選件方式使用 Recommendations。
在 Target 活動中插入在 Adobe Experience Manager (AEM) 中建立的體驗片段,以輔助最佳化或個人化。如需詳細資訊,請參閱 AEM Experience 體驗片段。
可使用下列選項:
除了修改現有內容以外,新增任何類型的元素至您的頁面。新增文字、代碼、清單和更多內容來建立完全不同的體驗進行測試。
在頁面上選取元素,然後按一下「插入在後」,並選擇您要插入影像、HTML 或文字。插入的元素會出現在選取的元素之後。
所插入元素的行為取決於頁面、CSS 和其他頁面組態選項的結構。需要 HTML 才能讓您的頁面正確出現。在插入項目之後,請一律測試您的頁面,以確定它能如預期般顯示。
「Recommendations」支援「插入在後」功能,可在 DIV、SECTION 和 ARTICLE 標籤的內容後插入。
注意: 插入影像需要啟用 Adobe Scene7 Publishing System 發佈系統,這樣您才會具備影像資料庫的存取權。
包括 A/B 測試 (含自動分配和自動鎖定目標) 與體驗鎖定目標 (XT) 活動內的建議。如需詳細資訊,請參閱以選件方式使用 Recommendations。
在 Target 活動中插入在 Adobe Experience Manager (AEM) 中建立的體驗片段,以輔助最佳化或個人化。如需詳細資訊,請參閱 AEM Experience 體驗片段。
可使用下列選項:
從內容庫選取不同的影像。可用於交換的影像包括上傳至 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 發佈系統帳戶。
從「內容資料庫」選取不同的選件。
**注意:**Target HTML 選件會儲存在 伺服器上。
HTML 選件的大小最多可以是 256KB。
包括 A/B 測試 (含自動分配和自動鎖定目標) 與體驗鎖定目標 (XT) 活動內的建議。如需詳細資訊,請參閱以選件方式使用 Recommendations。
在 Target 活動中插入在 Adobe Experience Manager (AEM) 中建立的體驗片段,以輔助最佳化或個人化。如需詳細資訊,請參閱 AEM Experience 體驗片段。
可使用下列選項:
將元素拖曳到相同上層元素內的另一個位置或 DIV。其他元素會移動位置,為重新排列的元素騰出空間。
注意: 點擊追蹤對重新排列的項目沒有作用。
在您的頁面上調整元素的大小。選取「調整大小」時,元素的右下角便會出現控點,可讓您拖曳該角進行大小調整。按住 Shift 鍵來保持相同的外觀比例。
注意: 不能對行內元素調整大小。
在頁面上移動元素。與「重新排列」選項不同,「移動」選項不會移動其他元素來為已移動的元素騰出空間。使用方向鍵來微調此移動。(計劃的增強功能: 支援以確定已移動的元素不會隱藏在其他元素之後。)
在某些情況下,例如當 CSS 限制需要元素保留在其上層元素內時,您無法將元素移出其上層之外。元素無法移到有下列 CSS 屬性的容器之外: overflow: hidden
。
隱藏元素。白色空間會保留,但移除內容。
移除元素。影像背後的白色空間會移除,而元素所在位置的空間會折疊。
注意: 您無法使用此選項移除 "classic" mbox 內的項目 (在 Target Classic 促銷活動內建立的 mbox)。
除了原始選取的元素以外,請選取上層元素。選取任何上層元素時,系統會自動選取該元素的所有下層。您可以展開選取範圍多次。
開啟連結的目的地。
在編輯工作階段期間,還原您對活動所進行的變更。您也可以重做先前已還原的變更。
當您按一下頁面上的元素時,VEC 選項功能表隨即顯示。此外,當您按一下元素時,對應的 DOM 路徑會顯示於頁面底部。
您可以使用 DOM 路徑快速查看有關已選取元素 (類型、ID 和類別) 的資訊,然後向上或向下移動 DOM 路徑以選取想要的元素。
當您將游標暫留在 DOM 路徑上方時,藍色方塊隨即醒目提示 VEC 中的對應元素。當您按一下元素時,橘色方塊隨即醒目提示元素且 VEC 選項功能表隨即顯示 (如上所述)。
您可以使用 DOM 路徑,輕鬆導覽至 VEC 中的任何父項、同層級項目或子項元素。
設定點擊追蹤時,也可使用 DOM 路徑功能。