Библиотеки 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:
Истории бизнеса и полезные фишкиКомментарии:
Инструкция с применением языка R. Полезно веб-аналитикам, которые работают с крупными интернет-магазинами. Например, на сайте еженедельно появляется примерно 1000 новых наименований и такое же количество позиций переходит в статус «нет в наличии»....
13 02 2025 13:10:27
Чтобы увеличить количество заявок и получить волну новых заказов, нужен комплексный подход...
12 02 2025 12:19:15
Чтобы проставить 301 редиректы, вначале надо выгрузить весь список топовых страниц по обратным ссылкам...
11 02 2025 0:38:13
Динамический ремаркетинг — один из самых эффективных способов продаж для любой группы товаров. В этой статье мы поделимся тонкостями технической подготовки к запуску динамического ремаркетинга в Facebook....
10 02 2025 19:43:21
О том, как сделать сайты интереснее и эффективнее. Гeймификация — применение игровых сценариев и элементов вне игровых контекстов. Это не про создание игр, это про поиск решений, которые помогут сделать любую работу интереснее. Читайте дальше!...
09 02 2025 22:19:40
Case по продвижению в Instagram. В любой непонятной ситуации — масштабируйте рекламные инструменты...
08 02 2025 12:25:44
Делимся полезным скриптом — он проверяет код ответа сервера для списка страниц, до 1000 за сутки....
07 02 2025 6:27:42
Попасть в топ 3 — ваш предел мечтаний? Почему и когда это не принесет ожидаемых результатов, плюс другие не актуальные убеждения о PPC. Узнать больше!...
06 02 2025 17:22:21
Последствия удаленки на уровне крупного бизнеса. Как сотрудники и топ-менеджмент не могут договориться. Спopные вопросы, ответы на которые ещё предстоит найти. Узнать больше....
05 02 2025 11:40:23
Баннерная реклама в фейсбуке. Обзор семи новых рекламных инструментов...
04 02 2025 3:26:51
Раскрутить телеграм-канал с нуля до тысячи — реально. Раскрываем пошаговый алгоритм и даем рекомендации для SMM-специалистов....
03 02 2025 17:22:52
Для защиты конфиденциальной информации в организации вводят режим коммерческой тайны. Подписание NDA важно не только с сотрудниками, но и со сторонними компаниями, имеющими доступ к конфиденциальной информации...
02 02 2025 13:43:53
Как провести крутую конференцию по интернет-маркетингу, сделать трaнcляцию этой конференции и вместо сухих репортажей подготовить полезный контент для СМИ. Узнать больше....
01 02 2025 21:32:42
Образец товарного фида можно использовать при запуске динамических объявлений в поисковой сети Яндекса и Google, в кампаниях со смарт-баннерами в Яндекс.Директ, в динамических медийных кампаниях Google Рекламы, в товарной рекламе — с помощью Google Merchant Center....
31 01 2025 9:40:25
О важных для разметки сайта тегах — alternate, hreflang, media, — и как их грамотно использовать при продвижении....
30 01 2025 5:17:44
Как построить html-карту. Верстка карт New York Times, IMDb и Daily Mail в качестве примера...
29 01 2025 22:59:40
Инструкция по технической подготовке к продвижению...
28 01 2025 4:25:56
Direct сделал подарок всем, кто уже давно хотел увеличить привлекательность своих объявлений — добавил возможность включения видеодополнений к текстово-графическим кампаниям. Как включить новую фишку от Директа и достаточно ли она эффективна?...
27 01 2025 20:34:43
Особенности продвижения в нише аренды автомобилей по материалам кейсов наших коллег...
26 01 2025 2:10:51
Как тратить на ставки меньше денег и почему вырастает цена за клик, а также о том, как ее сделать ниже. Плюс список факторов, которые влияют на ставку для первой страницы для ключевого слова...
25 01 2025 0:54:36
О построении персональных рекомендаций для интернет-магазина, используя технику со-визитов....
24 01 2025 21:13:43
4 кейса с шагами, рекомендациями и результатами, которые помогут грамотно распределить средства на рекламу....
23 01 2025 6:35:30
Рекламные заголовки в гугл адвордс так и пестрят предложениями контекстной рекламы бесплатно — вы когда-нибудь задумывались о том, откуда берутся эти «подарки»?...
22 01 2025 17:18:55
О чем стоит задуматься владельцам бизнеса и пользователям больших сайтов и почему Марку Цукербергу надо брать пример с телефонных сетей...
21 01 2025 9:54:16
Структура обзора, правила написания и важные хаpaктеристики этого формата. Подача информации в обзоре и запрещенные методы, которые отпугнут клиентов. Узнать больше!...
20 01 2025 22:43:26
Опыт контент студии WordFactory и 14 экспертов интернет-маркетинга....
19 01 2025 15:14:14
Понятный алгоритм анализа поисковых запросов с экономией времени на чистку по специальному шаблону модерации...
18 01 2025 9:28:16
Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...
17 01 2025 8:38:40
Сделать «на вчера», «внезапно», протестировать все варианты. Стоп! Остановитесь и выдохните. Be slow...
16 01 2025 5:11:53
Неля Серебро рассказывает про внутреннюю кухню блога Netpeak...
15 01 2025 3:53:13
Готовые коробочные решения — отличная идея, которая решает много задач, а ещё это относительно недорого. Но такой вариант подойдет далеко не всем. Узнать больше!...
14 01 2025 5:53:13
Десять вопросов, которые чаще всего задают люди, столкнувшиеся с необходимостью создания landing page....
13 01 2025 21:21:42
Информация для бизнесменов, интернет-маркетологов и всех, кто интересуется продвижением бизнеса в интернете....
12 01 2025 5:53:49
Достаточно настроить соответствующим способом триггеры и теги. Мануал здесь....
11 01 2025 20:35:58
Обычно SaaS-бизнесы начинают привлечение лидов с запуска рекламы на Facebook. Но наш опыт говорит о том, что это не самые подходящие каналы. Более высокие результаты можно получить на LinkedIn....
10 01 2025 22:47:37
Что такое【контекстная реклама】и как ее настроить? Подробный чек-лист ✅ в блоге Netpeak ⟁ ▷ 200 ступеней рекламной кампании в Google AdWords, Яндекс.Директ ⚡...
09 01 2025 4:48:57
Результаты, которых мы достигли за 2 месяца работы....
08 01 2025 5:31:33
Как посты и ролики Reels становятся первыми в ленте, сториз, попадают в рекомендации. Instagram впервые напрямую рассказали о том, как оценивают контент....
07 01 2025 5:54:56
Метод не для всех, но увлеченным веб-аналитикой точно понравится!...
06 01 2025 3:16:10
Система индексирования страниц — как поисковик и его роботы разбирают перечень контента по полочкам...
05 01 2025 11:46:47
Правильная внутренняя перелинковка необходима, чтобы страницы не вылетали из индекса, а также чтобы увеличить ссылочный вес продвигаемых страниц...
04 01 2025 0:23:28
Стоит ли подключать автоматические стратегии управления ставками? Мы проверили, как работает «Целевая цена за конверсию» в разных тематиках....
03 01 2025 16:30:25
Нам удалось увеличить количество органических показов на 63% и установок на 25%....
02 01 2025 17:23:37
Перво-наперво для мониторинга ошибок SEO-специалист открывает вебмастерку с подсказками Google — она же панель вебмастеров, она же Google Search Console...
01 01 2025 19:23:39
Менеджер, маркетолог, дизайнер программист? Делимся секретами нетпик, каким должен быть специалист по рекламе...
31 12 2024 15:22:12
Мы уже писали о Google Shopping, в каких странах он доступен и как его настроить. В этом посте я покажу один из способов создания и загрузки фида данных. Это важный этап подготовки к запуску Google Shopping...
30 12 2024 17:38:23
Лайфхаки, как упростить работу с соцсетями от специалиста агентства Netpeak и ежедневной работы SMM-специалиста. Телеграм-боты, которые облегчат рутину и сэкономят время. Узнать больше!...
29 12 2024 7:11:56
Зачем амбициозным онлайн-проектам индивидуальные инструменты веб-аналитики....
28 12 2024 22:42:14
3D принтер — заработок миллионеров будущего! Тех, кто сейчас смог купить и начал заниматься ими или использует их в бизнесе, ждет объемный успех через каких-нибудь 3-5 лет....
27 12 2024 5:22:47
Ссылки нужно не только наращивать, но и постоянно посещать и мониторить качество уже существующих....
26 12 2024 23:17:57
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::