Как интегрировать тег Google в систему управления контентом или конструктор сайтов

Тег Google (gtag.js) – это фрагмент кода, который можно добавить на сайт, чтобы отслеживать действия пользователей. Этот тег поддерживает самые разные сервисы Google, например Google Аналитику 4, Google Рекламу и Google Платформу для маркетинга. Подробнее о теге Google…

В этом руководстве описано, как интегрировать тег Google в собственную систему управления контентом (CMS) или конструктор сайтов, чтобы у конечных пользователей был доступ к сервисам Google для отслеживания.

Аудитория

Это руководство создано для владельцев систем управления контентом (CMS) или конструкторов сайтов, то есть для тех, кто хочет добавить в свои системы сервисы отслеживания Google. Оно не предназначено для конечных пользователей этих систем.

Подготовка

Убедитесь в том, что у вас есть идентификатор разработчика тега Google. Если у вас его нет, заполните форму запроса. Идентификатор разработчика – это не идентификатор отслеживания и не идентификатор конверсии, который конечные пользователи добавляют в код отслеживания на сайте.

Обзор

Чтобы интегрировать свою платформу с продуктами Google, выполните следующие действия:

  1. Создайте интеграцию с тегом Google
  2. Обновите структуру ввода данных пользователем
  3. Реализуйте Consent API
  4. Настройте данные о событиях
  5. Проверьте обновленную интеграцию
  6. Обновите инструкции по реализации для пользователей

Создайте интеграцию с тегом Google

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

Чтобы создать интеграцию с тегом Google, замените существующий фрагмент кода на приведенный ниже. Убедитесь, что пользователи могут заменить TAG_ID на собственный идентификатор тега.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

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

Обратите внимание:

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

Обновите структуру ввода данных пользователем

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

Ниже приведен пример поля для ввода идентификатора тега Google. Интеграция должна быть обозначена как развертывание тега Google. Ее можно описать как метод развертывания Google Рекламы и Google Аналитики.

Изображение поля для ввода идентификатора тега Google

Ниже показано, как можно создать разные пути для пользователей Google Рекламы и Аналитики. Каждый путь в итоге будет приводить к одному и тому же интерфейсу для ввода идентификатора тега.

Изображение: пути для пользователей Google Рекламы и Аналитики, которые приводят к общему интерфейсу ввода идентификатора

Поле для ввода должно поддерживать разные варианты идентификаторов с помощью регулярного выражения [A-Z]{1,3}\w{5,}[\w]*.

В теге Google есть встроенный Consent API для управления согласием пользователей. Он позволяет различать согласие на применение файлов cookie в рекламных целях и в целях аналитики.

От вас требуется интегрировать как минимум вызов gtag('consent', 'update' {...}), не требующий никаких действий со стороны клиента. Таким образом теги Google (Google Реклама, Floodlight, Google Аналитика и тег связывания конверсий) смогут получать самые новые статусы согласия и добавлять эту информацию в запросы, которые сеть отправляет в Google. При этом используется параметр &gcs.

Дополнительно можно реализовать статус gtag('consent', default' {...}) (или помочь рекламодателям сделать это – например, через интерфейс) и разблокировать теги Google (например, для срабатывания по условию без учета согласия), чтобы режим согласия мог активировать их в ограниченном режиме.

Подробные инструкции по реализации вы можете найти в статье Управление настройками согласия для сайтов.

Настройте данные о событиях

Отправляйте расширенные данные о событиях с сайта клиента в его аккаунт Google без какого-либо участия самого клиента. Например, вы можете добавить события на пути к покупке (такие как add_to_cart, begin_checkout, add_payment_info, add_shipping_info и purchase), лидогенерации или регистрации.

Рекомендации по добавлению событий:

  • Регистрируйте все, что можно.
  • Настройте как минимум 8 основных событий.
  • Отдавайте приоритет событиям электронной торговли.

Регистрируйте все, что можно

По возможности настройте события по умолчанию. Примеры:

  • События-конверсии, такие как purchase или sign_up.
  • События, которые происходят перед событиями-конверсиями, например add_to_cart.
  • Поведение пользователей, например взаимодействия с мультимедиа (это поможет вашим клиентам проанализировать вовлеченность пользователей).

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

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

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

Например, с помощью команды event можно отправить событие login (вход в аккаунт) с параметром method (способ), имеющим значение "Google":

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});

<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

