Примечание. Этот сайт для разработчиков будет перенесен на новый адрес developers.google.com/tag-platform к 30 сентября 2021 г.

Обзор добавления тегов на стороне сервера

Добавление тегов на стороне сервера – это новый способ инструментирования приложений на разных типах устройств при помощи Google Менеджера тегов. Для этого используются серверные контейнеры, которые работают на основе стандартной модели "тег-триггер-переменная" и дают новые возможности отслеживания действий пользователей.

В обычной, не серверной, конфигурации тегов используется контейнер, расположенный на странице. Он отправляет статистику на серверы, собирающие данные. На рис. 1 показано, как веб-контейнер Менеджера тегов, работающий в браузере, передает информацию сразу на несколько серверов.

Схема работы сайта, инструментированного с помощью веб-контейнера Google Менеджера тегов

Рис. 1. Схема работы сайта, инструментированного с помощью веб-контейнера Google Менеджера тегов

Серверный контейнер, наоборот, выполняется не на стороне пользователя (то есть не в браузере или телефоне), а на сервере, который контролируете вы.

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

Рис. 2. Схема добавления тегов с помощью серверного контейнера

Работу этого сервера обеспечивает ваш собственный проект Google Cloud Platform. Данные на сервере доступны только вам и передаются в другие сервисы исключительно с вашего разрешения. Вы полностью контролируете конфигурацию этих данных и их пересылку с сервера. Теги конструируются с помощью технологии JavaScript в изолированной среде. Вы сами настраиваете разрешения, определяющие возможности тега, и правила, устанавливающие границы контейнера.

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

При этом возникает два важных вопроса:

  • Как статистика поступает с устройства пользователя в серверный контейнер?
  • Как статистика, полученная серверным контейнером, преобразуется в событие?

Чтобы решить эти задачи, мы добавили в серверные контейнеры новый объект – так называемый клиент.

Принцип работы клиентов

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

Чтобы лучше понять принцип работы клиентов, рассмотрим каждый этап отдельно. На рис. 3 показано, как происходит передача данных из пользовательского браузера и с вашего веб-сервера в серверный контейнер.

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

Рис. 3. Каждый поток данных обрабатывается отдельным клиентом

Клиенты получают статистику с устройств. Допустим, вам нужно отслеживать действия пользователей на трех ресурсах: сайт, приложение для смартфонов и умный тостер. На сайте вы используете Google Аналитику, в приложении – Firebase Analytics, а в тостере – проприетарный протокол ToastMeasure.

Раньше для инструментирования этих трех платформ понадобилось бы три разных контейнера Google Менеджера тегов. Однако серверный контейнер работает не на самом устройстве. Поэтому для инструментирования трех разных платформ достаточно одного контейнера. Но тут возникает проблема: эти три типа устройств используют разные механизмы передачи данных. Например, Google Аналитика и ToastMeasure заметно отличаются между собой. Вот тут нам и пригодятся клиенты.

Вместо трех разных контейнеров в нашей конфигурации используется один серверный контейнер – но с тремя клиентами разной приоритетности. Каждый запрос к контейнеру по очереди обрабатывают эти клиенты, начиная с самого приоритетного. Сначала клиент определяет, может ли он обработать этот тип запроса. Если да, он принимает запрос, чтобы остальные клиенты не запускались, и приступает к следующему этапу обработки. А если клиент не способен обработать этот запрос, запускается следующий клиент и процедура повторяется сначала.

Клиенты преобразуют данные запросов в события. Когда клиент – например, ToastMeasure – принимает запрос, то в первую очередь преобразует его в такой формат, который смогут анализировать остальные составляющие контейнера. А именно – в набор событий.

События – это происшествия, которые вы хотите отслеживать. Это может быть что угодно: начало и конец приготовления тоста (start_toasting, finish_toasting), покупка хлеба (buy_bread) и т. д. Единственное требование к структуре событий, генерируемых клиентом, – чтобы остальные составляющие контейнера могли их анализировать. Но есть ряд рекомендаций, которые могут облегчить вам работу.

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

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

Значительную часть работы автоматически выполняет Менеджер тегов. В серверных контейнерах предусмотрены три клиента: Google Аналитика 4, Google Аналитика: Universal Analytics и Measurement Protocol. В них есть все возможности, позволяющие приступать к инструментированию приложений сразу после создания контейнера.

Краткий пример

Давайте посмотрим, как все эти компоненты взаимодействуют между собой на практике. Допустим, нам нужно создать:

  1. простой сайт, на котором используется gtag.js для передачи событий click в серверный контейнер;
  2. клиент Google Аналитики 4, который получает событие;
  3. триггер, активирующийся при событиях click;
  4. тег Google Аналитики 4, который отправляет данные о событиях на обработку в Google Аналитику.

Предположим, что серверный контейнер уже создан и развернут. Вот как мы будем действовать дальше.

Настройка gtag.js

Сначала настроим тег gtag.js, чтобы он начал отправлять данные в серверный контейнер. В этом случае информация будет передаваться в контейнер по тому же принципу, что и в Google Аналитику, но с одним отличием: в параметре transport_url нужно указать путь к серверному контейнеру, как в примере ниже.

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

  gtag('config', 'G-EXAMPLE', {
    transport_url: 'https://analytics.example.com',
  });
</script>

Далее добавим функцию sendEvent(), которая будет обрабатывать события click:

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

  gtag('config', 'G-EXAMPLE', {
    transport_url: 'https://analytics.example.com',
  });

  function sendEvent() {
    gtag('event', 'click');
  }
</script>

<button onclick="javascript:sendEvent()">Send Event</button>

В такой конфигурации обработчики событий (в данном случае – функция sendEvent()) будут отправлять события click в серверный контейнер.

Клиент Google Аналитики 4

Чтобы принимать события, поступающие на сервер, в контейнере должен быть клиент. В серверных контейнерах он уже есть – это клиент Google Аналитики 4.

Триггер для кликов

Далее нужно создать триггер, который будут активировать события click. Для этого добавим Пользовательский триггер и настроим его так, чтобы он запускался, когда встроенная переменная Название события будет принимать значение "клик".

Настройка триггера

Тег Google Аналитики 4

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

Предварительный просмотр контейнера

Итак, наш контейнер настроен. Теперь нажмите Предварительный просмотр и откройте свой сайт в новом окне браузера. В серверный контейнер начнут поступать запросы и события. Их список будет отображаться слева на странице предпросмотра.

Если все работает правильно, контейнер можно публиковать.

Перевод сервера в рабочий режим для использования в собственном домене

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