Рекомендации по проведению A/B-тестов в одностраничных приложениях (SPA)

Эта статья является второй частью серии A/B-тестирование одностраничных приложений .

В части 1 мы представили концепцию одностраничных приложений (SPA), показали, почему она становится все более популярной, и рассмотрели 10 лучших платформ для A/B-тестирования, которые вы можете использовать в одностраничных приложениях .

Но проведение A/B-тестов на SPA может быть немного сложным из-за того, как они работают. В этой статье мы дадим вам практические советы о том, как провести эксперимент в SPA, а также некоторые рекомендации, которым следует следовать.

Эволюция фреймворков SPA

SPA — это не новая концепция.

Патент от 2002 года описывает технологию, аналогичную современной версии SPA.

Однако метод AJAX, который используется в качестве сетевого стандарта с 2006 года, упростил его реализацию. Это набор стратегий для создания асинхронных веб-приложений с использованием различных клиентских технологий. Программное обеспечение может отправлять и получать данные с сервера в фоновом режиме благодаря AJAX, не изменяя текущее состояние страницы или режим отображения контента и, таким образом, не мешая работе пользователя.

С другой стороны, внедрение AJAX не стало переломным моментом в принятии SPA.

Рост популярности SPA является частью более широкой тенденции, которая подпитывается быстрым ростом клиентской части и растущей актуальностью UX в последние годы.

SPA были впервые созданы с использованием апплетов Java или программ Flash, а также «чистого» JavaScript или библиотек jQuery.

Однако интерфейсные фреймворки, такие как Angular.js, React.js и Vue.js — все они являются относительно новыми фреймворками JavaScript — помогли их развитию.

Какие технологии лежат в основе архитектуры SPA?

SPA — это, по сути, фреймворк JavaScript с поддержкой HTML5 и CSS3.

Однако с использованием этих компонентов появилось несколько отдельных библиотек и фреймворков, которые были приняты в мире разработки:

1. Угловой

Разработанный Google, Angular является наиболее зрелым и самым старым из трех фреймворков с подробной документацией для использования, но с крутой кривой обучения.

Он встроен в оригинальную архитектуру Model View Controller (MVC), но в основном использует MVVM (Model-View-ViewModel), который позволяет нескольким разработчикам работать отдельно над одним и тем же разделом приложения. Могут возникнуть некоторые проблемы с миграцией при обновлении до новых версий, но Angular обладает наибольшей надежностью при масштабировании и отлично подходит для больших и сложных проектов.

Благодаря TypeScript Angular — отличный выбор для больших команд разработчиков, и некоторые компании уже используют эту технологию в других своих продуктах.

На GitHub это устоявшийся, зрелый фреймворк с большим количеством участников.

Google и его продукты, такие как Google Drive и Gmail, а также Wix, входят в число пользователей Angular для SPA.

2. Реакт.js

React был разработан Facebook и стал открытым исходным кодом. В основном он использовался для создания пользовательских интерфейсов (Facebook, WhatsApp и Instagram).

Он очень популярен из-за небольшого размера кода и способности легко интегрироваться с другими платформами. Он также имеет простой метод миграции между версиями. (Обычно миграция в один клик).

Он часто используется вместе с Redux для управления состоянием компонентов приложения. Uber также использует технологию React.js в своих продуктах.

React хорошо подходит для тех, кто только начинает работать с интерфейсными фреймворками JavaScript, а также для стартапов и agile-разработчиков. Кроме того, эта библиотека JavaScript предлагает ценные возможности интеграции с множеством других фреймворков и технологий, что очень полезно при работе над проектом с большой средой. Из всех фреймворков SPA у React больше всего публикаций на GitHub, что помогает разработчикам устранять потенциальные проблемы.

У него самая простая кривая обучения из трех фреймворков, и его лучше всего использовать для проектов с коротким сроком, которые требуют большой масштабируемости.

3. Vue.js

Vue.js не принадлежит крупной компании, такой как Facebook или Google, но он все еще набирает обороты с новыми пользователями, особенно в Азии. Это новейшая из вышеперечисленных платформ SPA, основанная в 2014 году Эваном Ю, бывшим сотрудником Google. Большая часть документации обычно на китайском языке, но есть и обучающие источники.

Фреймворк очень легкий и может использоваться для простого создания высокопроизводительных приложений.

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

Vue.js теперь используется такими предприятиями, как Baidu, GitLab и Alibaba, для своих нужд.

Как работают одностраничные приложения

СПА имеют простую конструкцию. Используются как клиентские, так и серверные технологии рендеринга.

