Розширений код Google Analytics
Підприємці, аналітики, маркетологи та SEO-спеціалісти завжди хотіли б бачити позитивну динаміку свого проєкту в Google Analytics. Для цього необхідно уважно стежити за поведінкою користувачів на сайті та отримувати більше важливих даних і сигналів.
Сьогодні ми допоможемо вам у цьому — просто використовуйте готовий розширений код Universal Analytics і позбавте себе необхідності виконувати безліч ручних налаштувань і втручань у код вашого сайту.
Одного разу нам набридло виконувати одну й ту саму роботу з налаштування GA на багатьох проєктах, що й призвело до рішення зібрати код, який вирішує найбільш типові завдання.
Отже, ця збірка коду Google Analytics включає:
1. Демографічні звіти та звіти за категоріями інтересів
Ви отримаєте доступ до демографічних даних відвідувачів (вік і стать) та даних про їхні інтереси — сайти якої тематики вони відвідують і які покупки здійснюють у мережі Інтернет. Не забуваємо увімкнути їх використання в самому інтерфейсі: для цього заходимо в "Адміністратор" -> "Налаштування ресурсу" -> "Функції для рекламодавців":
2. Розшифровка міток _openstat від Яндекс Директ
Автоматичне позначення кампаній у Яндекс Директ буде коректно інтерпретуватися в Google Analytics. Більше не потрібно витрачати час на UTM-мітки.
Автоматичне відстеження подій без втручання в код сайту
3. Відстеження кліків по всіх вихідних посиланнях вашого сайту
Кожен клік по вихідному посиланню відобразиться у вигляді події, а ярликом цієї події буде той сайт, на який перейшов користувач. Ось як це виглядатиме у звіті про події (для перевірки працездатності коду ми рекомендуємо самому згенерувати кілька подій після встановлення коду та перевірити їх відображення у звіті "У режимі реального часу"):
Ярлик = цільовий URL переходу:
Ця функція дуже актуальна для блогерів, які заробляють розміщенням оглядів і втомилися вислуховувати казки на кшталт "з вашого блогу дуже мало переходів на наш сайт".
4. Відстеження завантажень документів
Будь-яке завантаження документа формату zip|exe|dmg|pdf|doc|docx|xls|xlsx|ppt|mp3|txt|rar|wma|mov|avi|wmv|flv|wav
з вашого сайту відобразиться у вигляді події "Завантаження", ярликом цієї події буде шлях до завантаженого документа:
5. Відстеження натискань на e-mail із посиланням "mailto:"
Подія так і називатиметься — email, ярлик покаже, на які саме адреси натискають користувачі:
6. Відстеження натискань на телефони з посиланням "tel:"
В аналітиці відобразиться подія "Телефон", її ярликом буде безпосередньо сам номер телефону:
Хочете, щоб усе це працювало за замовчуванням у вашому Google Analytics?
Крок 1. Візьміть цей фрагмент коду і вставте перед закриваючим тегом у шапці вашого сайту: (зручно використовувати кнопку Copy у правому верхньому куті блоку з кодом)
(function(i,s,o,g,r,a,m) { i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() {
(i[r].q=i[r].q||[]).push(arguments) } ,i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
} )(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX-X', 'auto');
ga('require', 'displayfeatures');
var OpenStatParser = {
_params: { } ,
_parsed: false,
_decode64: function(data) {
if (typeof window['atob'] === 'function') {
return atob(data);
}
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
ac = 0,
dec = "",
tmp_arr = [];
if (!data) {
return data;
}
data += '';
do {
h1 = b64.indexOf(data.charAt(i++));
h2 = b64.indexOf(data.charAt(i++));
h3 = b64.indexOf(data.charAt(i++));
h4 = b64.indexOf(data.charAt(i++));
bits = h1 << 18 | h2 << 12 | h3 << 6 | h4; o1 = bits >> 16 & 0xff;
o2 = bits >> 8 & 0xff;
o3 = bits & 0xff;
if (h3 == 64) {
tmp_arr[ac++] = String.fromCharCode(o1);
} else if (h4 == 64) {
tmp_arr[ac++] = String.fromCharCode(o1, o2);
} else {
tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);
}
} while (i < data.length);
dec = tmp_arr.join('');
return dec;
} ,
_parse: function() {
var prmstr = window.location.search.substr(1);
var prmarr = prmstr.split('&');
this._params = { } ;
for (var i = 0; i < prmarr.length; i++) {
var tmparr = prmarr[i].split('=');
this._params[tmparr[0]] = tmparr[1];
}
this._parsed = true;
} ,
hasMarker: function() {
if (!this._parsed) {
this._parse();
}
return (typeof this._params['_openstat'] !== 'undefined') ? true : false;
} ,
buildCampaignParams: function() {
if (!this.hasMarker()) {
return false;
}
var openstat = this._decode64(this._params['_openstat']);
var statarr = openstat.split(';');
utmcampaign = statarr[1];
utmsource = statarr[0];
utmcontent = statarr[2];
}
}
if (OpenStatParser.hasMarker()) {
var campaignParams = OpenStatParser.buildCampaignParams();
if (campaignParams !== false) {
ga('set', { 'campaignName': utmcampaign, 'campaignSource': utmsource, 'campaignMedium': 'cpc', 'campaignContent': utmcontent } );
}
}
ga('send', 'pageview');
Крок 2. Замініть UA-XXXXX-X на ідентифікатор вашого сайту
Крок 3. Візьміть цей фрагмент коду і вставте у футер вашого сайту:
if (typeof jQuery != 'undefined') {
var filetypes = /\.(zip|exe|dmg|pdf|doc.*|xls.*|ppt.*|mp3|txt|rar|wma|mov|avi|wmv|flv|wav)$/i;
var baseHref = '';
if (jQuery('base').attr('href') != undefined) baseHref = jQuery('base').attr('href');
var hrefRedirect = '';
jQuery('body').on('click', 'a', function(event) {
var el = jQuery(this);
var track = true;
var href = (typeof(el.attr('href')) != 'undefined' ) ? el.attr('href') : '';
var isThisDomain = href.match(document.domain.split('.').reverse()[1] + '.' + document.domain.split('.').reverse()[0]);
if (!href.match(/^javascript:/i)) {
var elEv = []; elEv.value=0, elEv.non_i=false;
if (href.match(/^mailto\:/i)) {
elEv.category = 'email';
elEv.action = 'click';
elEv.label = href.replace(/^mailto\:/i, '');
elEv.loc = href;
}
else if (href.match(filetypes)) {
var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
elEv.category = 'завантаження';
elEv.action = 'click-' + extension[0];
elEv.label = href.replace(/ /g,'-');
elEv.loc = baseHref + href;
}
else if (href.match(/^https?\:/i) && !isThisDomain) {
elEv.category = 'вихідні';
elEv.action = 'click';
elEv.label = href.replace(/^https?\:\/\//i, '');
elEv.non_i = true;
elEv.loc = href;
}
else if (href.match(/^tel\:/i)) {
elEv.category = 'телефон';
elEv.action = 'click';
elEv.label = href.replace(/^tel\:/i, '');
elEv.loc = href;
}
else track = false;
if (track) {
var ret = true;
if((elEv.category == 'вихідні' || elEv.category == 'завантаження') && (el.attr('target') == undefined || el.attr('target').toLowerCase() != '_blank') ) {
hrefRedirect = elEv.loc;
ga('send','event', elEv.category.toLowerCase(),elEv.action.toLowerCase(),elEv.label.toLowerCase(),elEv.value, {
'nonInteraction': elEv.non_i ,
'hitCallback':gaHitCallbackHandler
} );
ret = false;
}
else {
ga('send','event', elEv.category.toLowerCase(),elEv.action.toLowerCase(),elEv.label.toLowerCase(),elEv.value, {
'nonInteraction': elEv.non_i
} );
}
return ret;
}
}
} );
gaHitCallbackHandler = function() {
window.location.href = hrefRedirect;
}
}
Крок 4. Аналізуйте отримані дані
Сподіваємося, що цей код полегшить вам життя під час роботи з Google Analytics, а отримані дані сприятимуть покращенню ресурсу та зростанню бізнесу!
