Optimizely和Visual Website Optimizer如何處理可視化DOM編輯？

Question

Optimizely &視覺網站優化是兩個很酷的網站，允許用戶執行簡單的A/B測試。

他們做的最酷的事情之一是可視化DOM編輯。您可以直觀地操作網頁並將更改保存爲離線。然後通過JS加載在隨機訪問者頁面視圖中應用更改。

視覺編輯器如何工作？

Answer 1

我的名字是Pete Koomen，我是Optimizely的聯合創始人之一，所以我可以說出事情是如何在我們身邊工作的。假設您想在http://www.mypage.com上創建實驗。

1. 你可能會（可選的）通過添加Optimizely帳戶段到該頁面，它看起來像這樣開始並不會改變：

   <script src="//cdn.optimizely.com/js/XXXXXX.js"></script>

2. 的Optimizely編輯器加載http://www.mypage.com內的iframe並使用window.postMessage與頁面進行通信。這只有工作，如果該網頁已經有一個像上面的代碼片斷。如果情況並非如此，編輯器將在等待來自iframe頁面的消息時超時，並將通過實際將片段插入頁面的代理再次加載它。這個加載過程允許編輯器使用一個頁面。包含一個賬戶片段b。不包含帳戶代碼片段，或c。坐在防火牆後面（c。需要片段）

3. 我們的用戶此時可以對頁面進行更改，例如修改文本，替換圖片或移動元素。與該編輯器做出的每個改變被編碼爲一行JavaScript，看起來像下面這樣：

   $j("img#hplogo").css({"width":254, "height":112});
|__IDENTIFIER__||____________ACTION______________|

4. 所以，你可以把一個頁面的「變異」的在該頁面上執行的一組JavaScript語句會導致出現所需的變體。如果您好奇，您可以直接點擊Optimizely Editor右下角的「編輯代碼」查看和編輯此代碼。

5. 現在，當您將帳戶代碼片段添加到此頁面並開始實驗時，您的帳戶代碼段指向的JS文件將自動對每個新訪問者進行壓縮，然後在頁面加載時執行相應的JavaScript 。

在頁面加載過程中儘可能快地執行這些更改的邏輯有很多，但這應該作爲基本概述！

皮特