На веб-сайте без SPA, когда вы вводите URL-адрес в свой браузер, браузер отправляет запрос на сервер и получает в ответ HTML-страницу.

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

Вкратце SPA работает так:

1. Сначала клиент устанавливает соединение с сервером и получает содержимое страницы, состоящее в основном из HTML-кода, CSS и пакета JavaScript, включающего все сценарии, необходимые для запуска логики приложения.
2. Действие пользователя активирует выполнение соответствующих JavaScript-кодов, которые затем отправляют AJAX-запросы на сервер. Данные обычно представлены в формате JSON и не требуют полного обновления веб-страницы.

Вместо обычной техники, когда браузер запускает совершенно новую страницу, одностраничное приложение взаимодействует с пользователями, принудительно изменяя существующие веб-страницы новыми данными с веб-сервера. Браузер извлекает необходимый код HTML, JavaScript и CSS или другие подходящие ресурсы и добавляет их на страницы по мере необходимости.

Хотя API истории HTML5 или хэш местоположения могут использоваться для обеспечения навигации и восприятия различных логических страниц в веб-приложении, страница не перезагружается в любой момент во время процедуры и не передает управление другой странице.

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

Это пример СПА.

Кому больше всего подходят СПА?

Благодаря преимуществам SPA, в настоящее время они являются предпочтительным решением во многих случаях.

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

Есть много крупных игроков, которые используют SPA. Facebook, Gmail, Google Maps, Netflix и Paypal — одни из наиболее ярких примеров технологий такого типа (см. ниже).

Почему A/B-тестирование сложно для SPA?

Все три фреймворка — React.js, Angular.js и Vue.js — очень популярны среди разработчиков JavaScript, потому что они позволяют разрабатывать сложные пользовательские интерфейсы, улучшающие взаимодействие с пользователем и повышающие коэффициент конверсии.

Они очень нужны разработчикам, потому что

• Обновление страницы не требуется
• Скорость загрузки страниц выше
• Взаимодействия богатые и плавные
• Передача данных сокращается
• Многоразовые детали позволяют ускорить разработку
• Сообщество разработчиков хорошо зарекомендовало себя

Они также являются полезным ресурсом для всех, кто начинает новый SPA.

Однако есть один существенный недостаток: из-за того, как работают эти фреймворки, инструменты A/B-тестирования на стороне клиента с трудом работают должным образом .

Когда кто-то просматривает веб-страницу в SPA, страница, включая URL-адрес, не обновляется . Состояние страницы меняется при каждом взаимодействии с пользователем (например, различные элементы отображаются на экране).

Поскольку инструменты A/B-тестирования обычно вносят коррективы только один раз во время начальной загрузки страницы, эти последующие взаимодействия не учитываются.

Вот два распространенных сценария:

1. Если в вашем SPA включены просмотры страниц , вы получите просмотр страницы, когда кто-то посещает URL-адрес, но не второй, если они просматривают другую страницу, где просмотры страниц включены. Это связано с тем, что материал загружается на текущую страницу, а не на новую страницу.
2. Если вы попытаетесь ограничить событие определенным URL-адресом , вы столкнетесь с той же проблемой. Инструмент A/B-тестирования будет «полагать», что он остается на той же странице, на которой он был загружен в первый раз, даже если пользователь думает, что он находится на другой странице. Поскольку фрагменты перемещаются на сайт и удаляются с него, могут возникнуть трудности с отслеживанием кликов или других событий.

Программное обеспечение для A/B-тестирования на стороне клиента и платформы персонализации для визуализации зависят от полной загрузки страницы.

Поскольку эта концепция отсутствует при использовании сред SPA, таких как React, Angular или Vue, определение того, был ли добавлен новый контент на страницу или изменился статус существующего контента, и, что более важно, когда вводить адаптированный контент, становится более сложным.

Таким образом, инструменты A/B-тестирования должны уметь распознавать контекст посетителя, например, пришли ли они на страницу со списком продуктов, деталями или корзиной, и в какой момент следует предоставить свежий материал.

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

Каждое взаимодействие с пользователем в React.js, например, приводит к обновлению одного или нескольких элементов пользовательского интерфейса, удаляя любые изменения, внесенные решением для A/B-тестирования.

Тестирование на стороне клиента и тестирование на стороне сервера в SPA

Когда дело доходит до A/B-тестирования в SPA, есть два варианта:

1. Изоляция различных «состояний» приложения, которое вы хотите протестировать, а затем настройка их таким образом, чтобы при отображении каждого «состояния» вызывался API для внесения соответствующих изменений. Это называется условной активацией и выполняется на стороне клиента .

