Проводим a/b тестирование с помощью google tag manager

Тема в разделе "Полезные материалы", создана пользователем mr_krabs, 24 янв 2015.

  1. mr_krabs
    Оффлайн

    mr_krabs Administrator Команда форума

    Регистрация:
    6 авг 2012
    Сообщения:
    2.053
    Симпатии:
    221
    Баллы:
    63
    Репутация:
    100
    В данном посте мы приведем пример того, как можно провести полноценное A/B тестирование сайта с помощь Google Tag Manager.

    Для тестирования необходимы:
    1. Google Tag Manager
    2. Universal Analytics, установленный через GTM
    3. Установленный на сайте jQuery
    4. Минимальные знания javascript
    Преимущества использования нашего метода:
    1. Полная независимость от разработчиков
    2. Простота проведения теста
    3. Возможность проведения одновременно нескольких тестов
    Код, который используется для тестирования:
    Код:
    <script>
        var testId = '1'; 
        var testCookieName = 'ab_test';
        var testBlock = $('#id');
        var segments = 3;
        var usersPercent = 0.8;
        var trackerName = 'am';
       
        var mainCookie =  testCookieName + '_'  + testId;
        var sessionCookie =  testCookieName + '_'  + testId + '_session';
    
        function getSegment(segmentCnt) {
            return Math.floor(Math.random() * segmentCnt) + 1;
        }
    
        function createCookie(name, value, days) {
            var expires;
    
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toGMTString();
            } else {
                expires = "";
            }
            document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/; domain=." + document.domain + ";";
        }
    
        function readCookie(name) {
            var nameEQ = encodeURIComponent(name) + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
            }
            return null;
        }
    
        function displayChanges(segmentId, testBlock) {
            switch (segmentId) {
                case 1:
                    break;
                case 2:
                    testBlock.css('color', 'red');
                    break;
                case 3:
                    testBlock.css('color', 'green');
                    break;
                default:
                    break;
            }
            if (readCookie(sessionCookie) == null && readCookie(mainCookie) != "0") {
                ga(trackerName + '.send', 'event', 'ab_test', 'test_' + testId + '_segment_' + segmentId, {
                    'nonInteraction': 1
                });
            }
        }
       
        testBlock.ready(function() {
            if (readCookie(mainCookie) == null) {
                if (Math.random() <= usersPercent) {
                    var segmentId = getSegment(segments);
                    displayChanges(segmentId, testBlock);
                    createCookie(mainCookie, segmentId, 500);
                    createCookie(sessionCookie, segmentId);
                } else {
                    createCookie(mainCookie, 0, 500);
                }
            } else {
                var segmentId = readCookie(mainCookie);
                displayChanges(segmentId, testBlock);
            }
        });
    </script>
    

    Принцип работы:

    1. Создается скрипт, который вносит изменения на сайт
    2. Через GTM скрипт подгружается на нужные страницы сайта
    3. При загрузке тестируемой страницы, скрипт случайно относит пользователя к одному из сегментов, вносит на страницу подготовленные изменения и отправляет данные о сегменте в Universal Analytics
    4. Далее в аналитиксе создается нужное количество сегментов и сравнивается друг с другом

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

    Текущая панель:
    var1.png
    Необходимо протестировать:
    var2.png
    Мы специально используем упрощенный пример, чтобы донести суть.

    1. Задаем исходные параметры
    В скрипте для тестирования, код которого приведен выше, необходимо задать исходные настройки.
    Код:
        var testId = 'loginButton';          // номер или название теста
        var testCookieName = 'ab_test';         // название cookie, которые будут использованы в тесте
        var testBlock = jQuery('.navTab.login');         // селектор тестируемого блока или элемента
        var segments = 2;         // количество сегментов
        var usersPercent = 1;         // доля аудитории
        var trackerName = 'am';         // название трекера UA из GTM
    
    • testId - номер или название теста использутся для идентификации конкретного тестирования. Используйте английские буквы или цифры
    • testCookieName - название файла cookie, который будет использоваться для отнесения пользователя к определенному сегменту. Используйте английские буквы или цифры
    • testBlock - селектор блока или элемента, который мы собираемся тестировать. В нашем случае это ".navTab.login"
    • segments - количество вариантов, которые мы используем в тесте. В нашем случае это 2: исходный вариант и вариант с зеленым фоном
    • usersPercent - доля аудитории, которая будет использоваться в аб тесте. В нашем случае это 100%
    • trackerName - название трекера Universal Analytics, которое должно быть задано в Google Tag Manager
      tracker.png

    2. Создаем блок, который будет вносить изменения
    В блоке switch необходимо создать код, который будет отрабатывать для каждого из тестируемых вариантов. У нас тестируемых вариантов 2: case 1 - не вносит никаких изменений (исходный вариант), case 2 - заменяет фон в кнопке авторизации / регистрации. Важно, чтобы количество блоков case было равно количеству тестируемых вариантов.
    Код:
            switch (segmentId) {
                case 1:                                   // исходный вариант без изменений
                    break;
                case 2:                                   // тестируемый вариант с измененным цветом фона
                    testBlock.css('background-color', '#A8C58E');
                    break;
                default:
                    break;
            }
    
    В итоге получаем следующий код для тестирования
    Код:
    <script>
        var testId = 'loginButton';
        var testCookieName = 'ab_test';
        var testBlock = $('.navTab.login');
        var segments = 2;
        var usersPercent = 1;
        var trackerName = 'am';
    
        var mainCookie =  testCookieName + '_'  + testId;
        var sessionCookie =  testCookieName + '_'  + testId + '_session';
    
        function getSegment(segmentCnt) {
            return Math.floor(Math.random() * segmentCnt) + 1;
        }
    
        function createCookie(name, value, days) {
            var expires;
    
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toGMTString();
            } else {
                expires = "";
            }
            document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/; domain=." + document.domain + ";";
        }
    
        function readCookie(name) {
            var nameEQ = encodeURIComponent(name) + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
            }
            return null;
        }
    
        function displayChanges(segmentId, testBlock) {
            switch (segmentId) {
                case 1:
                    break;
                case 2:
                    testBlock.css('background-color', '#A8C58E');
                    break;
                default:
                    break;
            }
            if (readCookie(sessionCookie) == null && readCookie(mainCookie) != "0") {
                ga(trackerName + '.send', 'event', 'ab_test', 'test_' + testId + '_segment_' + segmentId, {
                    'nonInteraction': 1
                });
            }
        }
    
        testBlock.ready(function() {
            if (readCookie(mainCookie) == null) {
                if (Math.random() <= usersPercent) {
                    var segmentId = getSegment(segments);
                    displayChanges(segmentId, testBlock);
                    createCookie(mainCookie, segmentId, 500);
                    createCookie(sessionCookie, segmentId);
                } else {
                    createCookie(mainCookie, 0, 500);
                }
            } else {
                var segmentId = readCookie(mainCookie);
                displayChanges(segmentId, testBlock);
            }
        });
    </script>
    

    3. Загружаем получившийся код в Google Tag Manager и публикуем контейнер
    Для этого создаем "Custom HTML tag" и вставляем в него получившийся код
    gtm1.png
    Настраиваем правила отображения тега. В нашем случае кнопка расположена на всех страницах, поэтому выбираем все страницы
    gtm2.png
    Публикуем контейнер


    4. В UA создаем сегменты с тестируемой аудиторией и смотрим на результаты
    В Universal Analytics создаем сегменты, которые включают сессии для каждого из тестируемых вариантов. Вот пример такого сегмента:
    segment.png

    В итоге мы получаем данные по двум тестируемым сегментам:
    result.png

    Для того, чтобы финально определить статическую значимость результатов аб теста, можно воспользоваться одним из множества калькуляторов, например http://www.evanmiller.org/ab-testing/chi-squared.html

    На этом все. Ждем вопросов и предложений в комментариях.

    ps,
    Если скрипт для a/b тестирования оказался для вас полезным, не забудьте поделиться этой темой в соцсетях!
     
    akakiu нравится это.
  2. kvitisnkiy
    Оффлайн

    kvitisnkiy Новичок

    Регистрация:
    22 янв 2015
    Сообщения:
    5
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    5
    Спасибо большое. Попробую использовать.
     
  3. akakiu
    Оффлайн

    akakiu Новичок

    Регистрация:
    12 сен 2012
    Сообщения:
    16
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    0
    mr_krabs, благодарю! Отличная новость. Буду тестировать.
     
  4. Goodman
    Оффлайн

    Goodman Новичок

    Регистрация:
    13 сен 2012
    Сообщения:
    27
    Симпатии:
    1
    Баллы:
    3
    Репутация:
    0
    Скорее - это для программистов инфа
     
  5. mr_krabs
    Оффлайн

    mr_krabs Administrator Команда форума

    Регистрация:
    6 авг 2012
    Сообщения:
    2.053
    Симпатии:
    221
    Баллы:
    63
    Репутация:
    100
    Не соглашусь. Естественно минимальные знания в js нужны, но не более
     
  6. Goodman
    Оффлайн

    Goodman Новичок

    Регистрация:
    13 сен 2012
    Сообщения:
    27
    Симпатии:
    1
    Баллы:
    3
    Репутация:
    0
    Я вот не программист и вообще ничего не понял.
    Но есть у меня один знакомый - тупой программист - он понял.
    Получается - инфа для программистов, даже самых тупых.
     
  7. akakiu
    Оффлайн

    akakiu Новичок

    Регистрация:
    12 сен 2012
    Сообщения:
    16
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    0
    Данный скрипт очень полезен. Тем более, что нет проблем в том, чтобы навыки и небольшие знания в js получить.
     
  8. Nelly
    Оффлайн

    Nelly Новичок

    Регистрация:
    15 ноя 2013
    Сообщения:
    8
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    0
    Скажите, пожалуйста, а нельзя ли просто вставить код эксперимента, который автоматически генерируется при настройке эксперимента в GA через GTM на исходный вариант страницы через пользовательский тег?
     
  9. Андре
    Оффлайн

    Андре Новичок

    Регистрация:
    1 фев 2015
    Сообщения:
    11
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    0
    Через GTM нельзя запустить эксперимент, т.к. тогда будет проблема с отображением эксперимента.
    Так что не стоит так поступать
    Если собираетесь проводить A/B тестирование, и не хотите возиться с кодом, почитайте хорошую статью, где есть обзор самых лучших и удобных сервисов для A/B тестирования
    http://boosta.ru/services/ab-testing/
     
  10. Андре
    Оффлайн

    Андре Новичок

    Регистрация:
    1 фев 2015
    Сообщения:
    11
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    0
    Ребята, если не хотите возиться с кодами, а хотите использовать простой визуальный редактор и запуск эксперимента за пару минут, то вам обязательно нужно прочитать эту статью - http://boosta.ru/services/ab-testing/
    В ней обзор лучших сервисов для тестирования.
     
  11. Nelly
    Оффлайн

    Nelly Новичок

    Регистрация:
    15 ноя 2013
    Сообщения:
    8
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    0
    Спасибо большое за совет!
    Но хотелось бы понять, с чем связана невозможность установки кода простого эксперимента через GTM. С тем, что код эксперимента нужно вставлять в head, а GTM устанавливается в начале body?
    А почему нельзя вставить код эксперимента И код GTM одновременно? В этом случае будет работать эксперимент?
     
  12. Андре
    Оффлайн

    Андре Новичок

    Регистрация:
    1 фев 2015
    Сообщения:
    11
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    0
    Если установить код эксперимента в GTM, то страница начнёт моргать, будут так называемые блики.
    И это испортит весь эксперимент.
    Да, GTM обязательно должен быть после <body>, а код эксперимента - наоборот, до </head>
    Вы можете использовать GTM для других сервисов и при этом проводить A/B тестирование с помощью кода в <head>.
    И всё тогда будет окей.
    Если хотите пообщаться на эту тему подробнее, напишите мне в Вк - http://vk.com/andreibaklinau
     
  13. mr_krabs
    Оффлайн

    mr_krabs Administrator Команда форума

    Регистрация:
    6 авг 2012
    Сообщения:
    2.053
    Симпатии:
    221
    Баллы:
    63
    Репутация:
    100
    Если вы не перекраиваете всю страницу, то быть может. Для тестов отдельных элементов практически не заметно
    В таком случае теряется суть полного контроля тестирования через GTM
     
  14. Андре
    Оффлайн

    Андре Новичок

    Регистрация:
    1 фев 2015
    Сообщения:
    11
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    0
    Вообще, интересный у вас способ создания A/B эксперимента
    Но слишком сложно...честно говоря.
     
  15. Nigairochka
    Оффлайн

    Nigairochka Новичок

    Регистрация:
    25 дек 2015
    Сообщения:
    4
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    0
    Добрый день. Возник вопрос насчет настройки сегментов .
    Сделала по аналогии с вашим скрином, но данные до сих пор не отображаются.
    Можно поподробнее про то, как прописать условия?
     

    Вложения:

    • GA.jpg
      GA.jpg
      Размер файла:
      39,3 КБ
      Просмотров:
      360
  16. mr_krabs
    Оффлайн

    mr_krabs Administrator Команда форума

    Регистрация:
    6 авг 2012
    Сообщения:
    2.053
    Симпатии:
    221
    Баллы:
    63
    Репутация:
    100
    Nigairochka, данные в GA уходят. Т.е. вообще есть события в разделе Контент - События?
     
  17. Nigairochka
    Оффлайн

    Nigairochka Новичок

    Регистрация:
    25 дек 2015
    Сообщения:
    4
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    0
    mr_krabs,
    статистика по всем сеансам собирается, а вот по сегментам не делится.
    Скрипт в GTM загружен, работает.
    именно в разделе контент-события тоже 0, так как АВ тест настроен не на кнопку.
     

    Вложения:

    • GA2.jpg
      GA2.jpg
      Размер файла:
      73 КБ
      Просмотров:
      338
  18. mr_krabs
    Оффлайн

    mr_krabs Administrator Команда форума

    Регистрация:
    6 авг 2012
    Сообщения:
    2.053
    Симпатии:
    221
    Баллы:
    63
    Репутация:
    100
    Nigairochka,
    Ищите проблему, почему события в GA не передаются
     
  19. Nigairochka
    Оффлайн

    Nigairochka Новичок

    Регистрация:
    25 дек 2015
    Сообщения:
    4
    Симпатии:
    0
    Баллы:
    1
    Репутация:
    0
    На что именно должны передаваться события? на срабатывание скрипта с изменениями на сайт?

    mr_krabs, необходимо еще настроить события таким образом?
     

    Вложения:

    Последнее редактирование модератором: 26 дек 2015
  20. mr_krabs
    Оффлайн

    mr_krabs Administrator Команда форума

    Регистрация:
    6 авг 2012
    Сообщения:
    2.053
    Симпатии:
    221
    Баллы:
    63
    Репутация:
    100
    Nigairochka, не смогу вам помочь, вы не понимаете базовые вещи
     

Поделиться этой страницей