Библиотеки JavaScript для Google Analytics: в чем разница между analytics.js, gtag.js и ga.js

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

Возможности Google Analytics как инструмента получения данных регулярно расширяются и пополняются с помощью обновления JavaScript библиотек. В этом посте я расскажу, какие бывают библиотеки и как их использовать.

Немного истории: библиотека urchin.js и ga.js

С чего начиналась Google Аналитика? В апреле 2005 года (тогда для SEO нужны были только ссылки, а PPC и вовсе находилось в зачаточном состоянии) Google купил компанию Urchin Software, которая разработала аналитический инструмент — Urchin WebAnalytics, работающий на библиотеке urchin.js. Позже, в 2006 году, Urchin WebAnalytics был переименован в известный нам 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 — 2015 годов (например, ecommerce).

В целом, вы можете использовать эту библиотеку, если не нужны расширенные функции аналитики. Но если вы используете ga.js в целях оптимизации и уменьшения кода сайта, лучше сразу перейти на analytics.js. У этой библиотеки пользовательская база больше, следовательно у большего числа пользователей уже есть нужный кэш.

Наследница ga.js — analytics.js

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

• User ID;
• Measurement Protocol;
• специальные параметры и показатели;
• расширенная электронная торговля (Enhanced Ecommerce);
• дополнительные функции и обновления.

Кроме этих функций, Universal Analytics изменил правила работы с cookie. Если раньше Analytics использовал несколько файлов cookie для хранения данных, то теперь — один файл, который подписан уникальным client id.

Также увеличили количество целей с 5 до 20 и расширили настройки в интерфейсе аналитики (ранее нужно было менять некоторые настройки напрямую через код отслеживания).

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

У кода analytics.js два варианта реализации, основной:

<!-- 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 Аналитики загружается асинхронно во всех браузерах. Но современные браузеры не поддерживают предварительную загрузку этого скрипта.

Поэтому есть дополнительный, асинхронный:

<!-- 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.

Обновление разработали, чтобы упростить размещение различных тегов, например: 

• Google Analytics;
• Conversion.js;
• Google Optimize.

Фактически 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 Optimize необходимо добавить параметр в последнюю строчку стандартного кода 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>

Где:
OPT_CONTAINER_ID — ваш идентификатор Google Optimize.
GA_ID — ваш идентификатор аналитики во всех представленных примерах.

Рекомендую размещать код с Google Optimize как можно выше в теге <head>, иначе страница может прогружаться раньше, чем сработает код, и пользователь заметит смену элементов страницы после запуска кода.

Подведем итоги

Если вы все еще используете библиотеку ga.js для отслеживания данных в аналитике, замените её на analytics.js. В противном случае вы теряете возможность детально настроить получаемые данные и отслеживать их с помощью User ID и Measurement Protocol.

Что касается gtag.js, то на него можно переходить уже сейчас, но в этом нет острой необходимости. Если ваш сайт использует множество сервисов от Google и в код следует внедрять большое количество тегов, а Google Tag Manager по каким-то причинам не подходит — Global Site Tag мастхев, как в плане удобства для подключения новых тегов, так и по скорости загрузки страниц сайта.