Некоторые примеры «состояний» включают отображение формы подписки, загрузку списка результатов поиска и так далее.

2. Жесткое кодирование модификаций на стороне сервера или индивидуальное развертывание для каждого нового опыта.

На оба эти варианта влияет используемая структура SPA. Итак, как вы уже догадались, они требуют тесного сотрудничества между технической командой и маркетологами, чтобы поддерживать хорошую работу.

Теперь давайте рассмотрим оба этих варианта и посмотрим, что должны сделать команды, чтобы добиться успеха.

Условная активация на стороне клиента

Если вам по-прежнему необходимо выполнять тестирование приложения SPA на стороне клиента, существует обходной путь.

Чтобы убедиться, что сценарии тестирования выполняются только тогда, когда приложение достигает желаемого состояния, веб-разработчики могут использовать функцию, называемую режимом условной активации .

Если вы не знакомы с условной активацией, это простая концепция.

Условная активация, по сути, дает вам возможность определить, когда эксперимент должен быть активирован, кроме как с помощью его стандартного метода при обновлении страницы.

Этого можно добиться, написав немного JavaScript. Есть два способа сделать это.

1. Функция опроса

Функция опроса — это самый простой способ использования условной активации. Функция сканирует страницу каждые 50 мс, пока не появится указанный элемент — это может быть модальное окно, div или даже вся страница.

Эксперимент начинается, когда появляется элемент.

Платформа A/B-тестирования генерирует несколько строк JavaScript, которые вы можете изменить в зависимости от того, какой элемент вы хотите, чтобы функция опроса искала.

Эксперимент активируется, как только функция оценивается как TRUE .

2. Функция обратного вызова

Выполнение функции обратного вызова похоже на выполнение функции опроса, но добавляет некоторую гибкость.

Эта функция позволяет вам ввести любое условие JavaScript, которое вы хотите, и, если оно оценивается как TRUE , начать эксперимент.

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

Тестирование на стороне сервера

При выполнении тестирования на стороне сервера никакие изменения не вносятся на уровне браузера. Скорее, параметры варианта эксперимента («Пользователь 1 видит вариант А») определяются на уровне сервера и напрямую подключаются к приложению JavaScript через поставщика услуг, что упрощает тестирование более сложного динамического контента, выходящего за пределы статического пользовательский интерфейс веб-сайта.

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

Примеры A/B-тестов SPA

Какие реальные примеры A/B-тестирования одностраничных приложений вы можете встретить?

Изменение изображения на целевой странице

Допустим, вам нужно поставить эксперимент на SPA, чтобы показать динамическое изображение 50% аудитории, перешедшей на определенную страницу. Платформа SPA, используемая в этом примере, — React.js, что означает, что страница меняется, а изображения заменяются на регулярной основе.

Если вы отображаете вариантное изображение, могут возникнуть проблемы с мерцанием, что означает, что будет наблюдаться последовательность исходное изображение-вариантное изображение-исходное изображение.

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

Тестирование дополнительного текста под CTA

Другой эксперимент на SPA-сайте, созданном с помощью Angular.js, может включать в себя показ дополнительной строки текста под основным призывом к действию для 30% целевой аудитории.

В этом примере в версии А будет отображаться дополнительная строка копии под основным призывом к действию, а в версии Б — нет. Мы направим 30 % нашего трафика на версию A и 70 % на версию B, а затем сравним результаты, чтобы увидеть, есть ли существенная разница в коэффициентах конверсии.

Поскольку веб-сайт создан с использованием Angular.js, элементы регулярно меняются. Событие обратного вызова здесь может помочь нам в отображении изменений варианта.

Отображение подарочного купона

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

1. Что здесь должно произойти, так это то, что когда пользователь выполняет требуемое действие, должно быть отправлено событие ручной активации. Эксперимент будет активирован в результате этого события.
2. Событие активации должно запускаться, когда пользователь удаляет премиальный продукт из корзины, деактивируя эксперимент.
3. Эксперимент необходимо повторно активировать, чтобы показать продукт премиум-класса, если потребитель добавит его снова.

Отображение слогана под призывом к действию "Купить сейчас"

Если вы хотите отобразить уникальный слоган под кнопкой призыва к действию «Купить сейчас», вы можете активировать эксперимент, если нажмете событие активации при изменении истории.

Это связано с тем, что страница с кнопкой призыва к действию «Купить сейчас» сначала не загружается.

Как Convert обошла проблему тестирования SPA

