A/B-тест с помощью Google Optimize и Popmechanic.io

Пункт 0 – получаем все необходимые доступы

Первым шагом нужно запросить у клиента доступы, которые позволят настроить передачу данных из Popmechanic в сервисы Google:

  1. Доступ в Google Analytics на изменение на вашу почту.
  2. Доступ в Google Optimize на публикацию.
    • Если у клиента нет Optimize – попросить завести на ту же почту, к которой привязан Google Analytics, так как нам нужно привязать эксперимент к уже настроенным в Google Analytics целям.
  3. Доступ в Google Tag Manager на изменение (далее – GTM), если скрипт Google Analytics (далее – GA) установлен через GTM.
    • Если GA установлен напрямую (без GTM), доступ в GTM не нужен.

Пункт 1. НАСТРАИВАЕМ GOOGLE OPTIMIZE

1. Связка Google Optimize с Google Analytics
Чтобы видеть, как механика влияет на цели в GA, нужно настроить связь аккаунта Optimize и GA.



Для этого нужно:

завести Optimize на ту же почту, что и GA в меню настройки контейнера Optimize справа нажать на "Установление связи с Google Аналитикой" -> "Связь с ресурсом"
Примечание: если у вас не будет доступа к GA, то вы не сможете установить связь.
2. Создание нового проекта оптимизации
В созданном аккаунте нажимаем "Создать проект оптимизации":

3. Настройка проекта оптимизации
Во всплывшем справа окне настройки проекта оптимизации:

  1. Введите название эксперимента
  2. Укажите URL главной страницы вашего сайта
  3. Выберите "Эксперимент А/Б

4. Создание вариантов тестирования
После нажатия кнопки "Создать" вы окажетесь на странице создания эксперимента.
Обычно эксперимент состоит из 2 веток тестирования (в редких случаях больше).

По умолчанию будет создана одна, которая называется "Исходный вариант".
Вам нужно создать вторую:

  • нажмите на "Добавить вариант" и назвать, например "С формой".
5. Настройка правил тестирования
После того, как создали 2-й вариант переходите к настройке таргетинга. Нажмите "Добавить правило":
Примечание: на самом деле таргетинг эксперимента будет задан в Popmechanic. Optimize предполагает, что вы установите код Optimize (код оптимизации) на сайт и с помощью него будете изменять внешний вид сайта. Только для этого нужна настройка таргетинга, иначе Optimize не позволит запустить эксперимент.
Задайте условия правила:
- Выбираем URL
- URL содержит
- Вводим адрес домена вашего сайта (без www, http, https)
Если вы не установили связь с GA, можно сделать это во время создания проекта оптимизации.
Optimize предложит вам установить код Optimize (код Оптимизации).

Установите его, если не был установлен раннее (можно через GTM)
Распределение трафика будет контролироваться на стороне Optimize.

6. ID эксперимента

Если связь с GA уже установлена, то вы увидите экран, где сможете найти ID эксперимента.
Он нам пригодится на следующих шагах, можете скопировать сразу
7. Выбор целей эксперимента

Цель - это то, что мы считаем главным для победы в эксперименте, метрика на которую ориентируемся.

Обычно у ecommerce проектов настроена интеграция с GA по стандартным целям: доход, просмотры страниц, транзакции, отказы.

Также могут быть кастомные цели, такие как нажатие на кнопку регистрации (см. скриншот).
Вы можете выбрать до 3 целей.
8. Запускаем эксперимент

Цель - это то, что мы считаем главным для победы в эксперименте, метрика на которую ориентируемся.

Обычно у ecommerce проектов настроена интеграция с GA по стандартным целям: доход, просмотры страниц, транзакции, отказы.

Также могут быть кастомные цели, такие как нажатие на кнопку регистрации (см. скриншот).
Вы можете выбрать до 3 целей.
Пункт 2. НАСТРАИВАЕМ POPMECHANIC

Вне зависимости от типа формы (встроенная или всплывающая), настройка всегда осуществляется через js-сужение в таргетинге Popmechanic.

Попасть в него можно двумя способами:
  • при создании новой или редактировании уже созданной формы
  • из раздела "Формы", наведя курсор на нужную форму и выбрав "Таргетинг"
  • при создании новой или редактировании уже созданной формы
Пролистываем страницу таргетинга вниз до js-сужения. Сюда нужно будет вставить js-код, который будет:

  • разделять трафик в нужной нам пропорции по веткам
  • запоминать, какая вариация эксперимента у визитора (для последующих сессий)
  • отправлять данные в GA о том, какую вариацию увидел пользователь
ЧТО МОЖНО ТЕСТИРОВАТЬ?

1) Ничего vs виджет Popmechanic
Используется для того, чтобы проверить, влияет ли вообще наличие виджета Popmechanic на какой-либо показатель.
Варианты использования:
- с рекомендациями и без рекомендаций
- с показом условий доставки и без
- с показом бонусного промокода и без показа


