Контент-експерименти в Google Analytics для всього сайту одночасно

У більшості з нас настає час, коли нам необхідно запустити експеримент в Google Analytics щоб зрозуміти, що працює найкращим чином для нашого сайту. Мабуть, коли мова заходить про контент-експериментах, ми найчастіше чуємо про посадочних сторінках і оптимізації їх елементів (кнопки, заклики до дії і так далі).

Як ми це робимо? Ми просто беремо шматок JavaScript-коду, який Google Analytics люб'язно генерує для нас, і додаємо в <head></head> тег нашого сайту. Даний код просто-напросто перенаправляє частина користувачів на альтернативну (тестову) сторінку, додаючи при цьому певний параметр URL-у цієї сторінки. Цей параметр дозволяє Google Analytics розуміти, які з користувачів бачили оригінальну сторінку, а які — альтернативну. Всі ми це знаємо. Це дуже просто.

image

І наш огидний параметр:

image

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

Давайте уявимо, що вам необхідно протестувати головне меню сайту (його колір, кількість елементів у ньому і так далі). Ми могли б створити альтернативну сторінку з новою версією меню і направляти туди частину користувачів. Але що побачать користувачі, які були направлені на альтернативну сторінку, та потім їм заманулося перейти куди-небудь ще? Вони як і раніше побачать оригінальне меню. Жонглювати меню таким чином — не дуже хороший тон і може тільки заплутати.



Ось користувач намагається відвідати сторінку нашого сайту під час експерименту:

image

… і відразу ж перенаправляється на альтернативну версію з новим меню:

image

Потім, користувач вирішує піти в інший розділ сайту, де він як і раніше бачить оригінальне меню:

image

На щастя, у нас є спосіб уникнути таких казусів.

Пару слів про контент-експериментах без редиректів

Якщо ти бувалий експерт Google Analytics з деякими технічними навичками, тобі вже, можливо, відомо, завдяки офіційній документації, про так званих експериментах без редиректів. Вони дозволяють нам тестувати різні елементи на сторінці без необхідності перенаправляти користувачів на іншу сторінку. Цей «трюк» можна виконати, маючи хоча б елементарні знання Javascript і HTML. Це найбільш елегантний спосіб проводити такого роду експерименти.

Я рекомендую хоча б поверхово пробігтися по матеріалу на цю тему, перш ніж ми продовжимо, але якщо у вас немає настрою, я спробую коротко описати все нижче.

Отже, ви налаштовуєте експеримент через інтерфейс Google Analytics, але замість реальних сторінок на вашому сайті, ви вказуєте «пустушки» (оскільки у нас не буде сторінок, куди користувач буде перенаправлятися). Нам обов'язково потрібно вказати ці пустушки — GA буде збирати та надавати дані цих варіацій, як зазвичай.

image

Потім, з налаштувань експерименту ви копіюєте Experiment Key і використовуєте його для завантаження бібліотеки експерименту:

<script src="//www.google-analytics.com/cx/api.js?experiment=YOUR_EXPERIMENT_ID"></script>


Відразу під цією подгрузкой, ви вставляєте невеликий код, який дозволить вам присвоювати користувачів до певної групи експерименту:

<script>
cxApi.setDomainName('.sendpulse.com');
cxApi.setCookiePath('/');
cxApi.chooseVariation();
var experiment_group = cxApi.getChosenVariation();
</script>


Коли користувач присвоюється до певної групи, дана інформації зберігається в куку експерименту і потім йому завжди показується одна версія елемента (незалежно від сторінки). Інформація про те, до якої групи був привласнений користувач, надсилається в Google Analytics стандартним способом, під час звернення до сервера разом з pageview (переглядом сторінки).

Які достоїнства експериментів без редиректів
  1. Ви уникаєте мерзенних редиректів і бридких параметрів у ваших URL-ах
  2. Такі експерименти краще позначається на швидкості завантаження сторінки
  3. Даний спосіб дозволяє проводити експеримент не на одній сторінці, а на всьому сайті одночасно


Які переваги експерименту на всьому сайті одночасно

  1. Можливість тестувати елементи, які відображаються на всіх сторінках сайту, при цьому зберігаючи їх сталість для одного користувача
  2. Можливість збирати дані для висновків експерименту набагато швидше, оскільки ми будемо експериментувати на підставі трафіку всього сайту, а не окремої сторінок


Детальне покрокове пояснення експериментів на всьому сайті одночасно

Все, що вам потрібно зробити для того, щоб проводити експеримент на всьому сайті — це додати код експериментів без редіректу на всіх сторінках сайту. Логічно, чи не так?

Зазвичай, це робиться шляхом вставки коду в шаблон хэдера («шапки») сайту. Даним кодом абсолютно байдуже, на якій сторінці він знаходиться — все, що йому потрібно, це присвоїти користувача до певної групи і відправити дані про цій групі в Google Analytics. Коли користувач вперше відвідує сайт і бачить одну з версій досліджуваного елемента, дана інформація зберігається в куку, і під час всіх подальших контактів з досліджуваним елементом на кожній з сторінок сайту, він завжди буде бачити той варіант, який він бачив раніше.

Давайте повернемося до верстата, і я покажу вам практичне застосування даного підходу.

Налаштовуємо експеримент

Нам необхідно протестувати різні кольори кнопки реєстрації на нашому сайті (зелений, червоний, жовтий). Кнопка відображається в самому верху сайту на всіх його сторінках. Отже, нам слід подбати про те, щоб користувач бачив однаковий колір кнопки скрізь і завжди. Критерій експерименту — натискання на кнопку реєстрації.

image

Налаштування інтерфейсу

Отже, створюємо експеримент в Google Analytics.

image

Як бачите, ми вказали адреси неіснуючих сторінок, тому що GA зобов'язує нас робити це. Але не турбуйтеся -хоча ці налаштування не пройдуть верифікації, експеримент буде чудово працювати і виконувати свою роль.

Не забудьте скопіювати Experiment ID — він нам знадобитися.

image

Редагувати вихідний код сайту

Давайте завантажимо бібліотеку для проведення експериментів, використовуючи наш Experiment ID, а потім викличемо кілька функцій цієї бібліотеки, які будуть присвоювати користувача до групи експерименту:

image

Тепер, додамо певний код логіки, яка буде змінювати колір кнопки в залежності від групи, до який був присвоєний користувач.

image

Даний код всього лише змінює CSS class кнопки залежно від групи експерименту, до якої присвоєно користувач. Природно, вам необхідно створити два додаткових класу для кнопки.

Найголовніше, що вам необхідно пам'ятати — весь код повинен бути доданий в шаблон шапки вашого сайту, щоб вони був присутній на всіх сторінках (в межах тегів <head></head>, як і у випадку зі стандартним кодом експерименту).

Тепер користувач, що бере участь в експерименті, завжди буде бачити кнопку одного кольору.

Натискаємо «Start» в налаштуваннях експерименту. Пам'ятайте — сміливо ігноруйте повідомлення про помилки валідації (але при цьому власноруч переконайтеся, що ви все зробили правильно).

От і все. Вдалого експериментування!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.