Javascript библиотеки за Google Analytics: Каква е разликата между analytics.js, gtag,js и ga.js

С развитието на цифровите технологии и телефонията, с появата на нови формати, стандарти и устройства е необходимо да се изградят нови алгоритми и инструменти за анализ на данни.

Възможностите на Google Analytics като инструмент за събиране на данни редовно се разширяват и обновяват чрез актуализиране на JavaScript библиотеки. В тази статия ще ви разкажeм какви са библиотеките и как да ги използвате.

Малко история: библиотека urchin.js и ga.js

Откъде води началото си Google Analytics? През Април 2005г. (тогава SEO се нуждаеше само от линкове, а PPC беше в начален стадий), Google купува компанията Urchin Software, която разработва инструмент за аналитика — Urchin WebAnalytics, работещ на библиотеката urchin.js. По-късно, през 2006 г., Urchin Web Analytics е преименуван на Google Analytics, който познаваме днес. А през 2009 г. е пусната библиотеката ga.js.

Основното предимство на ga.js тогава е било, че тази библиотека е била научена на асинхронна работа, което означава, че може да се зарежда във фонов режим без да се намесва в изтеглянето на други скриптове и друго съдържание на сайта.

Код ga.js:

<script type="text/javascript">  var _gaq = _gaq || [];  
_gaq.push(['_setAccount', 'UA-XXXXX-X']);  
_gaq.push(['_trackPageview']);  (function() {    
var ga = document.createElement('script'); ga.type = 
'text/javascript'; ga.async = true;    ga.src = ('https:'
 == document.location.protocol ? 'https://ssl' : 
'http://www') + '.google-analytics.com/ga.js';    
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(ga, s);  })();</script>

Google поддържа библиотеката до 2014 г. - една година след пускането на новата версия. Използването на такъв тип библиотека днес няма смисъл и освен това лишава от възможността да се използват функциите, които са внедрени в Google Analytics след 2014г. (напр. ecommerce).

Като цяло може да използвате тази библиотека ако нямате нужда от разширени функции за анализ. Но ако използвате ga.js с цел оптимизиране и намаляване на кода на сайта, най-добре е да преминете направо към analytics.js. Тази библиотека има по-голяма потребителска база, следователно повече потребители вече имат желания кеш.

Наследникът на ga.js - analytics.js

През 2013 г. се появи библиотеката analytics.js, известна още като Universal Analytics. Библиотеката поддържа целия набор от функции на Google Analytics, а именно:

Освен добавянето на тези функции Universal Analytics промени правилата за работа с "бисквитките". Ако преди това Analytics е използвал няколко "бисквитки" за съхранение на данни то сега има един файл, който е подписан с уникален код, наречен client id.

Също така се увеличи броя на целите от 5 на 20 и се разшириха настройките в интерфейса за анализ (преди това трябваше да променим някои настройки директно чрез проследяващия код).

Universal Analytics е подходящ както за начинаещи потребители за основни настройки и семпли задачи, така и за опитни SEO специалисти, които работят с усъвършенствани функции за анализ.

Кодът analytics.js има две опции за внедряванe. Основната опция:

<!-- Google Analytics --><script>(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-XXXXX-Y', 'auto');ga('send', 
'pageview');</script><!-- End Google Analytics →

Този маркер на Google Analytics се зарежда асинхронно във всички браузъри. Но съвременните браузъри не поддържат предварително зареждане на този скрипт.

Следователно има допълнителен, асинхронен:

