Библиотеки 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:
Истории бизнеса и полезные фишкиКомментарии:
Повышение посещаемости на сайте: контент, seo, ppc и многое другое...
21 09 2023 18:54:55
Мы предложили фанам бренда прокатиться на автомобиле SEAT Altea Freetrack!...
20 09 2023 0:35:17
Какие шрифты бывают, для чего они предназначены, где найти самый подходящий шрифт и как его правильно использовать?...
19 09 2023 14:37:15
Интересные факты про Google Рекламу перевел Сергeй Бахарь для читателей нашего блога....
18 09 2023 14:16:30
Стоит ли платить за рекламную кампанию «Медийно-контекстный баннер на поиске»?...
17 09 2023 18:52:27
Мануал для SEO-специалистов, как автоматизировать сбор данных из блока People also ask (Пользователи также ищут). Это блок, который показывается в верхней части страницы результатов поиска. Он нужен, чтобы уточнить запрос пользователя....
16 09 2023 21:13:37
Чтобы проставить 301 редиректы, вначале надо выгрузить весь список топовых страниц по обратным ссылкам...
15 09 2023 22:43:15
Подробно о преимуществах и особенностях двух сервисов контекстной рекламы....
14 09 2023 1:52:40
Стандартный образец для новичков. Форматы объявлений в РСЯ, чтобы начинающие специалисты по контекстной рекламе смогли быстро и эффективно запустить рекламные кампании. Интересно? Читайте дальше!...
13 09 2023 0:18:14
Что такое обратная связь, почему фидбек от клиентов важен и как его правильно собирать. Все, что нужно знать, чтобы получить отзыв от клиента....
12 09 2023 6:21:26
Как не облажаться при выборе подрядчика для SEO-аудита....
11 09 2023 9:31:58
Распространенные ошибки продвижения B2B-компаний + стратегии того, как наращивать число активных подписчиков и потенциальных клиентов....
10 09 2023 7:12:32
Пока вы не осознаете причины, почему вам выгодно не хвалить, забудьте про качественную обратную связь и максимальную включенность комaнды. Фишки управления собой, людьми и проектами....
09 09 2023 23:33:44
SEO-специалисты в Киеве получают в два раза больше, чем жители других городов Украины. Middle лидирует среди должностей как PPC, так и SEO-специалистов. Самая высокооплачиваемая должность — Head of PPC $1900. Узнать больше!...
08 09 2023 5:26:46
Психологический бестселлер. Как достичь гармонии во всех делах и начать получать удовольствие от жизни, — об этом читайте в новой рецензии Константина Рябенко на книгу Михая Чиксентмихайи «Поток»....
07 09 2023 12:27:54
Подборка корпоративных медиа, попав на страницы которых, не хочется их покидать....
06 09 2023 23:38:28
Признаки того, что магазин находится под фильтром и шаги по выводу из него...
05 09 2023 17:10:13
Начинали с SEO на этапе разработки нового сайта. Узнать больше!...
04 09 2023 4:58:13
160 символов — размер рекламного сообщения, 2 млн евро — минимальный бюджет для запуска. Уже интересно?...
03 09 2023 19:26:11
Увольнять сотрудника — это неприятно и порой сложно. Прежде надо убедиться, что такой шаг оправдан, но он же потребует от руководителя понимания, как действовать в подобной ситуации. На этом и остановимся...
02 09 2023 16:21:52
Агентство интернет-маркетинга Netpeak вышла на новые рекламные горизонты и приобрело 51% доли болгарской компании Optimization.bg....
01 09 2023 0:57:41
Менеджер, маркетолог, дизайнер программист? Делимся секретами нетпик, каким должен быть специалист по рекламе...
31 08 2023 1:11:21
Брендовые или витальные запросы содержат только название компании или бренда, без дополнительных уточнений...
30 08 2023 15:27:13
О создании структуры сайта на основе семантического ядра, работе с Xmind и таблицами онлайн...
29 08 2023 0:35:19
Сергeй Бахарь неустанно исследует Google Рекламу и рассказывает о новинках нашим читателям....
28 08 2023 20:41:18
Руководитель отдела HR, Ольга Пачесная, написала пост о главном — людях, которые выбрали работу в Netpeak....
27 08 2023 5:12:24
Слорварь сленга, без которого к 25-летним не подходи...
26 08 2023 10:46:31
Рекомендации и мнения экспертов по одной из самых противоречивых тем украинского интернет-прострaнcтва....
25 08 2023 17:20:37
Какие типы звонков отслеживаются? Есть ли интеграция с Google ***ytics? Существуют ли в выбранном сервисе или на платформе инструменты интеграции с другими системами? Больше вопросов и ответов на них — в статье....
24 08 2023 7:25:42
И помните: плохих названий нет, если у вас есть большие деньги....
23 08 2023 1:56:56
Настройка аналитики для пустого поиска, а также поиска по методам GET и POST...
22 08 2023 22:42:34
89% предпринимателей не тестируют свои продающие тексты. О том, что и как нужно тестировать, рассказал в гостевом посте директор Студии эффективных текстов Владимир Руков....
21 08 2023 22:54:49
Платные и бесплатные способы ускорить оптимизацию....
20 08 2023 16:47:41
Проверьте свою логику, находчивость и креативность...
19 08 2023 13:21:44
Проверка структурированных данных поисковыми роботами нуждается в нашей поддержке...
18 08 2023 13:17:59
Альтернатива классическому SQL — обработка запросов из множества таблиц с помощью функций подстановки в Google BigQuery....
17 08 2023 19:19:32
Кейс: SEO для сайта эpoтического массажа — ROMI 980% за 10 месяцев...
16 08 2023 9:19:41
Визуализация данных для новичков. Отвечаем на вопрос читателя....
15 08 2023 23:44:48
Как украинский бизнес использует Черную пятницу, чтобы увеличить продажи и привлечь клиентов. Одежда, детские товары, курсы английского языка, экзотические фрукты, постельное белье, посуда, бытовая техника, SMM-агентство и многое другое...
14 08 2023 17:59:26
Недавно у меня закончилась видеокампания на ютуб, по которой удалось собрать исследование Brand Lift. Хочу поделиться инсайтами...
13 08 2023 14:12:30
Данные по 42,5 млн кликов в 25 тематиках и 391 городу...
12 08 2023 22:19:59
Лайфхаки, как упростить работу с соцсетями от специалиста агентства Netpeak и ежедневной работы SMM-специалиста. Телеграм-боты, которые облегчат рутину и сэкономят время. Узнать больше!...
11 08 2023 10:20:38
Рассказываем, как комaнда Netpeak работала над ростом органики и повышением видимости приоритетных страниц сайта по релевантной семантике....
10 08 2023 20:33:58
Как мы с помощью Call Tracking узнали настоящую рентабельность контекстной рекламы для магазина мебели...
09 08 2023 12:43:56
Значит так, делаем из лимонов лимонад — «выжимаем» максимум из ошибки 404...
08 08 2023 23:33:56
Если вы автор телеграм-канала, то стоит задуматься об альтернативных контент-платформах. Мнение...
07 08 2023 13:58:42
Определение сайта нового типа. Захочет ли бизнес интернета перевести свои веб-приложения на более прогрессивные рельсы?...
06 08 2023 2:59:34
Попасть в топ 3 — ваш предел мечтаний? Почему и когда это не принесет ожидаемых результатов, плюс другие не актуальные убеждения о PPC. Узнать больше!...
05 08 2023 23:25:31
Реклама Facebook для вовлечения пользователей помогает привлечь внимание к приложению и удержать пользователей в условиях перенасыщенного рынка....
04 08 2023 13:35:22
Эффективность рекламы в поиске падает, но растут YouTube, контекстно-медийная сеть и другие платформы...
03 08 2023 19:24:18
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::