Библиотеки 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:
Истории бизнеса и полезные фишкиКомментарии:
Анализ данных о 7,6 миллионах поисковых запросов в французском Google...
26 04 2024 10:54:37
Case по продвижению в Instagram. В любой непонятной ситуации — масштабируйте рекламные инструменты...
25 04 2024 3:20:31
Исследование Ringostat о самых востребованных CRM-системах в США...
24 04 2024 14:45:51
Цель — трафик facebook. Делимся кейсом проекта «Мой город»....
23 04 2024 10:36:31
Сравним разные модели атрибуции с точки зрения оценки финансовых показателей проекта...
22 04 2024 4:24:10
Как и зачем мигрировать со старой на новую версию API на языке R. С пакета RAdwords на rgoogleads. Руководство от Алексея Селезнева. Читать дальше!...
21 04 2024 23:48:13
Как улучшить видимость сайта после оптимизаторов-староверов — кейс в тематике «световое и звуковое оборудование»....
20 04 2024 22:15:55
Gif для стрима. Пост пятничного веселья — гифки о буднях специалистов по контекстной рекламе....
19 04 2024 13:37:20
Нет новых идей для развития рекламной компании? Одобренные рекомендации по поисковому продвижению от экспертов: спикеров и участников 8P 2018...
18 04 2024 3:20:28
Проверяем, есть ли разница в ранжировании при наличии/отсутствии этих слов в метаданных. Эксперимент....
17 04 2024 14:27:48
Основные законы приняты. Что это значит?...
16 04 2024 14:30:27
Как METRO Cash & Carry Украина нашла индивидуальный подход к 1 000 000 клиентов....
15 04 2024 15:20:17
Совет Константина Леоновича (Sape.ru), 4 наших + 2 бонусных...
14 04 2024 9:49:29
Начинаем работать с облачным сервисом хранения Google BigQuery...
13 04 2024 19:30:37
Киев, Одесса, Харьков, Днепр и другие города — в офис и обратно IT-специалисты добираются от 10 минут до более чем полутора часа. В дороге они слушают музыку, подкасты, читают книги. Узнать больше!...
12 04 2024 17:31:19
Как добавить свою рекламу через поисковый сервис с картинками в Google....
11 04 2024 19:56:11
Инструменты интернет-маркетинга, которые вы не используете или используете не на сто процентов....
10 04 2024 18:23:12
Мануал для SEO-специалистов, как автоматизировать сбор данных из блока People also ask (Пользователи также ищут). Это блок, который показывается в верхней части страницы результатов поиска. Он нужен, чтобы уточнить запрос пользователя....
09 04 2024 16:16:53
Всё о вебхуках. Как настроить механизм получения уведомлений о событиях с помощью функций обратных вызовов....
08 04 2024 13:54:38
Как тратить на ставки меньше денег и почему вырастает цена за клик, а также о том, как ее сделать ниже. Плюс список факторов, которые влияют на ставку для первой страницы для ключевого слова...
07 04 2024 21:30:36
Какая интересная и трэшовая реклама встречалась в соцсетях в январе 2021-го? Давайте смотреть...
06 04 2024 6:43:17
Хотите видеть в отчетах точный ROMI в разрезе рекламных кампаний, групп объявлений и ключевых слов? Импортируйте себестоимость товаров в Google ***ytics...
05 04 2024 15:43:57
Повышение посещаемости на сайте: контент, seo, ppc и многое другое...
04 04 2024 23:35:55
Пpaктическая информация о том, что и куда нужно постить....
03 04 2024 11:26:31
Рекламные заголовки в гугл адвордс так и пестрят предложениями контекстной рекламы бесплатно — вы когда-нибудь задумывались о том, откуда берутся эти «подарки»?...
02 04 2024 12:10:53
Грамотный контент важен для всех, но особенно — для аутсорсов и стартапов в B2B. Если вы согласны с этим, давайте делать медиа....
01 04 2024 17:20:30
Прогнозирование с помощью «Планировщика ключевых слов»....
31 03 2024 19:28:47
Что делать, если нет четкой модели оценки эффективности контекстной рекламы?...
30 03 2024 0:31:10
Как найти индивидуальный подход к аудитории на каждом этапе воронки продаж? В этом вам поможет правильно составленная стратегия контекстной рекламы....
29 03 2024 5:33:57
Все успешные люди немного сомневаются в своих достижениях и рефлексируют о большом количестве ошибок. Не ок, когда сомнения затягивают и разрушают самооценку, создают постоянное напряжение. Давайте разбираться с синдромом самозванца....
28 03 2024 21:17:32
Дейли — ежедневный комaндный митинг, на котором комaнда синхронизируется по ключевым моментам работы и по текущим задачам. Делимся чек-листом агентства Netpeak по организации дейли на удалёнке....
27 03 2024 14:36:52
Бесплатный образовательный проект для предпринимателей Netpeak Cluster предлагает пять своих лучших вебинаров о нюансах онлайн-продвижения...
26 03 2024 18:56:58
Таблица общих для Google и Яндекс микроформатов инсайде...
25 03 2024 13:49:23
Триггер — способ ненавязчивого воздействия на потенциального клиента путем использования психологических приемов в текстах, заголовках и остальном контенте...
24 03 2024 3:51:48
Лучшие результаты в SEO дает заранее спланированное сотрудничество клиента с агентством на всех этапах работ с сайтом....
23 03 2024 3:21:38
Медиаплан для контекстной рекламы малого и среднего бизнеса — как составить медиаплан мечты для рекламных кампаний без ложного понимания, что автоматические сервисы могут корректно обработать сырые данные и выдать результат...
22 03 2024 16:54:16
Как научиться справляться со стрессом и находить в комaнду «тех самых» людей...
21 03 2024 13:15:41
Measurement Protocol — метод передачи данных о продажах или любых других взаимодействиях с покупателями на сервера Google ***ytics пpaктически из любого источника: внутренней CRM-системы, базы данных и даже платежного терминала...
20 03 2024 3:54:57
То, как вы читаете на мониторе или в смартфоне, значительно отличается от чтения книги или печатного журнала. Когда вы пишете текст для веба, очень важно знать об этой особенности....
19 03 2024 13:48:27
Узнаем расширенную информацию о посещениях сайта с помощью языка R — кейс Netpeak...
18 03 2024 7:14:38
Пользователи могут смотреть вирусные ролики без единого слова...
17 03 2024 22:37:54
Как специалисту с нуля обучиться контекстной рекламе и совмещать работу с хобби...
16 03 2024 20:39:55
Как вести успешную рекламную кампанию в Японии, не зная языка....
15 03 2024 11:16:40
Последствия удаленки на уровне крупного бизнеса. Как сотрудники и топ-менеджмент не могут договориться. Спopные вопросы, ответы на которые ещё предстоит найти. Узнать больше....
14 03 2024 23:21:43
Первая часть иллюстрированного руководства, в котором мы взяли 20 самых важных фактора ранжирования представлены с краткими иллюстрированными примерами. В этом тексте вы найдете первые 10. Узнать больше!...
13 03 2024 23:34:43
Результаты грамотного внедрения технического SEO-аудита...
12 03 2024 2:45:58
Анализ содержимого сайта показывает: Url разные, а контент страниц одинаковый. Думаете, ничего страшного? Но одинаковый контент может попасть под фильтры поисковых систем. Чтобы этого не произошло, надо знать, как избавляться от внутренних дублей...
11 03 2024 11:28:20
Примеры креативного авторского стиля копирайтеров, которые старались обыграть УТП продукта, услуги, стремились необычно подать обычное. Узнать больше!...
10 03 2024 19:40:40
Тестируем новый инструмент Яндекс.Директ — динамические объявления....
09 03 2024 18:13:51
Правильное продвижение сайта и нестандартные предложения по привлечению трафика...
08 03 2024 21:23:56
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::