Эксперименты на SPA нужно проводить иначе, чем другие эксперименты. Поскольку скрипт Convert не может прочитать URL-адрес, по которому просматривает посетитель веб-сайта, он не может запускать эксперименты со стандартными методами.

Итак, вот как это делается вместо этого.

Начните с установки кода отслеживания Convert, как описано в этой статье.

Затем примените один из 3 методов ниже:

1. Запуск опроса

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

Сюда входит отслеживание URL-адреса посетителя, условий аудитории или условий JavaScript для запуска теста.

Опрос обычно запускается Convert при загрузке новой страницы. В SPA, как правило, новые страницы не загружаются в веб-приложение.

В этом случае вам потребуется следующий код для запуска опроса:

 window._conv_q = _conv_q || [];
window._conv_q.push(["run","true"]);

Вы должны определить, какое событие в вашем SPA лучше всего запускает приведенный выше код. Пример кода, который следует добавить в раздел «Настройки проекта» > «Глобальный проект JavaScript».

 console.log('Код SPA/преобразования в JavaScript глобального проекта выполнен');
если (!window.globalExecutedTs) {
window.globalExecutedTs = истина;
вар oldPushState = window.history.pushState;
window.history.pushState = функция (данные) {
пытаться {
setTimeout (функция () {
вернуть oldPushState.apply(это, аргументы);
console.log('Конвертация активирована из pushstate');
window._conv_q = _conv_q || [];
window._conv_q.push(["run", "true"]);
}, 0);
} поймать (е) {
console.log(е);
}
};
window.onpopstate = функция (событие) {
setTimeout (функция () {
console.log('Конвертация активирована из popstate');
window._conv_q = _conv_q || [];
window._conv_q.push(["run", "true"]);
}, 0);
};
}

2. Используйте условия JavaScript в области сайта

Поскольку скрипт Convert не может считывать изменения URL-адресов в SPA, для запуска эксперимента следует использовать условие JavaScript вместо условия совпадения URL-адресов.

Найдите подробное объяснение того, как это сделать, в следующей статье.

3. Активируйте эксперимент вручную

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

С помощью трех описанных выше методов вы сможете запускать эксперименты в нужный момент в приложении SPA.

Увеличивает ли Convert риск мерцания на SPA?

Короткий ответ, нет.

Все фреймворки SPA совместимы с антимерцающей технологией Convert. Convert использует технологию SmartInsert ^TM за кулисами, чтобы гарантировать, что экспериментальные модификации применяются или повторно применяются в соответствующее время в вашем SPA, даже во время динамической перезагрузки страницы.

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

Распространенные проблемы при A/B-тестировании на сайтах с одностраничными приложениями

Как видите, есть несколько моментов, о которых следует помнить при выполнении тестов на сайтах SPA. После того, как вы рассмотрели используемую структуру, метод тестирования инструмента и событие триггера, основная проблема обычно заключается в том, что тестовый элемент не перезагружается, когда в браузере отображается новая страница или представление.

Это может быть вызвано несколькими причинами:

1. Протестируйте изменения, появляющиеся на первой странице, но не на последующих.

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

2. Изменения, отображаемые в визуальном редакторе, не отображаются при предварительном просмотре вне его

Иногда может случиться так, что изменения, сделанные с помощью визуального редактора, не отображаются за пределами предварительного просмотра редактора.

Большинство платформ SPA не используют DOM API, а вместо этого используют свои собственные методы для развертывания изменений на странице. Это приводит к рассинхронизации DOM при обновлении SPA. Это распространено в React и Angular, из-за чего селекторы CSS, найденные в коде Jquery, не работают.

3. Изменения продолжают появляться при последующих просмотрах

В этом сценарии изменение эксперимента отображается в правильном представлении (странице). Но при посещении новых (страниц) просмотров изменение не проходит. Происходит это потому, что на SPA-сайте изменения не удаляются при перезагрузке новой страницы.

Сценарий Convert удаляет добавленный код, когда условия эксперимента не соответствуют последующему представлению, в котором были развернуты изменения при вызове опроса. Однако этого недостаточно, так как изменения jquery не исчезнут даже при удалении экспериментального кода страницы.

Вам нужно будет выполнить код, который отменяет изменения, внесенные экспериментом.

Ваша очередь: избегайте этих ошибок при оптимизации SPA

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

Мы надеемся, что в этой статье были рассмотрены различные компоненты SPA, а также некоторые решения для преодоления этих препятствий в вашем стремлении предоставить посетителям более быстрый, интуитивно понятный и персонализированный цифровой опыт.

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