2) Ничего vs Ничего
Используется только для предварительного теста равномерности распределения трафика.
Если по результатам теста в Google Optimize между двумя вариантами, где мы НИЧЕГО не показываем и ничего не меняли есть статически достоверная разница – результатам дальнейших тестов доверять нельзя, трафик распределяется неравномерно по какой-то причине.


3) Виджет Popmechanic 1 vs Виджет Popmechanic 2
Используется, когда мы уже понимаем, что виджет приносит пользу, но хотим выбрать среди нескольких виджетов.
Если же вам нужно выбрать виджет по показателю процента конверсий в подписку или кликов на него – используйте стандартный внутренний тест в Popmechanic без использования Google Optimize.

1) Ничего vs виджет Popmechanic

В этом случае мы проверяем влияет ли наличие всплывающей или встроенной формы на выполнение целей из GA. Тут нам пригодится ID эксперимента из Optimize. Для этого нужно вставить в js-сужение следующий код:
    var expId = 'ваш_идентификатор_эксперимента';
    
    var variation = document.cookie.split(expId)[1].split(';')[0].split('.')[2];
    variation = parseInt(variation);
    return variation;
    Примечание: можете вставлять код, как есть. Символ "//" - значит, что все после него будет игнорироваться в коде. Специально оставили вам подсказки в коде, чтобы вы могли поменять распределение трафика или id эксперимента.
      Ничего vs виджет Popmechanic, когда в js-сужении уже есть какой-то код
        var expId = 'ваш_идентификатор_эксперимента'; //(в кавычки вставить идентификатор эксперимента)
        
        var variation = document.cookie.split(expId)[1].split(';')[0].split('.')[2];
        variation = parseInt(variation);
        
        if (!variation) { return false };
        Примечание: обратите внимание, что в этом коде поменялась только последняя строчка. Он делает буквально следующее: если вариация 0 (исходный вариант или не показываем ничего), то показ формы блокируется. Если нет, то активируется считывание дальнейшего js-сужения, которое отвечает за проверку какого-нибудь дополнительного условия.
          Ничего vs виджет Popmechanic, когда это - встроенный виджет
            var expId = 'ваш_идентификатор_эксперимента'; //(в кавычки вставить идентификатор эксперимента)
            var formId = 'ID_формы'; // подставить ID формы
            
            try {
                var variation = document.cookie.split(expId)[1].split(';')[0].split('.')[2];
                variation = parseInt(variation);
                return variation;
            } catch (e) {
                // Скрипт GO не успел отработать
                var checkGOCookie = function() {
                    try {
                        var variation = document.cookie.split(expId)[1].split(';')[0].split('.')[2];
                        variation = parseInt(variation);
                        if (variation) {
                            PopMechanic.embed(
                                formId,
                                PopMechanic.$('[data-popmechanic-embed=' + formId + ']')
                            );
                        }
                    } catch (e) {
                        setTimeout(checkGOCookie);
                    }
                }
                setTimeout(checkGOCookie);
            }
            
            Примечание: такой сложный код нужен на тот случай, если GO загрузится позже скрипта PopMechanic и cookie не будет установлен сразу
              2) Ничего vs Ничего (A/A-тест)

              В Вы можете создать так называемый A/A-тест, чтобы проверить, равномерно ли распределяется трафик и можно ли доверять результатам тестирования.
              Для этого проделайте все предыдущие этапы, выберите любую форму, запущенную на сайте через Popmechanic и внесите в её таргетинг JS-сужение.

              Замените последнюю строчку кода в JS-сужении на
              return false;
              Форма не будет показана вообще, трафик будет делится на несколько веток:

                JS-cужение для проверки корректности работа теста, без показа виджетов вообще
                var expId = 'ваш_идентификатор_эксперимента'; //(в кавычки вставить идентификатор эксперимента)
                
                var variation = document.cookie.split(expId)[1].split(';')[0].split('.')[2];
                variation = parseInt(variation);
                
                return false;
                3) Виджет Popmechanic 1 vs Виджет Popmechanic 2

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

                Для этого создайте 2 формы для теста с одинаковыми основными условиями показа и таргетингом.
                В JS-сужении одной из них используйте return variation == 0, а другой return variation == 1

                  JS-cужение для варианта 1
                  var expId = 'ваш_идентификатор_эксперимента'; //(в кавычки вставить идентификатор эксперимента)
                  
                  var variation = document.cookie.split(expId)[1].split(';')[0].split('.')[2];
                  variation = parseInt(variation);
                  
                  return variation == 0;
                  JS-cужение для варианта 2
                  var expId = 'ваш_идентификатор_эксперимента'; //(в кавычки вставить идентификатор эксперимента)
                  
                  var variation = document.cookie.split(expId)[1].split(';')[0].split('.')[2];
                  variation = parseInt(variation);
                  
                  return variation == 1;
                  Как понять, все ли работает?

                  Если вы зайдете во вкладку "Отчеты" в эксперименте и увидите, что данные по эксперименту поступают (см. скриншот – видно, что считаются сеансы), то все настроено корректно.
                    Вам была полезна эта статья?