Сплит-тест WooCommerce с Google Optimize

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

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

Эта статья поможет вам настроить сплит-тестирование Google Optimize в вашем магазине WooCommerce. После прохождения этого руководства вы поймете, как можно тестировать элементы дизайна и формулировки, чтобы повысить коэффициент конверсии. Так что следуйте, вам не нужно быть разработчиком или кодером! Я обещаю, что буду делать все просто.

Я разбил эту статью на три части:

1. Как настроить учетную запись Google Optimize
2. Интегрируйте Google Optimize с вашим магазином WooCommerce
3. Настройте свой первый сплит-тест в Google Optimize

Я настоятельно рекомендую любому владельцу магазина WooCommerce с разумным объемом трафика (не менее 5000 уникальных посетителей в месяц) настроить сплит-тесты. Это фантастический инструмент для определения того, какие части структуры или формулировок вашего сайта ограничивают ваши коэффициенты конверсии. Вы можете использовать Google Optimize для бесплатной настройки этих тестов, что идеально подходит для начала. Примерами распространенных сплит-тестов являются проверка того, какого цвета должна быть кнопка «Добавить в корзину», чтобы стимулировать клики, скрывающие или отображающие метки доверия на странице оформления заказа, текст кнопки «Оформить заказ» и другие важные элементы на веб-сайте вашего магазина.

В этом примере мы проведем эксперимент с кнопкой «Оформить заказ» и сравним два разных цвета друг с другом. Давайте начнем!

Настройте свой аккаунт Google Оптимизации

Создать учетную запись Google Optimize очень просто, особенно если вы уже используете Google. Перейдите на страницу https://marketingplatform.google.com/about/optimize/ и нажмите кнопку «Войти для оптимизации» в правом верхнем углу. Если у вас еще нет учетной записи Google, вам придется ее создать.

После того, как вы создали свою учетную запись, вас встретит мастер, который проведет вас через процесс настройки. Давайте пройдем через это вместе.

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

Шаг 2 — настроить первую учетную запись Google Optimize. Вам будут задавать всевозможные вопросы, связанные с конфиденциальностью данных и GDPR, которые сильно зависят от физического местоположения вашего бизнеса. В США действуют менее строгие правила, чем в Европейском Союзе. Вот отличная статья о том, что розничные продавцы электронной коммерции должны знать о GDPR.

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

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

Интегрируйте Google Optimize с вашей установкой WordPress

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

Как вы можете видеть в разделе справа, мы на 25% закончили создание этого опыта. В этой части руководства мы настроим имя нашего контейнера, настроим основу для вашего сплит-теста и свяжем его с Google Analytics.

Для организации контейнеров мне нравится использовать URL-адрес целевого веб-сайта в качестве их имени. Вы можете легко изменить имя контейнера, нажав на три вертикальные точки рядом с «Информация о контейнере» на правой боковой панели.

Нажмите «Изменить имя контейнера» и введите любое имя, которое поможет вам распознать веб-сайт, с которым интегрирован этот контейнер. Для целей этого руководства я выберу «Woo Google Optimize Demo».

Настройте свой первый сплит-тест в Google Optimize

Теперь, когда у вас есть правильное имя для вашего контейнера, давайте пройдемся по настройке вашего первого сплит-теста для вашего магазина WooCommerce. Сначала нажмите синюю кнопку «Поехали», которая откроет новую область в правой части экрана.

В этой области вы можете указать имя для вашего опыта. Для этого примера я назвал свой «Тест цвета кнопки оформления заказа». Вы должны указать URL-адрес страницы, на которой вы хотите запустить эксперимент, который будет URL-адресом страницы оформления заказа.

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

• А/Б тест. Это позволяет вам создать один вариант исходной страницы и сравнить их друг с другом, направляя одну часть вашего трафика на оригинал, а другую часть на вариант.
• Многовариантный тест. Это позволяет создавать несколько вариантов исходной страницы. Я бы использовал это только тогда, когда у вас есть серьезный объем трафика, иначе для получения надежных результатов потребуется много времени.
• Тест переадресации . Вы можете перенаправить часть своего трафика на другую страницу, отличную от исходной. Это замечательно, если вы хотите сравнить два совершенно разных макета страницы или если вы хотите направить часть своего трафика на свой поддомен.
• Персонализация. Вы можете использовать этот тип опыта для персонализации контента вашего веб-сайта в зависимости от определенных правил. Например, вы можете настроить таргетинг на страны и предоставить информацию, относящуюся к этим странам (например, флажки GDPR только для клиентов из ЕС в Checkout).

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

