gtag.js: руководство для разработчиков

Тег Global Site Tag (gtag.js) – это фреймворк для добавления тегов и API, с помощью которого можно передавать данные о событиях в AdWords, Google Analytics и DoubleClick. Чтобы не управлять несколькими тегами для разных продуктов, можно использовать gtag.js и благодаря этому быстрее применять новые функции отслеживания и выполнять интеграцию между сервисами.

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

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

Если вы используете Диспетчер тегов Google, можете продолжать без добавления кода gtag.js на свой сайт. Однако gtag.js и Диспетчер тегов Google будут существовать параллельно и в случае применения на одной странице будут работать корректно.

Об этом руководстве

Это руководство поможет вам начать использовать gtag.js для часто выполняемых задач в AdWords, DoubleClick и Google Analytics. В частности, в нем рассматриваются:

  • базовая настройка AdWords, DoubleClick и Google Analytics;
  • отправка данных о событиях.

Однако использование gtag.js во многом зависит от продуктов и конкретных данных, которые требуется получить. Документация и примеры использования для определенных продуктов:

Как использовать gtag.js

Независимо от того, хотите ли вы передать данные в AdWords, DoubleClick или Google Analytics, порядок действий при использовании gtag.js следующий:

  1. Добавьте тег Global Site Tag на все страницы сайта и настройте его на работу с Google Analytics, AdWords и/или DoubleClick. О том, как добавить тег Global Site Tag, читайте ниже.
  2. Используйте команды gtag(), чтобы сохранять данные о событиях и отправлять их в один или несколько продуктов (Google Analytics, AdWords, DoubleClick). О том, как использовать команды gtag() для настройки и отправки данных, читайте ниже.

Добавление тега Global Site Tag

Тег Global Site Tag должен присутствовать вверху каждой страницы сайта и стоять перед командами gtag(). В противном случае команды gtag() не смогут передавать данные.

Если вы хотите передавать данные только в один продукт, воспользуйтесь руководством для конкретного продукта (Google Analytics, AdWords или DoubleClick). Чтобы создать свой фрагмент кода, выберите соответствующий фрагмент ниже, скопируйте его и вставьте после тега <head> на все страницы сайта. Достаточно разместить на странице только один тег Global Site Tag.

Если вы хотите передавать данные в разные продукты, читайте ниже раздел Добавление другого продукта или аккаунта в тег Global Site Tag.

Google Analytics

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

  gtag('config', 'GA_TRACKING_ID');
</script>

Чтобы найти идентификатор GA_TRACKING_ID:

  1. Войдите в свой аккаунт Google Analytics и нажмите Администратор.
  2. В раскрывающемся меню в столбце АККАУНТ выберите нужный аккаунт.
  3. В меню РЕСУРС выберите нужный ресурс.
  4. В разделе РЕСУРС выберите Отслеживание > Код отслеживания.

В верхней части страницы вы увидите идентификатор отслеживания и номер ресурса.

AdWords

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

  gtag('config', 'AW-GOOGLE_CONVERSION_ID');
</script>

Чтобы найти идентификатор AW-GOOGLE_CONVERSION_ID:

  1. Войдите в свою учетную запись AdWords и откройте Инструменты > Конверсии > Действия-конверсии.
  2. В столбце Название выберите нужное действие-конверсию.
  3. В окне кода найдите значение переменной google_conversion_id.

Добавление другого продукта или аккаунта в тег

Global Site Tag

После добавления кода gtag.js для какого-либо продукта можно настроить его на работу с дополнительными продуктами, просто добавив дополнительные команды настройки.

Вот пример тега Global Site Tag для Google Analytics, где внизу добавлена команда для аккаунта AdWords.

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345-6">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'UA-12345-6');
  gtag('config', 'AW-123456789');
</script>

Обратите внимание, что в первой строке кода gtag.js указан URL в атрибуте src:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345-6">

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

Примеры добавления нескольких продуктов и аккаунтов в тег Global Site Tag можно найти в Руководстве по маршрутизации.

Использование команды gtag() для настройки и отправки данных

Команды gtag() можно вызывать в любом месте страницы после тега Global Site Tag. Можно использовать три команды: config, set и event.

config

Используйте команду config, чтобы инициализировать и настроить параметры аккаунта конкретного продукта. Команда config имеет следующий формат:

gtag('config', '<target_ID>', {<additional_config_info>});

Такая строка в теге Global Site Tag для Google Analytics выполняет два действия:

Здесь <target_ID> – это идентификатор аккаунта продукта, в которой вы хотите отправлять данные, а  – необязательный объект, в котором можно задать дополнительные параметры конфигурации.

В зависимости от продукта, указанного в target_ID, команда config может выполняться по-разному. Например, когда команда config вызывается с идентификатором конверсии AdWords, она инициирует запрос на ремаркетинг и копирует идентификаторы клика в собственные файлы cookie. Когда команда config вызывается с идентификатором Google Analytics, она инициирует трекер Google Analytics, который будет использовать последующие команды event на странице, а затем автоматически сообщит о просмотре страницы определенному ресурсу Google Analytics.

Вы можете изменить и расширить действие команды config, указав параметры в дополнительном объекте <additional_config_info>. Например, если добавить следующий параметр, информация о просмотре страниц не будет автоматически отправляться в Google Analytics.

gtag('config', 'UA-12345-6', {'send_page_view': false});

set

Команда set позволяет задавать значение, которое будет автоматически связано со всем последующими событиями на странице. Например, если во всех транзакциях на сайте используется одинаковая валюта, задайте значение поля валюты с помощью команды set, указав ее после тега Global Site Tag.

gtag('set', {'currency': 'USD'});

В одной команде set можно задать несколько атрибутов.

gtag('set', {
  'country': 'US',
  'currency': 'USD'
});

event

Команда event позволяет указать, как передавать данные о событиях. Например, отправить событие-конверсию с параметрами currency и value можно следующим образом:

gtag('event', 'conversion', {
  'value': 1.0,
  'currency': 'USD'
});

Существует ряд рекомендуемых событий и параметров, которые могут оказаться полезными в определенных контекстах. Например, событие page_view отправляет соответствующее обращение в Google Analytics. Подробнее о рекомендуемых событиях и параметрах см. в Справке по событиям.

Можно указывать собственные названия для событий при условии, что эти названия не используются для рекомендуемых событий. Такие события называются пользовательскими.