Как настроить тест Optimizely для одностраничного приложения?

У меня есть одностраничное веб-приложение, в котором представлен "многократный" мастер управления фотографиями, который разбивается на несколько дискретных шагов (загрузка фотографий, стилизация, аннотация, публикация) через полосу вкладок. На шагах переключения я установил хэш URL-адреса #publishing-step (или какой бы шаг не был активирован).

Как настроить тесты Optimizely для запуска на разных дискретных этапах мастера?

Браузер никогда не покидает страницу, поэтому он получает только одно событие window.load. Его DOM не сбрасывается или регенерируется, а просто переключает элементы страницы, которые видны в любой момент через display: none или block, поэтому часть, которую я пытаюсь выяснить, в основном в основном касается того, как я отношусь сама оптимизационная тестовая установка - это прекрасно (и, вероятно, необходимо), если все изменения будут применены сразу.

Эта вещь, к сожалению, должна работать в IE9, поэтому я не могу использовать history.pushState для получения довольно дискретных URL-адресов для каждого шага.

Ответ 1

На самом деле существует несколько способов сделать это, и какой вариант, который вы выберете, будет во многом зависеть от того, что вам будет проще и как вы планируете анализировать данные.

Если вы хотите использовать панель оптимизации Optimisely analytics:

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

Активационный эксперимент имел бы код вроде:

window.optimizely = window.optimizely || [];

function hashChanged() {
  if(location.hash === 'publishing-step') {
    window.optimizely.push(['activate', 0000000000]);
  }
  if(location.hash === 'checkout-step') {
    window.optimizely.push(['activate', 1111111111]);
  }
}

window.addEventListener('hashchange', hashChanged, false);

Или вы могли бы вызвать window.optimizely.push(['activate', xxxxxxxxx]); прямо из кода вашего сайта вместо создания эксперимента по активации и прослушивания hashchange.

Если вы хотите использовать сторонний инструмент аналитики, такой как Google Analytics:

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

В качестве альтернативы вы можете использовать описанный выше метод, но по-прежнему пытаетесь использовать панель оптимизации Optimisely analytics, создав пользовательские события в своем эксперименте и отправляя данные на они используют вызовы типа window.optimizely.push(["trackEvent", "eventName"]);

Эта статья также может быть полезной для вас.

Ответ 2

Вам, вероятно, понадобится сделать это самостоятельно, используя Optimizely JS API для запуска действий на их конце и расскажите, что сделали ваши пользователи: https://www.optimizely.com/docs/api