Как Optimizely & Visual Website Optimizer обрабатывают визуальное редактирование DOM?

Question

Optimizely & Visual Website Optimizer - это два интересных сайта, которые позволяют пользователям выполнять простое A / B-тестирование.

Одна из самых крутых вещей, которые они делают, это визуальное редактирование DOM. Вы можете визуально управлять веб-страницей и сохранять изменения в автономном режиме. Затем изменения применяются во время просмотра страницы случайного посетителя через загрузку JS.

Как работают визуальные редакторы?

Answer 1

Меня зовут Пит Коомен, и я один из соучредителей Optimizely, поэтому я могу говорить о том, как все работает на нашей стороне.Допустим, вы хотите создать эксперимент на http://www.mypage.com.

1. Вы можете (это необязательно) начать с добавления фрагмента аккаунта Optimizely на эту страницу, который выглядит следующим образом:никогда не меняется:

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

2. Редактор Optimizely загружает http://www.mypage.com внутри фрейма и использует window.postMessage для связи со страницей.Этот только работает, если на этой странице уже есть фрагмент, подобный приведенному выше.Если это не так, редактор прекратит работу в ожидании сообщения со страницы iframe и снова загрузит его через прокси-сервер, который фактически вставит фрагмент на страницу.Этот процесс загрузки позволяет редактору работать со страницами, которые a.содержать фрагмент аккаунта b.не содержат фрагмент аккаунта, или c.сидеть за брандмауэром (c. требует фрагмент).

3. В этот момент наш пользователь может вносить изменения в страницу, такие как изменение текста, замена изображений или перемещение элементов вокруг.Каждое изменение, внесенное с помощью редактора, кодируется в виде строки JavaScript, которая выглядит примерно так:

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

4. Таким образом, вы можете думать о «вариации» страницы как о наборе операторов JavaScript, которые при выполнении на этой странице вызывают появление нужного варианта.Если вам интересно, вы можете просмотреть и отредактировать этот код непосредственно, нажав «Редактировать код» в правом нижнем углу редактора Optimizely.

5. Теперь, когда выЕсли вы добавили свой фрагмент аккаунта на эту страницу и начали свой эксперимент, JS-файл, указанный фрагментом вашего аккаунта, автоматически объединит каждого входящего посетителя, а затем выполнит соответствующий JavaScript-код при загрузке страницы.

Существует гораздо больше логики, которая заключается в формировании группы посетителей и выполнении этих изменений как можно быстрее во время загрузки страницы, но это должно послужить базовым обзором!

Пит