Как настроить А/Б-тестирование в интернет-магазине

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

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

Как работает А/Б-тестирование

Случайным образом показывайте посетителям либо версию А, либо версию Б страницы. Затем сравните показатели эффективности этих версий — сколько заказов сделали покупатели на каждой версии.

В Shop-Script доступны два способа проведения А/Б-тестов:

• встроенными инструментами Shop-Script;
• с использованием сервиса веб-аналитики Google Analytics.

Встроенное А/Б-тестирование Shop-Script

Встроенные инструменты позволяют быстро настроить тестирование без программирования.

Шаг 1. Создайте тест

Перейдите в раздел Shop-Script → Маркетинг → А/Б-тесты и нажмите Создать тест.

Введите название теста. Оно поможет отличать этот тест от других в будущем.

Укажите количество вариантов для проверки. Добавьте нужное количество вариантов дизайна или содержимого страниц.

У каждого варианта есть буквенное обозначение: A, B, C, D и т. д. Эти обозначения используются в программном коде теста.

Шаг 2. Добавьте код теста в шаблон страницы

Сохраните тест. Нажмите кнопку Получить код и скопируйте автоматически сформированное условие для смены вариантов содержимого:

{if $wa->shop->ABtest(1) == 'A'}
    ... HTML для варианта “смартфоны” ...
{else}
    ... HTML для варианта “планшеты” ...
{/if}

Замените строки с многоточиями на HTML-код или текст для каждого варианта теста.

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

{if $wa->shop->ABtest(1) == 'A'}
    {include file="list-thumbs.html" products=$wa->shop->productSet("smartphones")}
{else}
    {include file="list-thumbs.html" products=$wa->shop->productSet("tablets")}
{/if}

Готовый код вставьте в шаблон дизайна или страницы — в место, где находится текущий код, который вы хотите протестировать.

А/Б-тест запускается сразу после сохранения шаблона. После этого разные варианты оформления будут отображаться для разных посетителей.

Шаг 3. Наблюдайте за результатами

Результаты теста появятся в разделе Shop-Script → Отчеты → Продажи, когда появятся заказы от покупателей, посетивших страницу с кодом А/Б-теста.

Шаг 4. Примените результаты

Через некоторое время сравните данные от каждого варианта теста. Если один вариант оказался эффективнее остальных, удалите элементы А/Б-тестирования из шаблона и оставьте только выигравший вариант HTML-кода.

Как настроить А/Б-тестирование с Google Analytics в интернет-магазине

А/Б-тестирование (или сплит-тестирование) помогает понять, какой вариант страницы лучше работает: привлекает больше кликов или продаж. Помимо встроенных инструментов Shop-Script, вы можете использовать Google Analytics для проведения таких тестов. Это позволит получить дополнительные данные и сравнить результаты из разных источников.

Настроить тестирование в Google Analytics можно двумя способами:

• с помощью функции «Эксперименты»;
• с использованием пользовательских переменных.

В этой статье рассмотрим второй способ — он даёт больше контроля над процессом тестирования.

Что будем тестировать

В качестве примера сравним продажи при разных списках «спец. предложений» на главной странице.

Что нужно сделать:

1. Создать второй, экспериментальный список товаров.
2. Настроить случайное отображение одного из списков.
3. Сравнить результаты в Google Analytics.

Рекомендация: используйте статические списки — набор товаров не должен меняться во время тестирования. Это обеспечит достоверные результаты.

Шаг 1. Подключите Google Analytics

Подключите Google Analytics к сайту для сбора данных о конверсиях.

Шаг 2. Запустите тестирование

Включите генератор случайных чисел

Добавьте следующий код в начало шаблона страницы, которая формирует список товаров для тестирования:

{$AB_version = $wa->storage('AB_version')}
{if empty($AB_version)}
    {$AB_version = mt_rand(1, 2)}
    {$wa->storage('AB_version', $AB_version)}
{/if}

Как это работает:

1. Код проверяет, был ли посетитель уже на сайте и какой вариант ему показывался.
2. Если посетитель первый раз на сайте, генерируется случайное число — 1 или 2. Это определяет, какой список товаров он увидит.
3. Это число сохраняется в памяти браузера.
4. При следующих посещениях посетитель видит тот же вариант — чтобы результаты теста были честными.

Важно: добавьте тот же код в начало шаблона index.html (главной страницы). Это нужно, чтобы переменная AB_version была доступна не только в конкретном списке товаров, но и на всей странице.

Если вы тестируете отдельную информационную страницу, добавьте код в исходный код этой страницы.

Добавьте условие для отображения разных вариантов

Предположим, на витрине отображается список товаров с идентификатором promo. Вы хотите сравнить его эффективность с новым списком promo_test.

Добавьте условие в тот же шаблон:

