A/B тестирование на сайте с помощью JS и Яндекс.Метрики

Проблема

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

Наша библиотека

Преимущества нашего решения:

  • все правила тестирования хранятся в CSS, а знаний JS при этом не нужно,
  • она не использует никакие фреймворки и может быть подключена на любом сайте,
  • минимум кода,
  • для сбора данных можно использовать внешение системы, в нашем примере это Яндекс.Метрика.

Пример использования

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

amazing

Для этого в CSS были созданые две группы стилей, для скрытия верхних и нижних переключателей, которые будут переключаться библиотекой:

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

Далее необходимо подключить перед вызовом счётчика Яндекс.Метрики библиотеку код которой доступен на GitHub, а также там описаны параметры.

После чего инициализировать функцию для тестирования и передать в Метрику параметры нашего теста:

Результат

Теперь в Метрике в пункте Содержание — Параметры Визитов (вообще эти параметры удобно использовать для разной аналитики) появится такая информация:

params

Можно (а чаще и нужно) пойти чуть дальше, и настроить цели визитов (обязательно прочитайте про них, упрощает жизнь), тогда картинка станет ещё интереснее:

goals

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

Пример примитивен, но даёт широкий простор для творчества. Удачных A/B тестов и увеличения конверсии!

  • Спасибо за статью, все очень доступно. Теперь главное — это применить, давно тема А/В теста интересовала

  • lexa777

    Как работает скрипт? Подставляет каждому пользователю попеременно разные классы и фиксирует их по айпи? Не получается с помощью обновления увидеть оба варианта отображения.