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 (код Оптимизации).

Игнорируйте: так как изменения на сайте, разделение трафика по веткам тестирования лежит на стороне Popmechanic.

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

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

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

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

Также могут быть кастомные цели, такие как нажатие на кнопку регистрации (см. скриншот).
Вы можете выбрать до 3 целей.
В самом низу страницы будут другие настройки, их не нужно трогать. Optimize напомнит вам, что код оптимизации не установлен. Игнорируйте.
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 variationKey = 'popmechanic.' + expId; 
    var variation;
    
    if (localStorage.getItem(variationKey) === null) {
      variation = Math.floor(Math.random() + 0.5); //( 0,5, если нужно разделить трафик 50%/50%. Чтобы больше трафика попадало в ветку с попапом Popmechanic, увеличивайте это число до 1. Например, 0,95 будет означать, что ветке с формой будет 95% пользователей)
      ga('set', 'expId', expId);
      ga('set', 'expVar', variation);
      ga('send', 'event', 'popmechanic', 'experiment', expId, variation);
    
      localStorage.setItem(variationKey, variation);
    }
    
    variation = parseInt(localStorage.getItem(variationKey));
    
    return !!variation;
    Примечание: можете вставлять код, как есть. Символ "//" - значит, что все после него будет игнорироваться в коде. Специально оставили вам подсказки в коде, чтобы вы могли поменять распределение трафика или id эксперимента.
      Ничего vs виджет Popmechanic, когда в js-сужении уже есть какой-то код
        var expId = 'ваш_идентификатор_эксперимента'; //(в кавычки вставить идентификатор эксперимента)
        var variationKey = 'popmechanic.' + expId; 
        var variation;
        
        if (localStorage.getItem(variationKey) === null) {
          variation = Math.floor(Math.random() + 0.5); //( 0,5, если нужно разделить трафик 50%/50%. Чтобы больше трафика попадало в ветку с попапом Popmechanic, увеличивайте это число до 1. Например, 0,95 будет означать, что ветке с формой будет 95% пользователей)
          ga('set', 'expId', expId);
          ga('set', 'expVar', variation);
          ga('send', 'event', 'popmechanic', 'experiment', expId, variation);
        
          localStorage.setItem(variationKey, variation);
        }
        
        variation = parseInt(localStorage.getItem(variationKey));
        
        if (!variation) {return false};
        Примечание: обратите внимание, что в этом коде поменялась только последняя строчка. Он делает буквально следующее: если вариация 0 (исходный вариант или не показываем ничего), то показ формы блокируется. Если нет, то активируется считывание дальнейшего js-сужения, которое отвечает за проверку какого-нибудь дополнительного условия.
          2) Ничего vs Ничего (A/A-тест)

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

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

            JS-cужение для проверки корректности работа теста, без показа виджетов вообще
            var expId = 'ваш_идентификатор_эксперимента'; //(в кавычки вставить идентификатор эксперимента)
            var variationKey = 'popmechanic.' + expId; 
            var variation;
            
            if (localStorage.getItem(variationKey) === null) {
              variation = Math.floor(Math.random() + 0.5); //( 0,5, если нужно разделить трафик 50%/50%. Чтобы больше трафика попадало в ветку с попапом Popmechanic, увеличивайте это число до 1. Например, 0,95 будет означать, что ветке с формой будет 95% пользователей)
              ga('set', 'expId', expId);
              ga('set', 'expVar', variation);
              ga('send', 'event', 'popmechanic', 'experiment', expId, variation);
            
              localStorage.setItem(variationKey, variation);
            }
            
            variation = parseInt(localStorage.getItem(variationKey));
            
            return false;
            3) Виджет Popmechanic 1 vs Виджет Popmechanic 2

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

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

              JS-cужение для варианта 1
              var expId = 'ваш_идентификатор_эксперимента'; //(в кавычки вставить идентификатор эксперимента)
              var variationKey = 'popmechanic.' + expId; 
              var variation;
              
              if (localStorage.getItem(variationKey) === null) {
                variation = Math.floor(Math.random() + 0.5); //( 0,5, если нужно разделить трафик 50%/50%. Чтобы больше трафика попадало в ветку с попапом Popmechanic, увеличивайте это число до 1. Например, 0,95 будет означать, что ветке с формой будет 95% пользователей)
                ga('set', 'expId', expId);
                ga('set', 'expVar', variation);
                ga('send', 'event', 'popmechanic', 'experiment', expId, variation);
              
                localStorage.setItem(variationKey, variation);
              }
              
              variation = parseInt(localStorage.getItem(variationKey));
              
              return variation == 0;
              JS-cужение для варианта 2
              var expId = 'ваш_идентификатор_эксперимента'; //(в кавычки вставить идентификатор эксперимента)
              var variationKey = 'popmechanic.' + expId; 
              var variation;
              
              if (localStorage.getItem(variationKey) === null) {
                variation = Math.floor(Math.random() + 0.5); //( 0,5, если нужно разделить трафик 50%/50%. Чтобы больше трафика попадало в ветку с попапом Popmechanic, увеличивайте это число до 1. Например, 0,95 будет означать, что ветке с формой будет 95% пользователей)
                ga('set', 'expId', expId);
                ga('set', 'expVar', variation);
                ga('send', 'event', 'popmechanic', 'experiment', expId, variation);
              
                localStorage.setItem(variationKey, variation);
              }
              
              variation = parseInt(localStorage.getItem(variationKey));
              
              return variation == 1;
              Как понять, все ли работает?

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

                1. Самый простой способ узнать, как установлен GA – спросить у клиента.
                2. Если клиент не знает:
                  • откройте режим разработчика (f12) и перейдите во вкладку Console
                  • вставьте в Console код:
                ga('send', 'event', 'popmechanic', 'experiment', 'id_вашего_эксперимента', 1);

                Пример на скриншоте ниже. Если в течение 30 минут в отчетах Optimize:

                • появится одна сессия, значит код GA установлен не через GTM, и ошибка где-то в коде;
                • не появится ни одной сессии, значит код GA установлен через GTM

                  GA установлен через GTM, что делать?

                  Для начала исправим код в таргетинге Popmechanic в части отправки данных в GA через GTM. Идея в том, что нужно "пропихивать" данные через datalayer. Меняем первую часть кода на вторую.
                    1) БЫЛО В КОДЕ JS:
                      ga('set', 'expId', expId);
                      ga('set', 'expVar', variation);
                      ga('send', 'event', 'popmechanic', 'experiment', expId, variation);
                    2) НУЖНО В КОДЕ JS:
                      dataLayer.push({popmechanicExpVar: variation});
                      dataLayer.push({popmechanicExpId: expId});
                      dataLayer.push({event: 'popmechanicSetExp'});
                    После этого идем настраивать GTM по инструкции.

                      Вам была полезна эта статья?