Обратите внимание:

  • Ваш идентификатор разработчика <developer ID> уникален и используется только для вашей платформы. Указывайте идентификатор для каждого события.
  • Следующие параметры использовать не обязательно:
    • 'value' – числовое значение конверсии (например, цена покупки).
    • 'currency' – трехбуквенный код валюты, удобный для тех, кто принимает оплату в разных валютах.
    • 'transaction_id' – уникальный идентификатор транзакции (например, заказа), который используется для дедупликации.
  • Некоторые параметры не обязательны, но мы рекомендуем вам добавлять максимум информации о каждом событии.
    • Параметры позволяют получать дополнительную информацию о действиях пользователей на вашем сайте или в приложении. Например, когда потенциальный покупатель просматривает страницу товара, вы можете собирать параметры, описывающие этот товар, например его название, категорию и цену.
    • Некоторые параметры автоматически заполняют готовые параметры и показатели в Google Аналитике, помогая анализировать поведение пользователей.

Если вы хотите отслеживать события-конверсии на основе кликов (например, нажатий кнопок или динамических ответов для сайта при использовании AJAX), вы можете также использовать следующий код:

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

Настройте как минимум 8 основных событий

Мы рекомендуем вам настроить ряд основных событий, наиболее ценных для владельцев сайта. Вот минимальный список:

  • view_item_list – когда пользователь просматривает список элементов (например, товаров). Подробнее…

    gtag('event', 'view_item_list', {
  item_list_id: "related_products",
  item_list_name: "Related products",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Item",
    currency: "USD",
    discount: 2.22,
    price: 99.9,
    quantity: 1
  }]
});

  • add_to_cart – когда пользователь добавляет в корзину один или несколько товаров. Подробнее…

    gtag('event', 'add_to_cart', {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: ‘USD’,
    quantity: 1,
    item_category: "All Products"
  }]
});

  • begin_checkout – когда пользователь переходит к оформлению покупки. Подробнее…

    gtag('event', 'begin_checkout') {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: ‘USD’,
    quantity: 1,
    item_category: "All Products"
  }]
});

  • purchase – когда пользователь приобретает товары или услуги. Подробнее…

    gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});

  • sign_up – когда пользователь регистрируется. Таким образом конечный пользователь может увидеть, какие способы регистрации наиболее популярны (например, аккаунт Google или адрес электронной почты). Подробнее…

    gtag('event', 'sign_up', {method: 'web'});

  • generate_lead – когда пользователь отправляет заполненную форму. Подробнее…

    gtag('event', 'generate_lead', {value: XX, currency: 'USD'});

  • subscribe – когда пользователь подписывается на сервис или рассылку.

    gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});

  • book_appointment – когда пользователь записывается на встречу.

    gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});

Рекомендации

Google поддерживает намного больше событий и параметров, в частности для электронной торговли. Рекомендуем вам регистрировать следующие данные:

  • Все успешные события, связанные с ценностью.
  • Успешные события, которые связаны с основными конверсиями (add_to_cart, sign_up, и т. п.).
  • Взаимодействия с конечными пользователями.

Ознакомьтесь также с дополнительными ресурсами на тему сбора данных о событиях:

Мы заинтересованы в расширении этой схемы. Если у вас есть предложения, напишите нам.

Проверьте обновленную интеграцию

Прежде чем окончательно реализовать изменения, проверьте совместимость:

  • с тегом Google для цели Google Аналитики 4;
  • с тегом Google для ремаркетинга и отслеживания конверсий.

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

  • Google Tag Assistant. Этот инструмент позволяет узнать, какие теги Google были активированы и в каком порядке. В режиме отладки Tag Assistant вы можете изучать, какая информация передается на уровень данных и какие события инициировали этот процесс.
  • Инструменты разработчика в Chrome. На вкладке Сеть вы можете отфильтровать запросы по слову google и посмотреть, как именно отправляются данные.
  • Отчет Google Аналитики в реальном времени (на стороне сервера). Создайте бесплатный аккаунт Google Аналитики и воспользуйтесь отчетом В реальном времени, чтобы узнать, получили ли серверы Google обращения с активацией тега.

Если у вас возникла неполадка или вы не можете найти какую-либо информацию,, обратитесь в службу поддержки.

Если это возможно, предоставьте специалистам Google тестовый доступ для проверки.

Обновите инструкции по реализации для пользователей

Обновите документацию, чтобы у пользователей были понятные инструкции по реализации сервисов Google для отслеживания. Когда документация будет готова, отправьте ее на проверку. Наши специалисты подскажут вам, что можно улучшить.