Быстро создавайте A/B-тесты с шаблонами блоков WordPress

Опубликовано: 2021-09-02

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

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

Разделы нашей домашней страницы
Различные разделы нашей домашней страницы.

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

Улучшите веб-конверсию с помощью A/B-тестов

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

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

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

Изображение, показывающее, как работает A/B-тестирование: трафик делится, и каждый сегмент видит один вариант, а затем мы проверяем, какой вариант получил больше конверсий.
В своей простейшей форме A/B-тестирование предлагает случайным образом разделить трафик на сайт на две группы так, чтобы 50 % посетителей видели дизайн A, а остальные 50 % — дизайн B. Отслеживая реакцию пользователей в каждой группе, мы можем рассчитать коэффициент конверсии каждой группы и, в случае статистически значимой разницы между ними, объявить дизайн-победитель.

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

Создать A/B-тестирование с шаблонами

Хотя вы могли бы создать A/B-тестирование на веб-сайте WordPress вручную, мы рекомендуем вам использовать один из инструментов, доступных на рынке, и, в частности, если вы хотите получить максимальную отдачу от шаблонов блоков, лучший инструмент для создания A/B-тестирование — это использование Nelio. A/B-тестирование (доступно бесплатное и платное (29 евро в месяц)), поскольку это собственный плагин WordPress и, следовательно, он полностью интегрирован с редактором блоков WordPress.

Чтобы создать A/B тест с Нелио Для проведения A/B-тестирования с помощью редактора блоков WordPress выполните следующие действия:

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

В этом руководстве мы объясним все детали каждого из предыдущих шагов по созданию A/B тесты с Nelio A/B-тестирование в редакторе блоков.

Давайте посмотрим на некоторых примерах, как шаблоны блоков могут помочь нам быть намного более эффективными в создании A/B тесты; в частности, в определении вариантов теста.

Примеры

Предположим, есть три разных тестовых примера, которые мы хотим выполнить на нашем веб-сайте.

Пример 1 : с одной стороны, я хочу протестировать альтернативный дизайн на нашей странице Nelio, изменив раздел, в котором мы демонстрируем преимущества наших услуг.

Раздел страницы, показывающий преимущества нашей продукции
Раздел страницы, показывающий преимущества нашей продукции.

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

Раздел отзывов на домашней странице Nelio
Раздел отзывов на домашней странице Нелио.

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

Как мы создаем эти А/Б тесты? С таким инструментом, как Nelio, это практически так же просто, как изменить дизайн этой страницы с помощью некоторого дополнительного шага. Посмотрим, какие…

Выбор типа теста, который вы хотите создать

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

С Нелио A/B-тестирование, первое, что вам нужно сделать, это выбрать тип A/B-тест, который вы хотите создать:

Селектор тестов в Nelio A/B Testing
Селектор теста в Nelio A/B Testing.

После того, как вы выбрали тип теста, вы увидите, что создание вариантов теста точно такое же, как и при создании любого элемента WordPress.

В приведенных выше примерах 1 и 2, поскольку мы хотим изменить раздел страницы, мы бы выбрали создание теста страницы. В примере 3, поскольку нам нужна возможность добавить раздел в конце сообщений, более целесообразно создать шаблон теста.

Определение вариантов теста

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

Вариант создания страницы A/B теста
Создание варианта страницы A/B тест с Нелио A/B-тестирование.

Затем вы можете создать новый вариант. По умолчанию это будет точная копия вашей контрольной страницы. Нажмите на ссылку « Изменить » варианта, и вы увидите, что у вас будет редактор блоков WordPress, который вы уже знаете, чтобы внести все необходимые изменения, а также некоторые дополнительные свойства создания теста.

Редактирование варианта теста страницы
Редакция варианта страничного теста с Нелио A/B-тестирование.

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

Добавление нового шаблона
Добавление нового узора.

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

Переработанный раздел с использованием шаблона
Переработан раздел с использованием шаблона.

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

Новый A/B-тест из раздела отзывов на главной странице
Новый A/B-тест из раздела отзывов на главной странице.

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

Выбор шаблона отзыва
Выбор шаблона отзывов.

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

Раздел отзывов отображается с карточками
Раздел отзывов отображается с карточками.

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

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

Добавить шаблон в редакторе шаблонов
Добавьте шаблон в редакторе шаблонов.

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

Дизайн нового шаблона
Дизайн нового шаблона.

Теперь мы можем создать новый шаблон теста. Сначала мы выбираем, что хотим создать шаблон теста, а затем выбираем для вариантов A и B, какие шаблоны мы хотим отображать.

Выбор шаблонов, из которых состоит A/B-тест
Выбор шаблонов, составляющих А/Б тест.

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

Определите цели и действия по конверсии

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

С Нелио A/B-тестирование, в разделе «Цели конверсии и действия» вы можете добавить столько целей, сколько хотите, нажав на ссылку « + Новый », и при желании вы можете добавить к ним имя. Нелио A/B-тестирование покажет вам информацию о том, насколько эффективен каждый вариант для каждой из поставленных вами целей.

Определение целей конверсии в A/B-тестировании персонализированного контента с помощью Nelio A/B-тестирования.
Определение целей конверсии в A/B тест с Нелио А/Б тестирование.

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

Сегментируйте свой трафик

Одной из интересных особенностей любого инструмента A/B-тестирования является то, что он позволяет сегментировать трафик. То есть можно установить, что в тесте участвуют только некоторые посетители. Например, по стране, времени, языку, браузеру, устройству и т. д. Если вы хотите получить более подробную информацию о том, как реализовать сегментацию трафика с помощью Nelio A/B-тестирование, в этой статье Антонио подробно объясняет его.

Запустите созданный тест и проанализируйте его ход

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

Графики с коэффициентами конверсии каждого варианта в A/B тесте
Коэффициенты конверсии каждого варианта в А/Б тест.

Примените выигрышную альтернативу

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

Примените выигрышную альтернативу в A/B тесте
Применить выигрышную альтернативу в А/Б тест.

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

Заключение

A/B-тестирование — лучший инструмент для оптимизации конверсии на сайте. WordPress развивается очень быстро, и с новыми функциями и возможностями, появившимися в WordPress 5.8, создание A/B-тестов стало еще проще, если вы используете собственный инструмент WordPress, полностью интегрированный с редактором блоков, как в случае с Nelio A/B. Тестирование.

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

Избранное изображение Раймонда Клавинса на Unsplash