Для початку слід підключити свій сайт до 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.
1ga(
'send'
,
'event'
,
'button'
,
'click'
,
'nav buttons'
, 4);
Де:
- button – це категорія (category).
- Click – це дія (action).
- nav buttons – це ярлик (label).
- 4 – це значення value
Ви можете надсилати події простіше, використовуючи приклади нижче, в яких були видалені додаткові параметри, які можуть не стати в нагоді в процесі підрахунку конверсій сайту.
123ga(
'send'
,
'event'
,
'category'
,
'action'
);
ga(
'send'
,
'event'
,
'category'
,
'action'
,
'label'
);
ga(
'send'
,
'event'
,
'category'
,
'action'
,
'label'
, value);  
// value – це число.
Команда send також може приймати необов’язкові параметри об’єкта поля для будь-якої з команд. Об’єкт поля – це стандартний об’єкт JavaScript. Можна використовувати конкретні імена полів та їх значення, прийняті analytics.js.
Наприклад, ви можете встановити поле для конкретної події. Приклад:
1ga(
'send'
,
'event'
,
'category'
,
'action'
, {
'page'
:
'/my-new-page'
});
Можливо, перед вами стоятиме завдання знімати всі параметри, крім показника відмов. У такому разі слід використовувати поле безвзаємодії. Приклад:
1ga(
'send'
,
'event'
,
'category'
,
'action'
, {
'nonInteraction'
: 1});
Усі параметри команди send мають певні імена. Таким чином, ви можете відправити подію в Analytics, передавши лише об’єкт поля команді send:
1234567ga(
'send'
, {
'hitType'
:
'event'
,          
// Обов'язково.
'eventCategory
': '
button
',   // Обов'
язково.
'eventAction'
:
'click'
,      
// Обов'язково.
'eventLabel
': '
nav buttons
',
'
eventValue': 4
});
Зайдіть на сторінку Довідка про поля Analytics, ви дізнаєтесь повний список назв полів, які можуть використовуватися при налаштуванні відправки даних в Analytics під час підрахунку конверсій сайту.
Примітка: При використанні наступного синтаксису пам’ятайте, що параметри цієї події аналогічно можна передати безпосередньо функції ga.
Приклади підрахунку конверсії сайту
В основному веб-майстру необхідна інформація про подію, яка може статися в будь-якій точці браузера. Для того, щоб реалізувати відправку певної події, необхідно встановити так званий «прослуховувач», усередині якого викликається команда event.
Припустимо, що у вас є посилання, за яким починає завантажуватися PDF-файл:
1<button id="button">Скачать</button>
Кросбраузерне відстеження подій:
Для того, щоб проводити підрахунок конверсій сайту за допомогою чистого JavaScript, необхідно підключити такий код до сторінки, яку хочете прослуховувати.
12345678910111213141516var
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:
1234// Використовується бібліотека 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.