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

Добавление тегов на стороне сервера – это новый способ инструментирования приложений на разных типах устройств при помощи 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 Аналитики: "Приложение и сайт", Universal Analytics и Measurement Protocol. В них есть все нужные возможности, позволяющие приступать к инструментированию приложений сразу после создания контейнера.

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

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

  1. простой сайт, на котором используется gtag.js для передачи событий click в серверный контейнер;
  2. клиент Google Аналитики типа "Приложение и сайт", куда поступают эти события;
  3. триггер, активирующийся при событиях click;
  4. тег Google Аналитики типа "Приложение и сайт", отправляющий данные о событиях на обработку в 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 Аналитики типа "Приложение и сайт"

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

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

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

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

Тег Google Аналитики типа "Приложение и сайт".

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

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

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

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

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

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