Нажмите «Добавить вариант» на следующем экране и дайте варианту имя, которое поможет вам узнать, что вы тестируете. В моем случае я переключу кнопку «Разместить заказ» на странице «Оформить заказ» на красный цвет фона, поэтому «Красная кнопка размещения заказа» имеет смысл для этого урока.

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

Google Optimize попытается открыть страницу Checkout, как только вы нажмете «Изменить», чтобы настроить вариант. Поэтому вам нужно убедиться, что у вас открыта вкладка с вашим магазином WooCommerce и вы находитесь на странице оформления заказа.

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

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

Как только вы начнете перемещать указатель мыши по экрану, вы увидите, что каждый HTML-компонент вашей страницы Checkout будет выделен. Перейдите к кнопке «Оформить заказ» и нажмите на нее. Откроется окно атрибутов, которое вы можете видеть на скриншоте выше.

Изменить цвет фона и цвет текста очень просто. В этом окне атрибутов прокрутите вниз, пока не увидите поля для цвета текста и цвета фона, и обновите значения до любых цветов, которые вы хотите протестировать. В этом примере кнопка «Оформить заказ» имеет черный фон с серым текстом. Я изменил это на белый текст на красном фоне в тесте A/B.

После этого я полностью настроил вариант A/B-тестирования и могу нажать «Сохранить» в правом верхнем углу редактора вариантов.

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

Вернувшись к обзорному экрану, вы увидите, что вариант Google Optimize сообщает, что мы тестируем два изменения, но пусть это вас не смущает. Никогда не рекомендуется тестировать более одного элемента за раз, и именно это мы здесь и делаем. Одним изменением стал цвет шрифта, а другим — цвет фона кнопки. Это все еще только один элемент, который мы тестируем.

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

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

Затем вам будет представлен фрагмент кода, который необходимо разместить на своем веб-сайте. Как именно это реализовать, зависит от вашей конфигурации Google Analytics (универсальное отслеживание или глобальный тег сайта). В этом примере я использую глобальную интеграцию тегов сайта, поэтому все, что мне нужно сделать, это добавить одну строку кода на свой сайт. Google Optimize отлично объясняет, поэтому внимательно прочитайте инструкции.

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

Есть несколько способов добавить отслеживание кликов на ваш сайт WooCommerce; мой любимый способ — использовать Диспетчер тегов Google. Я не буду вдаваться в подробности настройки всего процесса отслеживания здесь, так как это будет отдельный пост. Тем не менее, я настоятельно рекомендую прочитать эту статью на Medium, если вы еще не настроили отслеживание кликов.

После того, как вы настроили Диспетчер тегов Google с правильными тегами и развернули его на своем сайте WooCommerce (например, с помощью этого бесплатного плагина), вы готовы настроить пользовательскую цель в Google Optimize.

Нажмите «Добавить цель эксперимента» и выберите «Создать пользовательский». Это даст вам экран, на котором вы определяете свои собственные правила отслеживания.

Обратите внимание, что значение «Ярлык события» должно соответствовать ярлыку, который вы настроили в Диспетчере тегов Google. Чтобы Google Optimize мог отслеживать это пользовательское событие — нажмите кнопку «Разместить заказ» — ярлыки событий должны совпадать в Google Optimize и Google Tag Manager. Вы также можете использовать «Действие по событию», «Категорию события» или «Значение события» в качестве параметров правила, но для этого руководства подойдет метка.

После сохранения пользовательской цели вы можете запустить инструмент диагностики, чтобы убедиться, что ваш эксперимент Google Optimize настроен правильно. Помните, что для загрузки на вашу страницу Оптимизации требуется Google Analytics. Поэтому, если вы исключили своего пользователя из списка отслеживаемых (например, заблокировали отслеживание для всех администраторов в WP), вполне вероятно, что эта проверка не удастся. Если это произойдет, я рекомендую вам временно включить вашего пользователя в отслеживание Google Analytics. Кроме того, вы можете открыть свой магазин WooCommerce в окне инкогнито и убедиться, что все коды для Диспетчера тегов Google, Google Analytics и Google Optimize загружаются в код вашего магазина.

На этом этапе ваш опыт должен быть запущен и работает должным образом. Вы можете использовать режим Live Debug Mode из Google Optimize и просмотреть свой сайт, чтобы проверить работу. Вы увидите, что Chrome показывает вам область под веб-сайтом, которая дает вам представление о том, как Google Optimize работает на вашем сайте WooCommerce.

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

Наконец, вы готовы собрать тестовые данные и оптимизировать свой сайт WooCommerce для увеличения количества конверсий и доходов. Этот процесс может сбивать с толку, поэтому, если вы застрянете на каком-либо этапе, свяжитесь с нами в Твиттере, и я могу помочь: @iamjankoch. Удачного тестирования!