Библиотеки JavaScript для Google ***ytics: в чем разница между ***ytics.js, gtag.js и ga.js
С развитием цифровых технологий, телефонии, с появлением новых форматов, стандартов и устройств необходимо выстраивать новые алгоритмы и инструменты аналитики данных.
Возможности Google ***ytics как инструмента получения данных регулярно расширяются и пополняются с помощью обновления JavaScript библиотек. В этом посте я расскажу, какие бывают библиотеки и как их использовать.
Немного истории: библиотека urchin.js и ga.js
С чего начиналась Google Аналитика? В апреле 2005 года (тогда для SEO нужны были только ссылки, а PPC и вовсе находилось в зачаточном состоянии) Google купил компанию Urchin Software, которая разработала аналитический инструмент — Urchin Web***ytics, работающий на библиотеке urchin.js. Позже, в 2006 году, Urchin Web***ytics был переименован в известный нам Google ***ytics. И уже для него в 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-***ytics.com/ga.js\\\'; var s = document.getElementsByTagName(\\\'script\\\')[0]; s.parentNode.insertBefore(ga, s); })();script>
Как настроить расширенную электронную торговлю с помощью Google Tag Manager Google поддерживал библиотеку до 2014 года (еще год после выпуска новой версии). Использование такой библиотеки сейчас не имеет смысла, и, более того, лишает возможности использовать функции, которые внедрили в Google ***ytics после 2014 — 2015 годов (например,
В целом, вы можете использовать эту библиотеку, если не нужны расширенные функции аналитики. Но если вы используете ga.js в целях оптимизации и уменьшения кода сайта, лучше сразу перейти на ***ytics.js. У этой библиотеки пользовательская база больше, следовательно у большего числа пользователей уже есть нужный кэш.
Наследница ga.js — ***ytics.js
В 2013 году появилась библиотека ***ytics.js, она же Universal ***ytics. Библиотека поддерживала весь набор функций Google ***ytics, а именно:
- User ID;
- Measurement Protocol;
- специальные параметры и показатели;
- расширенная электронная торговля (Enhanced Ecommerce) ;
- дополнительные функции и обновления.
Кроме этих функций, Universal ***ytics изменил правила работы с cookie. Если раньше ***ytics использовал несколько файлов cookie для хранения данных, то теперь — один файл, который подписан уникальным client id.
Также увеличили количество целей с 5 до 20 и расширили настройки в интерфейсе аналитики (ранее нужно было менять некоторые настройки напрямую через код отслеживания).
Universal ***ytics подходит как начинающим пользователям для базовой настройки и простых задач, так и опытным SEO-специалистам для работы с продвинутыми функциями аналитики.
У кода ***ytics.js два варианта реализации, основной:
<script>(function(i,s,o,g,r,a,m){i[ \\\'Google***yticsObject\\\']=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-***ytics.com/***ytics.js\\\',\\\'ga\\\');ga(\\\'create\\\', \\\'UA-XXXXX-Y\\\', \\\'auto\\\');ga(\\\'send\\\', \\\'pageview\\\');script><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-***ytics.com/***ytics.js\\\'>script>
Но нужно учитывать, что Internet Explorer 9 и старые мобильные браузеры, которые могут не поддерживать атрибут async, этот скрипт не будут загружать асинхронно. Его следует использовать только в том случае, если многие посетители просматривают ваш сайт в современных браузерах.
Последняя, но не крайняя — gtag.js
Во второй половине 2017 года комaнда Google выпустило обновление библиотеки Аналитики — gtag.js, он же Global Site Tag.
Данное обновление отличалось от перехода между Classic ***ytics (ga.js) и Universal ***ytics (***ytics.js). На этот раз выпустили абсолютно новый тег (а не обновление старого, как было до этого), который передает данные в аналитику, и подгружает подключенные к нему скрипты, в том числе и ***ytics.js.
Обновление разработали, чтобы упростить размещение различных тегов, например:
- Google ***ytics;
- 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>
Библиотека ***ytics.js по-прежнему работает, просто в gtag.js она загружается иначе.
Благодаря Global Site Tag легко собрать нужные инструменты в одном месте, куда подключать различные продукты и отправлять через их теги данные.
Если вы внедрили на сайте ***ytics.js, то срочно заменять его на gtag.js не стоит. К новой библиотеке следует присмотреться, только если вы подключаете много тегов.
Не стоит внедрять gtag.js, если сайт уже использует Google Tag Manager. Цитата из справки Google:
Выберите gtag.js, если вы не можете использовать Google менеджер тегов, или если для вас важны следующие возможности:
- добавление тегов непосредственно на страницу (не нужно тратить время на настройку системы управления тегами) ;
- управление тегами без использования интерфейса, благодаря изменениям их кода JavaScript.
Если вы уже работаете с менеджером тегов, не рекомендуем отказываться от него.
Как внедрить gtag.js при активной ***ytics.js
Для передачи данных в Google ***ytics ***ytics.js использует счетчики, чаще всего через метод create:
ga(\\\'create\\\', \\\'UA-XXXXX-Y\\\', \\\'auto\\\');ga(\\\'create\\\', \\\'UA-XXXXX-Z\\\', \\\'auto\\\', \\\'clientTracker\\\');
Для gtag.js такие счетчики не нужны, а передача данных в необходимый ресурс осуществляется через идентификатор этого ресурса в комaнде config.
Чтобы перейти с ***ytics.js на gtag.js, на каждой странице сайта необходимо сменить код Universal ***ytics на код указанный выше Global Site Tag, но заменив переменную GA_ID на собственный идентификатор Google ***ytics. Как его подключить?
1. Просмотры страницы
Для отслеживания просмотров страниц необходимо удалить стандартный код ***ytics.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\\\');
И разместить комaнду 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\\\');
Разместить комaнду event:
gtag(\\\'event\\\', \\\'click\\\', { \\\'send_to\\\': \\\'GA_ID\\\', \\\'event_category\\\': \\\'Button\\\', \\\'event_label\\\': \\\'Fall Campaign\\\'});
3. Специальные параметры и показатели
Удаляем все send комaнды ***ytics.js для специальных параметров:
ga(\\\'send\\\', \\\'hitType\\\', { \\\'dimension\\\' : \\\'dimension_value\\\'});
И заменяем на:
gtag(\\\'config\\\', \\\'GA_ID\\\', { \\\'custom_map\\\': {\\\'dimension\\\' : \\\'dimension_name\\\'}});gtag(\\\'event\\\', \\\'any_event_name\\\', {\\\'dimension_name\\\': \\\'dimension_value\\\'});
То же для комaнд, которые отправляют специальные показатели:
ga(\\\'send\\\', \\\'hitType\\\', { \\\'metric\\\' : \\\'metric_value\\\'});
Заменяем на:
gtag(\\\'config\\\', \\\'GA_ID\\\', { \\\'custom_map\\\': {\\\'metric\\\' : \\\'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 как можно выше в теге
, иначе страница может прогружаться раньше, чем сработает код, и пользователь заметит смену элементов страницы после запуска кода.Подведем итоги
Если вы все еще используете библиотеку ga.js для отслеживания данных в аналитике, замените её на ***ytics.js. В противном случае вы теряете возможность детально настроить получаемые данные и отслеживать их с помощью User ID и Measurement Protocol.
Что касается gtag.js, то на него можно переходить уже сейчас, но в этом нет острой необходимости. Если ваш сайт использует множество сервисов от Google и в код следует внедрять большое количество тегов, а Google Tag Manager по каким-то причинам не подходит — Global Site Tag мастхев, как в плане удобства для подключения новых тегов, так и по скорости загрузки страниц сайта.
Остались опросы? Давайте обсудим в комментариях. И подписывайтесь на рассылку, чтобы не пропустить новые посты о фишках Google ***ytics:
Истории бизнеса и полезные фишкиКомментарии:
Почему соотношение данных об использовании приложения важнее, чем количество установок и удалений...
11 06 2025 11:50:13
Об истории и значении поговорок и других фразеологических оборотов...
10 06 2025 15:23:22
Человек скачал ваше приложение, воспользовался им один раз и … забыл. Что с этим делать, читайте в Netpeak Journal....
09 06 2025 20:28:13
Самые точные данные статистики, которые вы получите с помощью Google Tag Manager....
08 06 2025 14:43:20
В помощь контент-маркетологам, редакторам, авторам и бизнесу: идеи, которые учитывают фактор SEO. Переупакуйте статьи, заметки, любые другие посты — угодите читателям и поисковикам. Узнать больше!...
07 06 2025 17:10:41
Продвижение казахстанского онлайн-издания, новостника informburo.kz....
06 06 2025 12:45:36
«Что такое диджитал и чем это отличается от услуги продвижения в социальных сетях» — о цифровой стратегии, креативных концепциях и том, как это все происходит в крупных агентствах....
05 06 2025 19:43:41
Как вернуть на сайт как можно больше пользователей...
04 06 2025 15:35:26
Цель — трафик facebook. Делимся кейсом проекта «Мой город»....
03 06 2025 0:47:10
Советы специалистам по контекстной рекламе. Технические сложности, которые возникают при работе с Google ***ytics: от ограничений интерфейса до ошибок настройки отслеживания и последующей недостоверности полученных данных, и решения для них...
02 06 2025 11:37:48
Расширяем возможности визуализации данных из Google ***ytics c помощью пакета RGA и Power BI...
01 06 2025 20:55:41
Здесь не нужно часами собирать семантику, прописывать уйму расширений и создавать максимально релевантные объявления под каждый товар, а потому вам нужен этот понятный и короткий мануал! Читайте дальше!...
31 05 2025 3:43:17
UTM-метки позволяют эффективно отслеживать источники трафика. Но составлять их нужно правильно. Как именно, давайте разбираться....
30 05 2025 2:19:38
Топ doodle games от Google — от менее достойных к самым крутым....
29 05 2025 12:59:14
Как создать популярный и удобный магазин в интернете, какой должна быть его раскрутка и многое другое, прозвучавшее на круглом столе 8P 2017...
28 05 2025 7:27:22
Узнаем расширенную информацию о посещениях сайта с помощью языка R — кейс Netpeak...
27 05 2025 16:32:37
Советы бизнесу от зрителей Big Money и Артема Бородатюка. Предлагаем 11 универсальных, но простых и понятных идей....
26 05 2025 23:41:32
Заказчик всегда приходит с идеей. В этой идее может быть все продумано до мелочей, а может быть только каркас. В любом случае мысли клиента следует систематизировать так, чтобы с ними было удобно работать....
25 05 2025 9:20:41
Психологический бестселлер. Как достичь гармонии во всех делах и начать получать удовольствие от жизни, — об этом читайте в новой рецензии Константина Рябенко на книгу Михая Чиксентмихайи «Поток»....
24 05 2025 14:34:59
Увеличение трафика из поисковых систем Азербайджана на 30% за три месяца. И он продолжает расти...
23 05 2025 5:47:38
20 сервисов для прокачки контента под SEO. Штуки, которые будут полезны новичкам и экспертам....
22 05 2025 20:14:58
Работаете со скриптами R регулярно? Потратьте десять минут на настройку автозапуска и избавьтесь от необходимости активировать R-скрипты вручную...
21 05 2025 2:16:49
Создатели алгоритмов соцсетей используют слабые места человеческого мозга. Случайно или намеренно, но они это делают. Как нам с этим жить?...
20 05 2025 8:53:11
Расширения, горячие клавиши и мгновенный перевод слов на другой язык — минимум лайфаков, которые можно использовать для удобства пользователей Google Chrome...
19 05 2025 8:54:43
Клиникка использует лазеры и нуждается в продвижении. В специфических сферах привлечь потребителя впервые бывает сложнее и дороже, чем удержать его. Этот кейс о том, как повысить количество обращений новых клиентов с помощью видеорекламы...
17 05 2025 19:56:32
Часто копирайтеры пишут для поисковых роботов, не заботясь о качестве контента и читабельности. Рассмотрим метрики для оценки ридабилити....
16 05 2025 12:31:52
6 лайфхаков из опыта специалистов Netpeak Group: пpaктические советы о том, как погрузиться в англоязычную среду в комфортном для себя ритме и объеме. Читайте далее....
15 05 2025 11:50:26
Устанавливаем тег конверсий: самостоятельно и с помощью Google Tag Manager....
14 05 2025 21:18:56
Как проверить качество текста от копирайтера. Составляем техническое задания для копирайтера, проверяем уникальность, наличие ключевых слов, использование LSI, проводим семантический анализ текста....
13 05 2025 23:21:46
Директор «1С-Битрикс» в Казахстане Сармантай Касенов о кейсах, развитии и образовательной миссии компании...
12 05 2025 1:16:55
Как понять, что проект нуждается в новых текстах и сделать читателя счастливым...
11 05 2025 13:30:24
Фишка, которую можно позволить себе даже когда портал продает всего несколько товаров или услуг...
10 05 2025 3:42:44
Если на вашем смартфоне установлен только стандартный набор Uber, Glovo, 2ГИС и нескольких мессенджеров — смотрите подборку необычных и смешных приложений....
09 05 2025 7:18:26
Как вести успешную рекламную кампанию в Японии, не зная языка....
08 05 2025 1:16:36
Вам тоже нужно предоставлять отчеты о работе рекламной кампании, посещение сайтов? Держите три примера работы с Google ***ytics и понятных отчета по ним, которые можно продемонстрировать, не открывая доступ к аккаунту....
07 05 2025 12:25:35
Данные Google по 6 миллионам кликов 16 городах страны и данные Яндекс по 520 346 кликам, в 54 городах страны в 22 тематиках в обоих рекламных системах. Узнать больше!...
06 05 2025 10:35:47
Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...
05 05 2025 5:15:18
Как быстро увеличить количество заинтересованных подписчиков в facebook, twitter, google+ и linkedIn с помощью контактов из рассылки и аккаунтов Facebook....
04 05 2025 11:38:38
Профессиональная лексика SEO-специалистов в буржунете и в рунете формируется в одном поле: Google-то общий. Но когда специалисты Востока и Запада встречаются, им сложно понять друг друга. Это неудивительно, так как язык отражает само восприятие SEO. А под...
03 05 2025 20:31:49
Проверка структурированных данных поисковыми роботами нуждается в нашей поддержке...
02 05 2025 3:18:49
XML-фид представляет собой файл с кодом на языке XML, ссылку на который используют в различных сервисах...
01 05 2025 10:42:44
Эффективность продвинутой сегментации стала заметна уже в первый месяц ее функционирования....
30 04 2025 20:49:41
Пpaктика в режиме «рейтинг онлайн». Новинка Google Рекламы — отчет «Статистика аукционов»....
29 04 2025 19:18:56
Стоит ли торопиться с переходом на новый формат объявлений? Эксперимент PPC-специалистов агентства Netpeak....
28 04 2025 20:32:21
Пора принять решение! Разберитесь с регулярными выражениями для более продуктивной работы с Google ***ytics или Google Tag Manager...
27 04 2025 14:31:14
Каковы интересы вашей аудитории, как люди находят ваш контент. Рассказываем обо всех возможностях от Search Console Insights....
26 04 2025 6:50:39
Для максимальной прибыли с YouTube-канала нужно выбрать одну из наиболее посещаемых ниш. Не всегда прибыльная тема соответствует личным предпочтениям владельца канала...
25 04 2025 19:35:27
Пошаговый чек-лист и описание действий SEO-специалиста на всех этапах переноса сайта на новую CMS....
24 04 2025 7:36:10
Важно иметь прорывное мышление — о таком подходе к бизнесу написана книга Люка Уильмса «Переворот»....
23 04 2025 18:26:14
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::