Как провести A/B-тестирование сайта на WordPress с помощью Google Optimize

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

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

Подпишись на наш Телеграм и читай все статьи и новости первым!

Как настроить Google Optimize в WordPress

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

Шаг 1

Первое, что нужно сделать — это зайти в Google Optimize, зарегистрировать учетную запись и нажать кнопку «Начать».

Затем выполните следующие шаги с некоторыми дополнительными вопросами о разрешениях и обмене данными.

Шаг 2

Далее вам нужно будет связать свою собственность Google Analytics. На правой стороне нажмите «Ссылка собственности».

Шаг 3

Затем вы должны увидеть свое свойство Google Analytics. Если к вашему Gmail привязано несколько свойств, вам нужно будет выбрать то, которое вы хотите использовать с Google Optimize. Затем нажмите «Ссылка».

Шаг 4

Затем нажмите «Получить фрагмент».

Шаг 5

Теперь пришло время изменить код Google Analytics, указав идентификатор контейнера Google Optimize. Здесь следует упомянуть несколько важных вещей:

• Если на вашем сайте в настоящее время установлена ​​Google Analytics, она должна быть в заголовке вашего сайта перед </head> тегом. Обычно помещать его в нижний колонтитул можно, но в этом случае вы столкнетесь с заметной белой вспышкой при загрузке страницы, если вы не запускаете скрипт в заголовке. Это потому, что скрипт должен запускаться сразу же при загрузке DOM. Если вы используете плагин WordPress, у большинства есть возможность выбрать расположение верхнего или нижнего колонтитула для скрипта.
• Фрагмент Optimize будет выглядеть примерно так:  ga(‘require’, ‘GTM-XXXXXXX’); он содержит идентификатор контейнера Optimize. Все, что вам нужно сделать, это изменить ваш текущий скрипт Google Analytics, чтобы включить его, а не добавлять весь скрипт снова.

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

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

• Google Analytics Dashboard для WP: При интеграции в настройках плагина есть возможность добавить свой Оптимизировать идентификатор контейнера.
• GA Google Analytics: Имеет возможность в настройках плагина добавить код оптимизации.

Примечание. Если вы используете Google Tag Manager для развертывания Google Analytics, вы все равно можете  установить Оптимизатор, но он может иметь дополнительную задержку, и даже Google не рекомендует этого. Из-за того, как скрипт работает с точки зрения производительности, они рекомендуют развертывать Optimize непосредственно на странице (что и делают большинство плагинов WordPress).

Ниже приведен пример использования плагина Google Analytics Dashboard for WP. На вкладке «Интеграция» вы можете «включить оптимизацию отслеживания» и ввести свой идентификатор.

После того, как код введен, нажмите «Далее» в мастере оптимизации Google.

Шаг 6

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

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

Однако, поскольку каждый сайт отличается от других, при возникновении проблем может потребоваться дальнейшее изменение сценария Google Analytics с помощью фрагмента кода, скрывающего страницу. Вы также можете изменить async-hide время, которое по умолчанию установлено на 4000 мс. Некоторые плагины, такие как приведенный выше, также имеют простые переключатели для включения поддержки скрытия страниц.

Нажмите «Готово», и ваш сайт WordPress должен быть готов к работе.

Как запустить A/B-тест с Google Optimize

Теперь самое интересное — создать свой первый A/B-тест в Google Optimize.

Шаг 1

На панели инструментов Google Optimize нажмите «Let’s Go», чтобы создать новый A/B-тест или то, что они называют «экспериментом».

Шаг 2

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

Поэтому мы выбираем имя для нашего теста и вводим URL, в котором мы хотим редактировать код для опыта. В этом примере мы хотим изменить цвет кнопки на кнопке CTA, чтобы увидеть, какая из них привлекает больше трафика на нашу страницу контактов. Мы также выбираем A/B тест для типа опыта. Затем нажмите «Создать».

Шаг 3

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

Шаг 4

Дайте вашему варианту имя, которое вы легко узнаете позже. Так как мы тестируем другой цвет кнопки, мы называем нашу красную кнопку. Затем нажмите «Готово».

Шаг 5

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

Шаг 6

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

После этого вы увидите редактор Google Optimize. Это довольно мощный редактор. Вы можете буквально изменить что угодно на странице.

В нашем примере мы тестируем результаты кликов на нашей странице контактов с двумя разными цветами кнопки: синим и красным. Если вам интересно, мы просто используем плагин Shortcodes Ultimate для кнопки.

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

Другая вещь, которую мы меняем, — это URL кнопки.

• Оригинальная кнопка связана с  .https://editwp.com/contact-us/?button-test-blue
• Кнопка изменения указывает на  .https://editwp.com/contact-us/?button-test-red

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

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

Ниже описано, как устроен наш тест. Помните, что все изменилось с помощью редактора Google Optimize, а не в WordPress.

A/B оригинальный вариант

В нашем исходном варианте у нас есть синяя кнопка, на которую будет идти 50% трафика. На кнопке ссылка указывает на контактную форму:  .https://editwp.com/contact-us/?button-test-blue

Вариант с красной кнопкой A/B

В нашем другом варианте у нас есть красная кнопка, на которую будет идти 50% трафика. На кнопку ссылка указывает на контактную форму:  .https://editwp.com/contact-us/?button-test-red

Шаг 7

Следующим шагом является добавление цели. Это цель или то, что вы хотите проверить. По умолчанию таргетинг установлен на 50% трафика, поэтому вы можете оставить все как есть. Дайте вашей цели краткое описание, чтобы вы могли легко понять, почему вы добавили ее позже. Помните, что иногда вы можете запускать тесты месяцами, поэтому обязательно добавьте что-нибудь, что вы сможете распознать позже. Затем нажмите «Добавить цель эксперимента».

Шаг 8

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

Шаг 9

Мы используем как просмотры страниц объективного типа, начиная с нашей страницы связи: /contact-us/button-test.

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

Шаг 10

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

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

Резюме

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

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