Как VWO создает удобство для посетителей при проведении экспериментов в одностраничном приложении (SPA)

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

Многие веб-сайты создаются как одностраничные приложения (SPA), поскольку они имеют несколько ключевых преимуществ по сравнению с традиционными статическими веб-сайтами: динамические веб-сайты быстрые, компактные и отзывчивые. Такие веб-сайты позволяют вам оптимизировать контент, который видит ваш пользователь, для создания увлекательных и уникальных впечатлений. Если вы узнали от своей команды разработчиков, что ваш веб-сайт создан с использованием React, Vue, AngularJS, Ember или Backbone, вы, вероятно, работаете с SPA, и эта статья имеет отношение к вам.

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

Но сначала давайте поговорим о проблеме, которая привела вас сюда.

Проблемы проведения экспериментов на динамических веб-сайтах

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

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

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

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

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

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

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

Но при отсутствии SPA-поддержки изменения, внесенные в вариант, перейдут к управлению, и оба варианта будут выглядеть одинаково. Примерно так:

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

Некоторые фреймворки веб-сайтов, такие как GatsbyJS, Next.js, ReactJS и т. д., используют рендеринг на стороне сервера и сохраняют снимок исходной веб-страницы по мере ее загрузки. Таким образом, когда вы изменяете элемент на странице в целях тестирования, платформа определяет изменение как «проблему» и возвращает страницу в исходное состояние, как она отображается в сохраненном снимке. Это, в свою очередь, мешает вашему A/B тесту.

Во-вторых, последние фреймворки, такие как React, Gatsby, Next.js, Vue.js, Angular и т. д., используют концепцию рендеринга на основе состояния. Например, в React всякий раз, когда в одно из состояний вносится изменение из-за вариации A/B-теста, интерфейс веб-сайта автоматически перезагружается в исходную форму, поэтому пользователи никогда не видят вариацию. Это создает неоптимальный опыт для посетителей веб-сайта.

Как VWO упрощает эксперименты с одностраничными приложениями

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

1. Тестирование динамических элементов на вашем сайте

Хотя динамические элементы были определены в предыдущем разделе, давайте внимательно рассмотрим их на конкретном примере. Учтите, что у вас есть сайт электронной коммерции. При нажатии кнопки «X» (Закрыть) на странице «Корзина» появляется предупреждение в виде всплывающего окна. Теперь вы хотели бы протестировать копирование изменений в поле действия, чтобы увидеть, могут ли действенные сообщения и призыв к действию удержать людей от закрытия страницы корзины. Окно предупреждения изначально отсутствует в коде веб-сайта, но добавляется инфраструктурой SPA, когда посетитель нажимает кнопку «X» (закрыть). Здесь кнопка, которая открывает всплывающее окно, на котором вы запускаете тест, называется целевым элементом.

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

Как VWO обеспечивает правильное применение изменений?

Легкий.

VWO отслеживает элементы страницы (видео, изображения, таблицы, разделы и т. д.) на предмет изменений, внесенных в них в любой момент времени. Поэтому, когда целевой элемент (кнопка Close 'X' в приведенном выше примере) загружается, VWO обнаруживает его и применяет изменение, сделанное вами в Variation. Это происходит даже в том случае, если веб-страница не перезагружается, а пользователь просто взаимодействует с разделом на сайте.

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

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

Библиотека VWO использует Mutation Observer — интерфейс браузера, который позволяет VWO наблюдать за изменениями в дереве DOM SPA. Это помогает обнаружить любой новый элемент, добавленный, удаленный или измененный на странице. В таком случае VWO автоматически применяет изменения к элементам. Таким образом, всякий раз, когда элементы загружаются динамически, изменения применяются до того, как они будут показаны посетителю. Это повышает надежность кампаний, гарантируя полное применение изменений в вариантах.

Как VWO управляет изменениями, которым мешает рендеринг фреймворка ?

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

Вы можете прочитать больше об этих настройках в нашей статье базы знаний.

2. Тестирование любого другого элемента страницы на вашем сайте

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

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

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

1. Допустим, вы удалили дополнительную кнопку призыва к действию (скажем, «Добавить в список желаний») со своего веб-сайта электронной коммерции, чтобы проверить, повлияет ли это изменение на количество кликов по основному призыву к действию (скажем, «Добавить в корзину»). Это тестовый вариант использования, когда вы удаляете элемент на веб-сайте. Даже если вы удалили кнопку, она сохраняется в виртуальном DOM, созданном такими фреймворками, как React, и выдает ошибку при загрузке веб-сайта.

2. Теперь представьте, что на вашем веб-сайте электронной коммерции есть процесс регистрации, который помимо кнопки «Отправить сейчас» показывает поле ввода текста для захвата адресов электронной почты посетителей. Когда вы вносите изменения во внешний вид поля ввода текста, связанные с ним стилизованные компоненты веб-сайта изменяются. Визуальный редактор VWO гарантирует, что пользователи увидят последние примененные изменения. Посмотрите, как вы можете вносить изменения в поле формы в SPA, и убедитесь, что посетители, выбранные для варианта, видят эти изменения, а не контроль.

Как использовать VWO для вашего одностраничного приложения?

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

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