Як порахувати конверсію сайту

Для початку слід підключити свій сайт до Google Analytics і Google Webmaster. Як це зробити, пояснювати, я думаю не варто. За посиланнями інтуїтивно це можна зробити. Далі йде гайд про те, як порахувати конверсію сайту за допомогою Google Analytics.

Якщо докладніше, то в гайді розповідається, як надіслати події за допомогою analytics.js

Analytics.js – це частина Universal Analytics. Якщо ви використовуєте Classic Analytics (ga.js), відвідайте центр оновлення, щоб дізнатися, як перейти на analytics.js.

Як порахувати конверсію сайту

План статьи

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

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

ЗначенняТипОбов’язковоОпис
Категорія(category)StringТакОб’єкт взаємодії (наприклад, button).
Дія(action)StringТакТип взаємодії (наприклад, click).
Ярлик(label)StringНетВикористовується для категоризації подій (наприклад, nav buttons).
Значення(value)NumberНіВважає кількість (наприклад, 4 рази).

Реалізація підрахунку конверсії сайту

Для того, щоб відправити подію, необхідно передати функції ga команду send з типом event.

ga('send', 'event', 'button', 'click', 'nav buttons', 4);

Де:

  • button – це категорія (category).
  • Click – це дія (action).
  • nav buttons – це ярлик (label).
  • 4 – це значення value

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

ga('send', 'event', 'category', 'action');
ga('send', 'event', 'category', 'action', 'label');
ga('send', 'event', 'category', 'action', 'label', value);  // value – це число.

Команда send  також може приймати необов’язкові параметри об’єкта поля для будь-якої з команд. Об’єкт поля – це стандартний об’єкт JavaScript. Можна використовувати конкретні імена полів та їх значення, прийняті analytics.js.

Наприклад, ви можете встановити поле для конкретної події. Приклад:

ga('send', 'event', 'category', 'action', {'page': '/my-new-page'});

Можливо, перед вами стоятиме завдання знімати всі параметри, крім показника відмов. У такому разі слід використовувати поле безвзаємодії. Приклад:

ga('send', 'event', 'category', 'action', {'nonInteraction': 1});

Усі параметри команди send мають певні імена. Таким чином, ви можете відправити подію в Analytics, передавши лише об’єкт поля команді send:

ga('send', {
'hitType': 'event',          // Обов'язково.
'eventCategory': 'button',   // Обов'язково.
'eventAction': 'click',      // Обов'язково.
'eventLabel': 'nav buttons',
'eventValue': 4
});

Зайдіть на сторінку Довідка про поля Analytics, ви дізнаєтесь повний список назв полів, які можуть використовуватися при налаштуванні відправки даних в Analytics під час підрахунку конверсій сайту.

Примітка: При використанні наступного синтаксису пам’ятайте, що параметри цієї події аналогічно можна передати безпосередньо функції ga.

Приклади підрахунку конверсії сайту

В основному веб-майстру необхідна інформація про подію, яка може статися в будь-якій точці браузера. Для того, щоб реалізувати відправку певної події, необхідно встановити так званий «прослуховувач», усередині якого викликається команда event.

Припустимо, що у вас є посилання, за яким починає завантажуватися PDF-файл:

<button id="button">Скачать</button>

Кросбраузерне відстеження подій:

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

var downloadLink = document.getElementById('button');
addListener(downloadLink, 'click', function() {
ga('send', 'event', 'button', 'click', 'nav-buttons');
});

/**
* Може використовувати у всіх W3C-сумісних браузерах та Internet Explorer при додаванні обробника
* @param {Object} елемент Object, до якого можна закріпити «прослуховувач» подій.
* @param {string} тип A string представляє тип події, який «прослуховуватиметься»
*     (наприклад, load, click, і так далі).
* @param {function()} callback - Функція, яка отримує повідомлення.
*/
function addListener(element, type, callback) {
if (element.addEventListener) element.addEventListener(type, callback);
else if (element.attachEvent) element.attachEvent('on' + type, callback);
}

У цьому прикладі, функція addEventListener додає «прослуховувача» кроссбраузерно. Додавання “прослуховувача” відбувається за подією кліка на кнопку. При натисканні дані надсилаються до Google Analytics.

Використовуйте jQuery

jQuery – це бібліотека мови JavaScript, яка завоювала величезну популярність у всьому світі. Ця бібліотека виправляє невідповідність браузерів і зручніша при відборі необхідних об’єктів. Якщо ви підключили бібліотеку jQuery до сайту або до сторінки, на якій потрібно відстежувати події, можна використовувати наступну форму для надсилання даних у Google Analytics:

// Використовується бібліотека jQuery Event API v1.3
$('#button').on('click', function() {
ga('send', 'event', 'button', 'click', 'nav-buttons');
});
 

Що робити після?

Ви повинні були зробити такі дії:

  • Додавання сайту до Google Webmaster та Google Analytics, їх зв’язування між собою (через Analytics).
  • Додавання на сайт коду “прослуховувача”, який надсилатиме інформацію Analytics.

Тепер перейдіть в Google Analytics -> Адміністратор-> Цілі. Натисніть “+Мета”. У другій дії виберіть “Подія”, а далі все за налаштуваннями на сайті.

Дякуємо за увагу, використовувалася особиста інформація + переклад досі нерусифікованого Google.