Одна из самых крутых вещей - визуальное редактирование DOM. Вы можете визуально манипулировать веб-страницей и сохранять изменения в автономном режиме. Изменения затем применяются во время просмотра случайной страницы посетителя через нагрузку JS.
Как работают визуальные редакторы?
Меня зовут Пит Коомен, и я один из основателей Оптимизели, поэтому я могу говорить, как все работает на нашей стороне. Скажем, вы хотите создать эксперимент на http://www.mypage.com.
Вы можете (это необязательно) начать с добавления фрагмента учетной записи Optimizely на эту страницу, которая выглядит так и никогда не изменяется:
<script src="//cdn.optimizely.com/js/XXXXXX.js"></script>
Редактор оптимизаций загружает http://www.mypage.com внутри iframe и использует window.postMessage для связи со страницей. Это работает только в том случае, если на этой странице уже есть фрагмент, подобный приведенному выше. Если это не так, редактор отключится во время ожидания сообщения с страницы iframe'd и снова загрузит его через прокси-сервер, который фактически вставляет фрагмент на страницу. Этот процесс загрузки позволяет редактору работать со страницами a. содержат фрагмент учетной записи b. не содержат фрагмента учетной записи, или c. сидеть за брандмауэром (c. требует фрагмент.)
Наш пользователь в этот момент может вносить изменения в страницу, например, изменять текст, заменять изображения или перемещать элементы вокруг. Каждое изменение, которое делается с помощью редактора, кодируется как строка JavaScript, которая выглядит примерно так:
$j("img#hplogo").css({"width":254, "height":112}); |__IDENTIFIER__||____________ACTION______________|
Итак, вы можете подумать о "вариации" страницы как набора операторов JavaScript, которые при выполнении на этой странице приводят к появлению нужной вариации. Если вам интересно, вы можете просмотреть и отредактировать этот код напрямую, нажав "Изменить код" в нижнем правом углу редактора Оптимизации.
Теперь, когда вы добавили фрагмент своей учетной записи на эту страницу и начали эксперимент, файл JS, на который указывает ваш фрагмент учетной записи, автоматически загрузит каждого входящего посетителя и затем выполнит соответствующий JavaScript, поскольку страница погрузка.
Существует гораздо больше логики, которая заключается в том, чтобы разворачивать посетителя и выполнять эти изменения как можно быстрее во время загрузки страницы, но это должно служить базовым обзором!
Пит