Полное руководство по A / B-тестированию в WordPress

Что выбрать для целевой страницы: один или другой? Какой из них лучше? Как бы вы узнали?

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

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

А еще лучше запустить A / B-тесты на WordPress не так уж сложно и не стоит никаких денег. Если вы можете потратить около 30 минут на базовую настройку, вы можете начать тестирование своего сайта бесплатно с помощью простого визуального редактора.

В этом посте мы покажем вам шаг за шагом, как начать A / B-тестирование контента WordPress и Elementor с помощью бесплатной службы Google Optimize.

Помимо этого, мы также поделимся встроенным вариантом плагина WordPress для пользователей Elementor, который позволяет вам настраивать сплит-тесты из редактора Elementor.

Готовы начать тестирование? Давайте копаться!

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

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

В зависимости от того, что вы хотите протестировать и насколько сложным вы хотите это сделать, вы можете использовать разные типы тестов. Вот некоторые из распространенных тактик:

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

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

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

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

В зависимости от того, как вы настроили A / B-тесты, вы можете использовать A / B-тестирование для оптимизации…

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

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

Как только вы узнаете, как начать A / B-тестирование контента WordPress, вы сможете сколько угодно экспериментировать с этими разными целями.

Теперь, когда вы знаете, почему A / B-тестирование может быть настолько полезным, давайте перейдем к фактической части «как» A / B-тестирования сайтов WordPress.

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

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

Процесс настройки A / B-теста с помощью Google Optimize можно условно разделить на три части:

1. Создайте свой оригинальный тестовый вариант . Если вы еще не создали страницу, которую хотите протестировать, вам нужно, чтобы она работала, прежде чем начать.
2. Настройте Google Optimize на своем сайте . Это включает добавление вашего веб-сайта через интерфейс Google Optimize и включение фрагмента кода на ваш сайт. Вам также необходимо использовать Google Analytics, чтобы включить Google Optimize, поэтому вам необходимо настроить это, если вы еще не используете Google Analytics.
3. Настройте новый A / B-тест в Google Optimize . Вы можете использовать визуальный редактор, чтобы настроить свой вариант, включая изменение текста и дизайна.

Мы разделим наше руководство на те же три части. Давайте начнем!

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

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

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

Если вам нужна помощь, вы можете ознакомиться с нашим руководством о том, как создать целевую страницу с помощью Elementor.

Создав свою страницу, обязательно опубликуйте ее, чтобы она была общедоступной - это будет важно при настройке Google Optimize.

Прежде чем вы сможете приступить к созданию A / B-тестов с помощью Google Optimize, вам сначала необходимо:

1. Добавьте свой сайт в Google Optimize.
2. Добавьте фрагмент кода, который Google Optimize предоставляет вам, в раздел <head> вашего веб-сайта.

Чтобы использовать Google Optimize, вам также необходимо использовать Google Analytics. Поэтому, если вы еще не настроили свой сайт WordPress с помощью Google Analytics, вам также необходимо сделать это, прежде чем вы сможете перейти к части Google Optimize.

Процесс аналогичен для Google Analytics - сначала вам нужно добавить свой сайт через интерфейс Google Analytics, а затем вам нужно добавить фрагмент кода на свой сайт WordPress.

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

Есть несколько плагинов, которые поддерживают как Google Analytics, так и Google Optimize. Вот некоторые из лучших:

• GA Google Analytics
• Официальный плагин Google Site Kit
• MonsterInsights

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

Если вы еще не настроили свой сайт с помощью Google Analytics, вам необходимо сделать это, прежде чем вы сможете добавить Google Optimize к этому миксу.

У нас есть целое руководство по добавлению Google Analytics в WordPress, но вот краткая версия.

Для начала зайдите в Google Analytics и войдите в свою учетную запись. Затем следуйте приведенным здесь инструкциям, чтобы создать ресурс Universal Analytics.

Очень важно, чтобы вы использовали версию Google Analytics для Universal Analytics, поскольку в настоящее время вы не можете связать новую версию Google Analytics 4 с Google Optimize (хотя Google заявляет, что это произойдет позже в этом году).

