Global Tag Site — обзор фреймворка от Google

Global Tag Site (gtag.js) — фреймворк, в который добавляют фрагменты кода JavaScript. Он позволяет взаимодействовать с API различных инструментов от компании Google. Это альтернатива множества подключаемых на сайт кодов ресурсов Google. Например, у вас есть сайт и на нем установлены такие коды:

• код просмотров страниц;
• отслеживание событий;
• ECommerce;
• код отслеживания конверсий;
• код ремаркетинга.

Это большое количество отдельных кодов, каждый из которых выполняет свою задачу и отправляет соответствующую информацию в конечную систему мониторинга (Google Analytics, Google Ads и так далее). Global Tag Site реализует выполнение самых необходимых задач, возложенных на эти коды.

Почему только самых необходимых? Потому что у gtag.js ограниченный набор функций, предоставленных Google, и он никак не взаимодействует с другими (не гугловскими) сервисами, не может выполнять кастомные функции.

Работа с Google Analytics и Google Ads

С помощью gtag.js можно совместить несколько тегов продуктов Google в одном фрагменте кода: раньше это было несколько сниппетов кода, разбросанных по странице, а теперь — один компактный код.

Упрощается подключение новых продуктов Google: достаточно добавить одну или несколько строчек кода в фреймворк и всё готово.

Благодаря Global Tag Site можно отправлять собранные данные в несколько продуктов одновременно, не нужно создавать и настраивать отдельные теги для каждого продукта, как это делается в Google Tag Manager.

Если вы собрались настроить Google Analytics на вашем сайте, вам предложат установить такой код gtag.js:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-Y">
</script><script>  window.dataLayer = window.dataLayer || [];  
function gtag(){dataLayer.push(arguments);}  gtag('js', new Date()); 
 gtag('config', 'UA-XXXXXX-Y');</script>

Если захотите добавить сюда ещё код отслеживания рекламы Google Ads и Менеджера кампаний, фрагмент кода будет таким:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-Y">
</script><script>    window.dataLayer = window.dataLayer || [];   
 function gtag(){dataLayer.push(arguments);}    
gtag('js', new Date());    gtag('config', 'UA-XXXXXX-Y′);    
gtag('config', 'AW-XXXXXX′);    gtag('config',
 'DC-XXXXXX')</script>

Добавилось всего две строки. Команда «'config'»  применяется для инициализирования и настройки параметров для аккаунта конкретного продукта, то есть подключает соответствующую продукту библиотеку js. Команда работает для каждого из продуктов по-разному, детально прочитать о работе команды в определенном продукте Google можно в руководстве для этого продукта. Например, для аналитики «'config'» отправляет просмотр страницы в Google Analytics.

gtag.js работает без какого либо интерфейса. Это код, добавляемый непосредственно на страницы сайта и управляется он исключительно путем изменения кода JavaScript.

Для отправки событий в Google Analytics используем такой формат кода:

gtag('event', <action>, {  'event_category': <category>,  'event_label': <label>,  'value': <value>});

• <action> — имя события; строка, которая указывается в отчетах Google Аналитики как действие по событию;
• <category> — категория события;
• <label> — ярлык события;
• <value> — ценность события (выражается целым неотрицательным числом).

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

Например, если вы хотите отслеживать событие авторизации пользователя, достаточно такой строки:

gtag('event', 'login', { method : 'Google' });

Код активирует и отправляет событие 'login', которому по умолчанию присваивается категория «engagement» и ярлык «Google».

За и против Global Tag Site и Google Tag Manager

Сравнивая Global Tag Site с Google Tag Manager, выделю достоинства первого:

• маленький размер кода;
• удобство использования на небольших сайтах, где функционала Global Tag Site достаточно для выполнения всех задач;
• интегрированность всех систем от Google в одном коде.

При этом существует и ряд недостатков по сравнению с Google Tag Manager:

• нет интеграции с другими сервисами (не от Google);
• нет контроля версий;
• Global Tag Site нельзя протестировать на текущем сайте (разве что на тестовом домене) перед установкой;
• нет графического интерфейса пользователя;
• добавляется и обновляется на сайте каждый раз «ручным способом»;
• требует определенного знания JavaScript.

Global Tag Site и Google Tag Manager: что выбрать?

Исходя из преимуществ и недостатков, когда стоит использовать Global Tag Site, а когда Google Tag Manager? Очевидно, что Global Tag Site подходит, если:

• ваш сайт использует и в будущем будет использовать только сервисы от Google;
• вы не планируете запускать рекламу на Facebook, в LinkedIn и других сервисах, кроме платформ Google;
• у вас, вашего специалиста есть навыки работы с JavaScript.

Во всех других случаях рекомендую использовать Google Tag Manager. Даже если на текущий момент не планируете ничего более глобального, чем Google Analytics. Помните, проект может масштабироваться. И лучше заранее завести Google Tag Manager на сайте, чем настраивать его с нуля.

Да, вы можете оставить его на сайте и подключать другие системы через Google Tag Manager, но в таком случае с большей вероятностью вы запутаетесь в изобилии разных кусков кода на сайте, не подключенных к единой системе.