{if $AB_version == 1}
    {include file="list-thumbs.html" products=$wa->shop->productSet('promo')}
{else}
    {include file="list-thumbs.html" products=$wa->shop->productSet('promo_test')}
{/if}

Теперь разные посетители будут видеть разные списки товаров.

Добавьте отслеживание в Google Analytics

Добавьте вызов метода _setCustomVar в шаблон index.html:

{if $AB_version == 1}
    <script type='text/javascript'>
        var _gaq = _gaq || [];
        _gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Promo product list (old)', 2]);
    </script>
{else}
    <script type='text/javascript'>
        var _gaq = _gaq || [];
        _gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Promo product list (new)', 2]);
    </script>
{/if}

Это нужно для сбора статистики в Google Analytics. Убедитесь, что в настройках сайта в приложении «Сайт» включена интеграция с Google Analytics.

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

Важно: код с _setCustomVar необходимо добавить до строки:

{$wa->headJs()}

Эта строка подключает код Google Analytics, включая вызов _trackPageview. Метод _setCustomVar должен вызываться раньше для корректного подсчёта статистики.

Параметры метода _setCustomVar

_gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Promo product list (new)', 2]);

Параметр	Описание
_setCustomVar	Системный параметр (записывается так)
1	Номер слота — порядковый номер для хранения данных. Всего доступно 5 слотов (1–5). Номер значения не имеет
HomepageProductList	Имя переменной. Должно быть одинаковым для обоих вариантов
Promo product list (old) / Promo product list (new)	Значение переменной — то, что отображается в отчётах Google Analytics. Должно различаться для каждого варианта
2	Уровень действия: 1 — только на одной странице, 2 — в течение всей сессии (до закрытия браузера), 3 — навсегда для этого пользователя

После настройки разные посетители будут видеть разные варианты оформления:

Как отследить результаты A/B-теста в Google Analytics

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

Создание сегмента в Google Analytics

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

1. Откройте отчёт, в котором нужно оценить эффективность альтернативного списка товаров. Например, «Поведение → Обзор».
2. Нажмите кнопку «Добавить сегмент» (она находится над графиком в верхней части страницы).
3. Нажмите «Новый сегмент».
4. Задайте имя сегмента — используйте значение переменной, например:
   • «Promo product list (old)»
   • «Promo product list (new)»
5. В качестве условия выберите:
   • Условия
   • Моя переменная (значение 01) → содержит
   • Введите одно из значений переменной в текстовое поле.

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

Просмотр статистики

Созданные сегменты появятся в разделе:

«Стандартные отчёты → Аудитория → Персонализированный → Мои переменные»

Здесь можно посмотреть статистику по каждому значению переменной и оценить результаты A/B-теста.

Как внедрить победивший вариант на сайт

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

1. Удалите код, который случайным образом выбирает вариант.
2. Удалите код, который показывает разные версии, и оставьте только тот вариант, который выиграл.

Например, нужно удалить такой фрагмент:

{if $AB_version == 1}
    {include file="list-thumbs.html" products=$wa->shop->productSet('promo')}
    <script type='text/javascript'>
        _gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Promo product list (old)', 2]);
    </script>
{else}
    {include file="list-thumbs.html" products=$wa->shop->productSet('promo_test')}
    <script type='text/javascript'>
        _gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Promo product list (new)', 2]);
    </script>
{/if}

И оставить только код победившего варианта:

{include file="list-thumbs.html" products=$wa->shop->productSet('promo_test')}

Как правильно проводить A/B-тесты на сайте

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

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

Показывайте разные варианты страницы посетителям одновременно в течение одного периода.

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

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

Используйте A/B/N-тестирование

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

{$AB_version = $wa->storage('AB_version')}
{if empty($AB_version)}
    {$AB_version = mt_rand(1, 3)} {* укажите нужное количество вариантов, например 3 *}
    {$wa->storage('AB_version', $AB_version)}
{/if}

Соответственно изменится условие формирования HTML:

{if $AB_version == 1}
    ...HTML-код первого варианта...
    <script type='text/javascript'>
        _gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Version 1', 2]);
    </script>
{elseif $AB_version == 2}
    ...HTML-код второго варианта...
    <script type='text/javascript'>
        _gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Version 2', 2]);
    </script>
{else}
    ...HTML-код третьего варианта...
    <script type='text/javascript'>
        _gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Version 3', 2]);
    </script>
{/if}

Не меняйте сайт во время теста

Не вносите большие изменения в рекламные кампании и структуру сайта, пока идёт тест. Если вы поменяете что-то ещё, результаты теста станут непонятными — вы не поймёте, что именно повлияло на поведение посетителей.

Накопите достаточную выборку

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

Тестируйте один элемент за раз

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

Повторите тест для проверки

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