Чтобы создать универсальное свойство, вам необходимо показать дополнительные параметры при настройке свойства. Затем вы можете использовать переключатель, чтобы включить универсальный параметр:

После создания ресурса Google Analytics должен показать вам экран с вашим идентификатором отслеживания (или вы можете следовать этим инструкциям, чтобы найти его). Держите это под рукой, потому что он понадобится вам для настройки вашего сайта WordPress:

Если вы используете плагин GA Google Analytics (опять же - это то, что мы используем в учебнике), вам просто нужно вставить свой идентификатор отслеживания GA в настройки плагина ( Настройки → Google Analytics ).

Убедитесь, что вы выбрали правильный метод отслеживания , то есть Universal Analytics :

Примечание. Если вы уже добавляли Google Analytics на свой сайт в прошлом, весьма вероятно, что вы уже используете опцию Universal Analytics, если только вы не создали свой сайт в течение последних двух месяцев.

Затем вам нужно добавить свой сайт в Google Optimize, а затем добавить фрагмент кода, который он дает вам, на свой сайт WordPress.

Перейдите на сайт Google Optimize и войдите в систему, используя свою учетную запись Google.

Затем вы должны увидеть запрос на создание учетной записи - нажмите кнопку « Создать учетную запись» :

Дайте ему имя - например, «Личные веб-сайты» - и установите флажки. Затем нажмите Далее :

Теперь вам будет предложено создать контейнер . Введите имя вашего сайта или доменное имя в качестве имени контейнера, а затем нажмите « Создать» :

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

Здесь вам нужно сделать пару вещей.

Сначала нажмите кнопку Link to Analytics , чтобы связать контейнер Google Optimize с ресурсом вашего сайта в Google Analytics. Вот что позволяет Google Optimize собирать данные о ваших тестовых вариантах:

В настройках « Связать ресурс» выберите веб-ресурс своего сайта в Google Analytics и нажмите « Ссылка» :

Если Google Optimize не позволяет связать ресурс, возможно, вы случайно создали ресурс Google Analytics 4 вместо использования универсального метода отслеживания. Вернитесь к предыдущему шагу и убедитесь, что вы настроили свойство универсального отслеживания Google Analytics.

Затем вам необходимо установить фрагмент кода Google Optimize, который вы увидите под инструкциями по установке :

Вам необходимо добавить этот фрагмент в раздел <head> вашего сайта WordPress. Если вы используете плагин Google Analytics для Google Analytics, вы можете сделать это, перейдя в « Настройки» → «Google Analytics» и вставив фрагмент Google Optimize в поле « Пользовательский код» .

Убедитесь, что в качестве местоположения кода отслеживания установлено значение заголовка страницы (по умолчанию), а также установите флажок « Местоположение пользовательского кода», чтобы ваш сайт сначала загрузил скрипт Google Optimize:

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

Теперь вы готовы приступить к созданию своих тестовых вариантов. Google Optimize называет каждый тест «опытом». Создав опыт, вы сможете настроить варианты тестирования.

Прежде чем начать, убедитесь, что вы используете браузер Chrome. Вы также захотите установить официальное расширение Google Optimize Chrome, которое позволяет вам использовать визуальный редактор Google Optimize для настройки ваших тестовых вариантов.

Если вы откроете свой сайт в Google Optimize, вы должны увидеть приглашение создать свой первый опыт, нажав Поехали :

Это откроет выдвижение:

1. Дайте своему эксперименту название - например, «Тестирование различных кнопок CTA».
2. Введите URL-адрес страницы, которую вы хотите протестировать (это то, что вы создали в части 1).
3. Выберите A / B-тест в качестве типа опыта. Позже вы можете поэкспериментировать с различными типами тестов, но пока мы будем упрощены.

Затем вы попадете на панель управления для вашего опыта.

На панели управления опытом вы должны увидеть запрос на создание нового варианта - Добавьте вариант, чтобы начать:

