Visual Experience Composer最佳作法和限制
為確保您的體驗如預期運作,請在使用Adobe Target Visual Experience Composer (VEC)時遵循最佳實務。 請注意重要提示和限制,以最大化效能並避免常見問題。
最佳實務 section_86CF28C99CFF40329E4CBAFE4DD78BB4
以下是使用VEC時的最佳作法:
將at.js參考置於頁面<head>
區段的頂端。
您可以在帳戶層級(已針對在帳戶中建立的所有活動啟用)或是在個別活動層級啟用Enhanced Experience Composer。
若要在帳戶層級啟用Enhanced Experience Composer,請按一下Administration > Visual Experience Composer,然後將Enable Enhanced Experience Composer開關切換到[開啟]位置。
在Enhanced Experience Composer中建立活動時,若要在活動層級啟用Visual Experience Composer,請按一下Configure > Page Delivery,然後將Enable Enhanced Experience Composer切換至[開啟]位置。
如果Enhanced Experience Composer無法在您網站的安全頁面上載入,您可以將特定的IP位址加入允許清單。
載入Enhanced Experience Composer的問題可藉由將下列IP位址列入允許清單來解決。 這些IP位址是用於用於Adobe Proxy的Enhanced Experience Composer伺服器。 只有針對活動編輯才需要這些資訊。您網站的訪客不需要將這些IP位址加入允許清單。
如需詳細資訊,請參閱 EEC將不會在疑難排解增強體驗撰寫器的相關問題 中,載入無法透過公用IP 存取的內部QA URL。
對於可能成為良好測試/目標候選項的最上層元素及其他任何元素,請使用唯一的 ID。
直接在 body 元素內的任何項目都應該有唯一的 ID。如果新元素插入 body 中,而程式碼散佈周圍,則至少可較容易辨識上層元素。
Target不需要ID,但使用ID會提高使用體驗撰寫器建立之體驗的可靠性。 Target在傳遞體驗時會使用CSS選取器來修改您的內容。 當您編輯體驗時,Visual Experience Composer會將選取器錨定至要修改之HTML元素的最近祖項(具有非null ID屬性)。 因此,不建議使用任何會設定或修改 HTML ID 屬性的機制 (包括 JavaScript 程式庫)。雖然這些ID可供Target體驗撰寫器用於建立活動,但如果JavaScript修改ID,則建立體驗時使用的ID在體驗執行時可能無法使用。 如果沒有 ID 可用,錨定到 ID 的選取器會失敗。
使用可輕鬆辨識的名稱來命名 CSS 類別。
在Visual Experience Composer中編輯CSS類別時,使用描述性類別名稱讓類別易於識別會很有幫助。 這有助於確保您編輯所需的 CSS 類別,且頁面如預期般地顯示。
隱藏或移除元素時,請勿使用 !important
CSS 屬性。
如果!important
CSS屬性存在,target.js
在傳遞期間所做的變更將會被網站的CSS規則覆寫。
避免使用 HTML 表格作為頁面配置。
儘量不使用 iFrame。
在 DOM 準備就緒後,請儘快排列所有 DOM 修改。
target.js
套用體驗應用程式之前套用,內容傳遞可能會中斷。 只有當目標元素的階層中出現 DOM 變更時,才會發生此狀況。在錨點元素中只使用純文字或影像標記。
<a>Anchor Text</a>
OR
<a href=""> <img src=""> </img> </a>
在內嵌元素內避免有區塊層級元素。
請勿在網站中使用 base 標記來解析 URL 和連結。
使用「編輯 HTML」來操作 DOM 結構可能會破壞選取器。
例如,如果您已採取兩個動作:
- 已新增類別至元素 1
- 已編輯元素 1 的 HTML
每次變更都會在VEC中建立新元素。 因為第二個動作會修改元素 1,如果您刪除元素 1,第二個動作便沒有任何項目需要修改,因此變更不再有作用。
換句話說,如果您使用文字新增元素,然後在個別的動作中使用不同文字編輯了該元素,則代碼編輯器會將這兩個動作顯示為個別的元素。編輯元素時,您會建立可修改您原始建立元素的新元素,包含編輯的文字。如果您之後刪除原始元素,編輯後文字將找不到編輯後的元素,因此將不會顯示。第二個元素會維持在元素的清單中,但它不會影響頁面,因為它變更的元素已不再存在。
檢視中使用的Visual Experience Composer元素選取器。
透過RTF編輯器來設計文字元素的樣式時,請使用<b>
和<i>
標籤。
- 對於粗體文字,請使用
<b>
而非<strong>
。 - 對於斜體文字,請使用
<i>
而非<em>
。
<strong>
和 <em>
標記可能會造成非預期的結果。
移除表單欄位時請小心。
請勿在指令碼內包含mboxCreate
。
mboxCreate
會使用document.write
,不建議在指令碼內包含 mboxCreate
。請改用 mboxDefine
和 mboxUpdate
,以達到相同目的。如果使用Target需要HTML程式碼進行初始化,請勿更新其JavaScript程式碼片段。
在頁面元件(例如滑桿、浮動視窗等)上執行動作(編輯HTML)時,傳送可能會顯示為已中斷。 VEC會在JavaScript將頁面元件例項化之後執行動作。
不過,當頁面的內容傳送給訪客時,則會在元件個體化之前套用此動作。因此,此元件的功能在傳送時可能會中斷,也可能不會。功能取決於此頁面上用來定義元件的指令碼的本質。
如果您測試傳送,且第一次可行,並不保證持續可行。可能有 (或沒有) 競爭狀況。
- 如果有競爭條件,傳送會間歇性運作。
- 如果沒有競爭條件,傳送一律有效。
將頁面測試多次,以確定傳送正常運作。
請勿在網站中使用 base 標記來解析 URL 和連結。
網站中可能用於鎖定目標的重要文字,應該放在元素的 HTML 程式碼內。
例如,假設您的程式碼如下,則無法在 VEC 中將 Shopping Cart 文字鎖定為目標:
code language-html |
---|
|
在此範例中,會在VEC中選取整個錨點元素,而執行鎖定目標會對其他元素造成負面影響。
請勿在JavaScript程式碼中使用top
或self
變數。
如果載入頁面時增加參數,一定要測試網站。
例如,為了開啟www.abc.com
,使用下列URL引數:
www.abc.com?mboxEdit=1&mboxDisable=1
這些參數允許在 iframe 中編輯。
新增這類參數之後,請確定網站可以正常載入。
確定頁面在 iframe 中正常開啟。
關閉網站上的iframe爆破'b5'7b法,並檢查網站是否如預期般在虛擬頁面上的iframe中開啟。 例如:
code language-html |
---|
|
注意事項 section_A0436B7B85BA467FA9DE13A9A40E6A6E
使用Visual Experience Composer設計活動時,請注意下列警告。
Move功能不支援z-index。
重新排列元素會影響點擊追蹤。
如果標示為點擊追蹤的元素重新排列,則重新排列過的元素會改變路徑。因此,點擊追蹤的對象就變成原始元素重新排列之前所在位置中的元素。
這是因為用於傳送活動內容的程式碼和用於追蹤點擊的程式碼,同時位於傳送至頁面的一段程式碼內。如果您瀏覽至另一個頁面並設定點擊追蹤,則活動內容程式碼和點擊追蹤程式碼都會傳送至該頁面。如果點擊追蹤頁面的頁面結構類似於執行測試的頁面,則測試內容也可能出現在點擊追蹤頁面上。
在身為mbox的<div>
中插入元素可能沒有作用。
insertBefore
而非insertAfter
。編輯父元素和子元素兩者時,請先編輯父元素。
無法選取以 mbox 為子元素的頁面元素。
例如,假設頁面包含:
code language-html |
---|
|
不應在體驗中選取外部div,因為頁面中以硬式編碼撰寫的mbox仍會呼叫Target並收到回應。 此回應會干擾已預定給更大頁面元素的回應。
客戶環境中可能會封鎖Proxy IP。
限制 section_F33C2EA27F2E417AA036BC199DD6C721
使用VEC時,請考量下列限制:
正在處理VEC與Chrome擴充功能原則變更的相容性。 ext
由於Google Chrome中更新了V3資訊清單原則,在瀏覽器剖析原始DOM之前,擴充功能無法再修改原始DOM。 因此,某些安全性指令碼(例如iframe-busting實作)可能會阻擋頁面在VEC中載入。
為確保相容性,當頁面載入Target iframe內時,應有條件地停用這些指令碼。 透過檢查window.adobeVecExtension
物件的存在可以安全地完成此程式,此物件是在VEC載入期間由Target插入。
下列程式碼片段是iframe-busting程式碼的範例,這類程式碼會造成網頁無法在VEC中載入:
window.top.location = window.self.location;
top.location.href = self.location.href;
當網頁內嵌於Target中時,可以使用簡單的檢查來進行驗證。 程式碼片段應如下所示:
code language-none |
---|
|
您無法將元素移到後面接著CSS屬性的容器之外。
您無法選取要重新排列的Button元素。
Mbox 上只能使用交換產品建議。
請勿重新排列和移動同一個元素。
Change Image動作不適用於轉盤中的影像。
例如,如果您的頁面包含具有六個影像的轉盤,而您想要將影像與轉盤的第二個影像交換,則Change Image動作不會運作。
因應措施是選取父容器並使用Edit HTML動作來編輯轉盤的HTML以更新所需影像的影像來源。
在 mbox 中無法調整影像大小。
交換影像之後,無法選取Edit動作。
無法編輯具有外部來源的HTML元素。
如果錨點元素包含純文字或影像標記以外的其他任何項目,則點擊追蹤無法運作。
頁面必須接受URL引數,VEC才能運作。
在HTML中使用指令碼時,從外部存取的任何變數和函式都應該在window名稱空間下宣告。
在頁面載入後,指令碼會在target.js
的範圍內執行。 因此,無法從指令碼區塊之外存取區域性宣告的任何變數或函式。
不正確:
code language-html |
---|
|
正確:
code language-html |
---|
|
從Content資料庫(Scene7)插入影像並編輯HTML會中斷影像URL。
在 'customHeaderMessage' div 內新增錨點元素和一些虛構文字:
code language-html |
---|
|
使用Insert Element動作選取此div,將影像插入為此虛擬文字div的同層級。
插入影像之後,看起來如下:
code language-html |
---|
|
移除虛構文字段。
VEC中的customCode
動作不適用於Internet Explorer 8。
target.js
在IE8中不支援此動作。 作為因應措施,如果頁面包含jQuery且在window物件上全域公開,則target.js
可以使用傳遞customCode
動作。 請確定已定義window.jQuery
和window.jQuery.fn.prepend
。