<!-- Google Analytics --><script>window.ga=window.ga||function(){
(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;ga('create', 
'UA-XXXXX-Y', 'auto');ga('send', 'pageview');</script><script async 
src='https://www.google-analytics.com/analytics.js'></script><!-- 
End Google Analytics -->

Имайте предвид обаче, че Internet Explorer 9 и по-стари мобилни браузъри, които може да не поддържат атрибута async, няма да заредят този скрипт асинхронно. Следователно трябва да се използва само ако много посетители разглеждат вашия сайт в съвременни браузъри.

И не на последно място – gtag.js

Около втората половина на 2017 г. екипът на Google пусна актуализация на библиотеката за анализи — gtag.js, известен още като Global Site Tag.

Тази актуализация беше по-различна от прехода между Classic Analytics (ga.js) и Universal Analytics (analytics.js). Този път бе пуснат изцяло нов таг (а не актуализация на стария, както беше преди), който прехвърля данни към Analytics и зарежда скриптовете, свързани с него, включително анализ.js.

Актуализацията е предназначена да улесни поставянето на различни тагове, например:

Всъщност Global Site Tag е контейнер - след като бъде инсталиран винаги ще имате свързани скриптове от различни услуги на Google.

Кодът на маркера изглежда така:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_ID">
</script><script>  window.dataLayer = window.dataLayer || [];  
function gtag(){dataLayer.push(arguments);}  gtag('js', new Date()); 
 gtag('config', 'GA_ID');</script>

Библиотеката analytics.js все още работи, просто в gtag.js тя се зарежда по различен начин.

Благодарение на Global Site Tag е лесно да се съберат необходимите инструменти на едно място, където да се свързват различни продукти и да се изпращат данни чрез техните тагове.

Ако сте внедрили analytics.js на сайта си, не трябва спешно да го заменяте с gtag.js. Новата библиотека трябва да бъде разгледана внимателно, само ако свържете голям брой тагове.

Не трябва да внедрявате gtag.js ако вашият сайт вече използва Google Tag Manager.

Ето какво казват от Google:

Как да внедрите gtag.js при активен analytics.js

За прехвърляне на данни към Google Analytics, analytics.js използва броячи, най-често чрез метода create:

ga('create', 'UA-XXXXX-Y', 'auto');ga('create', 'UA-XXXXX-Z', 'auto', 'clientTracker');

За gtag.js такива броячи не са необходими и прехвърлянето на данни към необходимия ресурс се извършва чрез идентификатора на този ресурс в командата config.

За да превключите от analytics.js към gtag.js, на всяка страница от сайта трябва да промените кода на Universal Analytics с кода, посочен по-горе за Global Site Tag, но и да замените променливата GA_ID със собствения си идентификатор в Google Analytics.

Как да го свържете?

1. Преглеждания на страници

За да проследявате показванията на страници, трябва да премахнете стандартния код analytics.js. Ако използвате брояч по подразбиране, кодът ще изглежда така:

ga('create', 'GA_ID', 'auto');ga('send', 'pageview');

Вместо това трябва да въведете кода:

gtag('config', 'GA_ID');

Ако използвате персонализиран брояч като този:

ga('create', 'GA_ID', 'auto', 'trackerName');ga('trackerName.send', 'pageview');

Трябва да внедрите gtag.js event вместо него:

gtag('event', 'page_view', { 'send_to': 'GA_ID' });

2. Проследяване на събития

За стандартен код трябва да премахнете брояча send:

ga('create', 'GA_ID', 'auto');ga('send', 'event', 'Button', 'click', 'Fall Campaign');

И да поставите командата event:

gtag('event', 'click', {  'event_category': 'Button',  'event_label': 'Fall Campaign'});

За персонализиран брояч:

ga('create', 'GA_ID', 'auto', 'clientTracker');ga('clientTracker.send', 'event', 'Button', 'click', 'Fall Campaign');

Поставете командата event:

gtag('event', 'click', {  'send_to': 'GA_ID',  'event_category': 'Button',  'event_label': 'Fall Campaign'});

3. Специални параметри и показатели

Премахваме всички команди send на analytics.js за специални параметри:

ga('send', 'hitType', { 'dimension<Index>':  'dimension_value'});

И го заменяме с:

gtag('config', 'GA_ID', {  'custom_map': {'dimension<Index>': 'dimension_name'}});gtag('event', 'any_event_name', {'dimension_name': 'dimension_value'});

По същия начин за команди, които изпращат специални показатели:

ga('send', 'hitType', { 'metric<Index>':  'metric_value'});

Заменяме с:

gtag('config', 'GA_ID', {  'custom_map': {'metric<Index>': 'metric_name'}});gtag('event', 'any_event_name', {'metric_name': 'metric_value'});

4. Проследяване на потребителското време

Трябва да изтриете кода:

ga('send', 'timing', 'timingCategory', 'timingVar', timingValue, 'timingLabel');

И вместо него да внедрите:

gtag('event', 'timing_complete', {  'name': 'timingVar',  'value': timingValue,  'event_category': 'timingCategory',  'event_label': 'timingLabel'});

5. Инсталиране на Google Optimize

В gtag.js вече са вградени рамки — те трябва само да бъдат активирани. За да активирате Google Optimizer, трябва да добавите параметър към последния ред на стандартния gtag.js код:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_ID"></script><script>  window.dataLayer = window.dataLayer || [];  function gtag(){dataLayer.push(arguments);}  gtag('js', new Date());  gtag('config', 'GA_ID'), { 'optimize_id': 'OPT_CONTAINER_ID'});</script>

Където:

Нека обобщим

Ако все още използвате библиотеката ga.js за проследяване на данни в Analytics, заменете я с analytics.js. В противен случай губите възможността да прецизирате получените данни и да ги проследявате с помощта на User ID и Measurement Protocol.

Що се отнася до gtag.js, можете да преминете към него още сега, но не е задължително. Ако вашият сайт използва набор от услуги на Google и в кода трябва да се внедри голям брой тагове, а Google Tag Manager по някаква причина не е подходящ — Global Site Tag е задължителен, както по отношение на услуги за свързване на нови тагове, така и по скорост на зареждане на страниците на сайта.

Имате въпроси? Нека ги обсъдим в коментарите!