В выдвижном элементе дайте ему имя и нажмите Готово .

Затем вы должны увидеть его в списке вариантов. Чтобы внести изменения в дизайн, нажмите кнопку « Изменить» (перед этим убедитесь, что вы уже установили расширение Google Optimize Chrome):

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

Например, чтобы изменить текст кнопки с «Начать» на «Загрузить сейчас», вы должны щелкнуть по кнопке и выбрать « Редактировать элемент», чтобы иметь возможность редактировать текст или HTML:

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

Вы можете внести столько изменений, сколько захотите. Просто нажмите кнопку « Сохранить» , когда закончите. Затем нажмите « Готово», чтобы вернуться в интерфейс Google Optimize и завершить A / B-тест.

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

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

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

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

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

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

После того, как вы выполнили настройки, прокрутите страницу до верхней части и нажмите кнопку « Пуск» , чтобы начать A / B-тест:

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

Затем вы увидите всплывающее окно для подтверждения - снова нажмите « Пуск», чтобы запустить тест.

Вот и все! Вы только что начали свой первый эксперимент по A / B-тестированию WordPress. По умолчанию Google Optimize добавляет срок действия, который наступает через четыре недели. Вы всегда можете вручную завершить тест раньше, нажав кнопку « Завершить» , и вы сможете просмотреть эффективность эксперимента на вкладке « Отчетность »:

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

Однако, если вы специально хотите A / B-тестирование содержимого Elementor, есть также специальный плагин, который позволяет вам это делать и имеет гораздо более простой процесс настройки - Split Test For Elementor.

Split Test For Elementor - это сторонний плагин от другого разработчика, поэтому команда Elementor не имеет прямого контроля над ним. Но на момент написания этого руководства он получил хорошие оценки и полностью работал.

На WordPress.org есть бесплатная версия, хотя вам понадобится расширенная версия, если вы хотите включить кеширование страниц для дизайнов, которые вы тестируете A / B (поскольку премиум-версия включает функцию «очистки кеша»).

Вот как это использовать:

После активации плагина вы можете перейти в раздел «Разделить тест» → «Добавить тест», чтобы создать новый тест:

Вы можете выбрать один из двух разных типов тестов:

1. Элементы - тестируйте разные элементы на одной странице (виджеты, разделы и т. Д.).
2. Страница - тестируйте совершенно разные страницы друг против друга.

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

Ниже вы можете установить цель конверсии, которая является внутренней или внешней страницей (плагин не так гибок, как Google Optimize при настройке целей конверсии):

После того, как вы создали свой тест, откройте редактор Elementor для дизайна, который вы хотите протестировать A / B.

Затем откройте настройки исходного варианта элемента, который вы хотите протестировать - например, виджета-кнопки. Когда вы перейдете на вкладку Advanced , вы увидите новую опцию Split Test .

Выберите сплит-тест, который вы создали на предыдущем шаге, а затем назначьте виджет / раздел Elementor одной из вариаций сплит-теста .

Любой элемент, назначенный этому варианту, будет отображаться только в этом конкретном варианте:

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

Например, если вы A / B тестировали две разные кнопки, вы бы фактически увидели две кнопки в редакторе Elementor:

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

Не забудьте сохранить изменения в своем дизайне Elementor, когда закончите.

Теперь ваш тест в прямом эфире. Чтобы увидеть, как это происходит, перейдите в область « Разделить тест» на панели инструментов и нажмите кнопку « Статистика» рядом с тестом.

Затем вы увидите основные данные о коэффициенте конверсии для каждого варианта:

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

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

Если вы используете WordPress и Elementor, одним из наиболее гибких решений для A / B-тестирования является использование бесплатной службы Google Optimize. Чтобы настроить свой сайт с помощью Google Optimize, нужно немного научиться. Но как только вы начнете работать, вы сможете легко создавать новые тестовые варианты с помощью визуального редактора Google Optimize.

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

У вас все еще есть вопросы об A / B-тестировании WordPress? Задайте нам вопрос в комментариях, и мы постараемся помочь!