A/B тестування в Google Analytics із відстеженням подій

Ростислав Михайлів, засновник TrueSocialMetrics.com ~ 7 хв.

Як відомо, за замовчуванням функція експериментів Google Analytics працює лише з окремими сторінками, і вона добре працює, коли ви починаєте рекламну кампанію. Таким чином, ви можете контролювати URL-адресу призначення. Але що робити, якщо ви не контролюєте джерела трафіку: пошук, реферали, публікації в соціальних мережах. Це головне питання. Але у нас є для цього просте рішення. Для вирішення потрібно:

• jquery
• jquery.cookie

Починаємо тестування

/ індексна сторінка містить зображення за замовчуванням, але ми хочемо замінити його відео для 50% відвідувачів і вимірювати кількість реєстрацій для кожного випадку. Я створив простий js для A/B тестування зі збереженням розподілу в файлах cookie.

розподіл функції (ім'я, комірки) {
    клітинка = $.cookie('ab-testing-' + ім'я);
    if (cell) повернути комірку;
    // виділити
    rand = Math.random();
    якщо (rand<0,5) {
        клітинка = клітинки[0];
    } ще {
        клітинка = клітинки[1];
    }
    $.cookie('ab-testing-' + name, cell, { expires: 90, path: '/' });
    зворотний осередок;
}

Цей код розподіляє 50% користувачів для тестової комірки випадковим чином і зберігає розподіл у файлі cookie та повертає назву комірки розподілу. Перший параметр – «ім’я тесту», другий – список імен комірок

Випадок використання:

allocation('ImageVsVideo', ['Image', 'Video']); // Зображення або відео

Щоб у 50% випадків зображення на сторінці було замінено відео, потрібно додати до елемента унікальний ідентифікатор. Я назвав його: ab-testing-ImageVsVideo.

Це чудово, ми готові до заміни логіки. У результаті я завантажив відео на vimeo.com, після конвертації я отримав наступний код експорту

<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>

Я віддав перевагу коду html5 (але якщо ви хочете, ви завжди можете відступити та використати застарілий флеш-об’єкт).

Наша логіка проста: якщо назва комірки дорівнює «Відео», оновіть ідентифікатор елемента «ab-testing-ImageVsVideo» за вказаним HTML-кодом програвача.

$(функція(){
    cell = allocation('ImageVsVideo', ['Image', 'Video']);
    if (cell=='Video') {
        html = '<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>';
        $('#ab-testing-ImageVsVideo').html(html);
    }
});

Все працює добре, але ми не відстежуємо свої цілі. Як ми дізнаємося, який варіант тесту виграє?

Google Analytics пропонує чудову функцію під назвою «Відстеження подій». Здебільшого він використовується для відстеження дій користувача на сторінці, як-от натискання кнопки або деяке відстеження дій Ajax. Але ми будемо використовувати його для відстеження розподілу клітин нашого тесту. Існує 2 необхідні аргументи: категорія та дія, у нашому випадку категорія «AB-тестування» для всіх а/б-тестів і дію «ImageVsVideo-Image» (або ImageVsVideo-Video) як ідентифікатор. Робочий скрипт для нашої сторінки.

<script type="text/javascript">
  _gaq.push(['_trackEvent', 'AB-Testing', 'ImageVsVideo-' + allocation('ImageVsVideo', ['Image', 'Video'])]);

Ви можете знайти приклад у вихідному коді цільової сторінки, я також розмістив функцію розподілу у файлі ab-testing.js для зручності використання.

Звіти Google Analytics – наступний крок

Наша початкова мета полягала в тому, щоб збільшити "SignUp rate", але ми також хотіли знати економічний результат, загальний коефіцієнт конверсії та досягнення цілей. Тому ми вибрали такі показники:

• Унікальні відвідувачі
• Реєстрація (досягнення цілі 11)
• Реєстрація (коефіцієнт конверсії Goal11)
• Цільова вартість відвідування
• Коефіцієнт конверсії цілі
• Досягнення цілей

Також добре розділити «нових» і «повернених» відвідувачів, тому що, коли ми говоримо про «реєстрацію», ми дбаємо про нових користувачів. Тож давайте перейдемо до спеціального звіту та створимо новий «A/B-тестування»
Це чудово ! Але ми все ще маємо повний список відвідувань без різниці «Зображення» чи «Відео», тому нам потрібно створити 2 користувальницькі сегменти. Перейдіть до «Розширених сегментів» і створіть «Новий спеціальний сегмент» - «Зображення». Пошук метрики "Дія події" містить "ImageVsVideo-Image".
Повторіть те саме для сегмента «Відео» з «Дією події» дорівнює «ImageVsVideo-Video» ".

Нарешті, застосуйте обидва сегменти «Зображення» та «Відео», і ви побачите щось на зразок цього:

У результаті: коефіцієнт конверсії відео 13% проти 10% із зображенням, вища економічна цінність, але коефіцієнт цільової конверсії трохи нижчий. Тому нам потрібно більше статистики. Виберемо допоміжний вимір «Тип трафіку».
Для прямого трафіку результати майже однакові, але для пошукового трафіку «Швидкість реєстрації» та економічна цінність набагато вищі. Але з іншої точки зору, для існуючих користувачів конверсія знижується. Це показує, що для людей, які вже відвідували наш веб-сайт, важливіше «швидке реагування». Тому є сенс показувати «Відео» новим клієнтам, які приходять з пошукових систем.

Посилання

• Event Tracking Guide

Оновлення від 07.05.2013

Я оновив «код розподілу», додавши підтримку кількох тестів для однієї сторінки. Наприклад, на поточній сторінці блогу - 2 тести: - Є 4 різні форми "запису" з різними повідомленнями (але решта 3 приховані). Якщо ви відкриєте сторінку в вихідному режимі, ви знайдете їх.

• Другий тест - це повідомлення під формою з посиланням на сторінки "Як це працює" або "Singup".

Повний код тут, також ви можете download нашу останню версію (пам’ятайте, що ми використовуємо спеціалізований асинхронний js loader, якщо ви не використовуєте його, вам потрібно замінити head.ready(function(){ на $( документ).готовий(функція(){.

функція allocationTestCell(ім'я, комірки) {
    клітинка = $.cookie('ab-testing-' + ім'я);
    if (cell) повернути комірку;
    // виділити
    rand = Math.random();
    початок = 0;
    дельта = 1/cells.length;
    клітинка = клітинки[0];
    for (i=0;i<cells.length;i++) {
        if (i*delta<=rand && rand<(i+1)*delta) {
            клітинка = клітинки[i];
            перерва;
        }
    }
    $.cookie('ab-testing-' + name, cell, { expires: 90, path: '/' });
    зворотний осередок;
}
$(документ).готовий(функція(){
    var AbTesttting = {};
    $('.ab-testing').each(функція(індекс, елемент) {
        test = $(element).attr('data-ab-testing-test');
        клітинка = $(елемент).attr('data-ab-testing-cell');
        if (!(AbTesttting[test] instanceof Array)) {
            AbTesttting[test] = [];
        }
        AbTesttting[test].push(cell);
    });
    // виділення
    для (тест в AbTesttting) {
        allocation = allocationTestCell(test, AbTesttting[test]);
        _gaq.push(['_trackEvent', 'AB-Testing', test + '-' + allocation, 'ab-testing-'+test+'-'+'allocation', 0, true]);
        $('.ab-testing').each(функція(індекс, елемент) {
            _test = $(element).attr('data-ab-testing-test');
            _cell = $(element).attr('data-ab-testing-cell');
            if (_test!=test) повернення;
            if (_cell!=allocation) {
                повернути $(елемент).hide();
            }
            $(елемент).show();
        });
    }
});

Основна відмінність полягає в тому, що новий код не потребує написання жодного фрагмента коду на JS. Вам потрібно лише додати клас "ab-testing" до будь-якого елемента, який ви хочете перевірити, і вказати ім’я тесту та ім’я комірки, наприклад. <div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">деякий код для тестування</div>.

Давайте розглянемо реальний зразок застосування цього тестування з нуля.

Вихідний код цього елемента виглядає так:

<div>
  Проаналізуйте та покращте свою присутність у соціальних мережах <a href="/how-it-works">Почніть зараз</a>
</div>

На першому етапі потрібно скопіювати елемент, змінити повідомлення та зробити його прихованим.

<div>
  Проаналізуйте та покращте свою присутність у соціальних мережах <a href="/how-it-works">Почніть зараз</a>
</div>
<div style="display:none;">
  Проаналізуйте та покращте свою присутність у соціальних мережах <a href="/signup">Почніть зараз</a>
</div>

Прямо зараз, якщо ви оновите сторінку, нічого не зміниться: у вас є 1 видимий і 1 невидимий елементи з посиланням, яке ви хочете перевірити. На наступному кроці нам потрібно вибрати назву тесту та назви комірок. У моєму прикладі:

• signupblogtext - назва тесту
• how-it-works - назва клітинки для першого блоку з посиланням на "як це працює"
• sign-up - назва комірки для прихованого блоку з посиланням на "реєстрація"

Також ми додамо клас "ab-testing" як маркер для нашого JS. Отже, повний робочий код виглядає так:

<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">
  Проаналізуйте та покращте свою присутність у соціальних мережах <a href="/how-it-works">Почніть зараз</a>
</div>
<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="sign-up" style="display:none;">
  Проаналізуйте та покращте свою присутність у соціальних мережах <a href="/signup">Почніть зараз</a>
</div>

У результаті 50% користувачів побачать один блок із посиланням «як це працює», а ще 50% — другий.

Тестування

Мій код зберігає розподіл у файлах cookie користувачів, що означає, що розподіл відбувається лише один раз, тому, якщо ви хочете перевірити це, вам потрібен чистий браузер без файлів cookie. Але набагато простішим рішенням є використання функції Google Chrome Incognito Window. Він забезпечує абсолютно чітке нове вікно браузера без файлів cookie. В результаті ви можете відкрити сторінку кілька разів і перевірити, чи все працює правильно.