A/B-тестирование — это простой и надежный способ проверить, повысится ли эффективность работы вашего интернет-магазина или сайта после каких-то изменений в его дизайне или содержимом конкретной страницы. Суть A/B-тестирования заключается в случайном показе одной (А) либо другой (B) версии отдельной страницы посетителям сайта и последующем сравнении показателей эффективности каждой версии (конверсий, подписок, продаж и т. д.). Например, с помощью A/B-тестирования можно сравнить разницу в конверсии и в объеме продаж в зависимости от набора промо-товаров, которые отображаются на главной странице вашего интернет-магазина.
Существуют разные способы организации A/B-тестирования с использованием Google Analytics: например, с помощью функции «Эксперименты» или с созданием пользовательских переменных. В этой статье описан пример организации тестирования в интернет-магазине на основе Shop-Script 5 с помощью пользовательских переменных в Google Analytics.
В качестве примера сравним уровни продаж в интернет-магазине при отображении разных списков товаров («спец. предложений») на главной странице витрины. Для этого создадим второй, экспериментальный список товаров в дополнение к тому, который уже отображается на главной странице. Для получения наиболее достоверных результатов тестирования лучше использовать статические списки, набор товаров в которых не будет изменяться с течением времени в ходе проведения тестирования.
1. Добавьте счетчик Google Analytics на сайт
Для анализа результатов тестирования подключите ваш сайт к Google Analytics.
2. Запустите тестирование
Включите генератор случайных чисел
Для включения A/B-тестирования добавьте приведенный ниже фрагмент кода в самое начало шаблона темы дизайна, формирующего элемент дизайна, который нужно протестировать. Если вы тестируете отдельную информационную страницу, то дополнительный код нужно добавить в исходный код такой страницы. В этом примере добавляем код генератора в шаблон home.html:
{$AB_version = $wa->storage('AB_version')} {if empty($AB_version)} {$AB_version = mt_rand(1, 2)} {$wa->storage('AB_version', $AB_version)} {/if}
Этот код считывает значение поля AB_version из PHP-сессии посетителя сайта. Если такого поля в сессии нет (т. е. если для данного посетителя еще не определен вариант оформления, который нужно для него отображать), то вычисляем случайное значение — 1 или 2 — и записываем его в сессию посетителя. После этого мы знаем, какой вариант определен для данного посетителя (точнее, значение переменной $AB_version, равное 1 либо 2), и этот посетитель будет во время текущего визита на сайт видеть именно такой вариант.
Важно: этот же фрагмент кода разместите в самом начале исходного кода шаблона index.html. Это нужно для того, чтобы переменная AB_version, кроме конкретного шаблона, была определена также в общем макете темы дизайна.
Добавьте условие для отображения разных вариантов дизайна
Допустим, в вашем магазине в настоящее время отображается список с идентификатором «promo», и вы решили сравнить его эффективность, разместив на витрине новый список — с идентификатором «promo_test».
Теперь в этом же шаблоне используем значение переменной $AB_version с полученным случайным числом для составления условия, формирующего разное HTML-содержимое (т. е. разные списки товаров) для разных посетителей:
{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}
Затем с помощью аналогичного условия добавьте в шаблон index.html вызовы JavaScript-метода _setCustomVar:
{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}
Вставка таких фрагментов JavaScript-кода с разными значениями переменной HomepageProductList («Promo product list (old)» и «Promo product list (new)») необходима для того, чтобы подсчитать эффективность каждого варианта оформления с помощью Google Analytics (в настройках сайта в приложении «Сайт» должна быть включена интеграция с этим сервисом).
Если параллельно с A/B-тестированием в Google Analytics вы также выполняете аналогичное тестированием встроенными средствами Shop-Script, то вместо генератора случаных чисел и условия, описанного выше в этой статье, достаточно использовать условие, которое автоматически формируется инструментом для создания A/B-тестов в бекенде Shop-Script.
Такое условие с JavaScript-кодом необходимо добавить до следующей строки:
{$wa->headJs()}
Эта строка подключает код Google Analytics, в том числе вызов метода _trackPageview, до которого должен быть вызван метод _setCustomVar для правильного посчета статистики.
Что означает каждый параметр в строке JavaScript-кода, используемой при тестировании:
_gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Promo product list (new)', 2]);
_setCustomVar: этот параметр системный — он должен быть записан именно в таком виде.
1: номер слота; пользовательские переменные в Google Analytics можно распределять произвольным образом по нескольким слотам («ячейкам»); в этом примере для простоты используем 1-й слот — принципиального значения это не имеет.
HomepageProductList: имя переменной; оно должно быть одинаковым для обоих тестируемых вариантов дизайна; имя переменной формируется произвольно — на ваше усмотрение.
Promo product list (old) и Promo product list (new): значение переменной; оно обязательно должно быть различным у каждого из тестируемых вариантов, чтобы можно было просматривать отдельную статистику по каждому варианту в Google Analytics.
2: уровень действия переменной; в нашем примере используем уровень 2 — переменная действует в течение периода жизни текущей сессии посетителя сайта.
После этого разные варианты оформления главной страницы магазина станут отображаться для разных посетителей:
3. Отслеживайте статистику в Google Analytics
Для того чтобы сравнить эффективность каждого из вариантов, настройте в Google Analytics сегменты для каждого значения переменной, имя которой используется в эксперименте, как описано ниже.
Сегмент — это отдельный фрагмент статистических данных, сформированный по произвольно заданным критериям (в нашем примере статистика в таких сегментах будет формироваться по значениям переменной HomepageProductList: «Promo product list (old)» либо «Promo product list (new)»).
- Выберите отчет, в рамках которого необходимо оценить эффективность альтернативного списка товаров, например, «Поведение → Обзор».
- Перейдите к настройке сегментов на странице отчета (кнопка над графиком в верхней части страницы) и добавьте новый сегмент.
- Введите наименование сегмента — так, чтобы оно описывало суть варианта страницы, соответствующего этому сегменту, например, скопировать сюда значение переменной: «Promo product list (old)» либо «Promo product list (new)».
- В качестве критерия формирования сегмента выберите вариант «Условия», параметр «Моя переменная (значение 01) → содержит» и в текстовое поле вставьте одно из двух значений переменной.
Таким же образом создайте еще один сегмент — для второго значения переменной.
Созданные вами сегменты для просмотра статистики по каждому значению переменной появятся в разделе «Стандартные отчеты → Аудитория → Персонализированный → Мои переменные» в аккаунте Google Analytics.
4. Примените результаты тестирования
Сравните данные, связанные с каждой переменной (т. е. с каждым протестированным вариантом дизайна). Если один из вариантов оказался значительно более эффективным по важным для вас показателям, чем остальные, и вы решили оставить его в качестве основного, то удалите элементы A/B-тестирования из шаблона витрины и оставьте только рабочий вариант:
- удалите код генератора случайных чисел
- удалите код условия со всеми протестированными вариантами, оставив только тот вариант, который оказался наиболее эффективным; в рассмотренном примере это означает, что нужно удалить весь следующий фрагмент:
{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-тестирования: включить один вариант страницы, замерить конверсию и другие показатели, затем включить другой вариант и снова замерить параметры, после чего сравнить полученные значения. Выборка посетителей в разные периоды времени может быть разной, и сравнивать конверсию в таких случаях некорректно.
- Можно сравнивать не 2 варианта, а больше — такое тестирование называют 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} ...здесь разместите первый вариант экспериментального содержимого... <script type='text/javascript'> _gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Version 2', 2]); </script> {else} ...здесь разместите второй вариант экспериментального содержимого... <script type='text/javascript'> _gaq.push(['_setCustomVar', 1, 'HomepageProductList', 'Version 3', 2]); </script> {/if} - Во время проведения A/B-тестирования не вносите существенных изменений в ваши маркетинговые кампании и структуру сайта, т. к. эти изменения могут повлиять на результаты тестирования и исказить их. В этом случае вам не удастся получить максимально точную картину происходящего.
- Не стоит делать поспешных выводов о результатах тестирования на основании недостаточно больших статистических данных, поскольку в этом случае велика вероятность получить недостаточно точную информацию, искаженную погрешностью работы генератора случайных чисел.
- В течение одного тестового периода выполняйте проверку только одного элемента страницы или дизайна сайта. При одновременном тестировании сразу нескольких элементов могут быть получены недостаточно точные данные (например, когда одновременно сравниваются разные варианты оформления кнопки «В корзину» и варианты дизайна дерева категорий), т. к. каждый из тестируемых параметров (дизайн кнопки и дизайн дерева категорий) может влиять на другой, и независимую проверку каждого из них по отдельности в таких условиях выполнить не удастся.
- Для того, чтобы убедится в правильности завершенного A/B-тестирования, его можно повторить через некоторое время. Подтвержденный таким образом результат заслуживает применения в рабочем режиме.
