Отправка данных из веб-контейнера Google Tag Manager в серверный контейнер

В этой статье я хочу показать вам, как использовать Data Tag. Этот пользовательский тег отправляет параметры из Google Tag Manager Web Container в Server Container. При использовании с Data Client для серверного контейнера Google Tag Manager, он позволяет отправлять переменные уровня данных, пользовательские параметры и другие данные из веба в серверный контейнер. В результате Data Client извлекает информацию из Data Tag в Google Tag Manager Server Events.

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

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

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

Вся информация будет храниться на вашем сервере. Data Tag и Data Client позволят хранить, формировать и извлекать данные из веб-контейнера и использовать их для установки тегов на стороне сервера. Data Tag и Data Client внутри серверного контейнера будут формировать и направлять данные по назначению с помощью тегов.

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

Имя события. У вас есть две возможности: выбрать стандартное событие из выпадающего меню или отправить пользовательское событие. Используя пользовательское событие, вы можете добавить переменную {{event}}, и в этом случае Data Tag будет отправлять все события, которые вы видите в режиме предварительного просмотра.

Домен GTM Server Side - обязательное поле. Вы можете найти его в настройках серверного контейнера Google Tag Manager в разделе Tagging server URL. Data Tag будет использовать этот домен для отправки запросов. 

Вы можете выбрать отправку всех значений слоя данных в серверный контейнер, включив опцию Send all from Data Layer.

Если вы включите опцию Send common data, Data Tag будет отправлять page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution, viewport_size.

На вкладке event data вы можете добавить пользовательский параметр события, который вы хотите отправить в серверный контейнер. Вы можете выбрать любую переменную менеджера веб-тегов или тип статического значения или текста в полях Name и Value. Также есть возможность модифицировать значения с помощью функций Trim, To lower case или Hash. Вы также можете хранить переменные.

С помощью User Data можно отправлять пользовательские параметры. Вам нужно выбрать имя параметра из выпадающего меню, добавить статическое значение или использовать переменную. Также есть возможность преобразовать значение с помощью обрезки, преобразования в нижний регистр, хэш-функции и сохранения. Вы можете использовать эти поля для отправки данных пользователя на server Facebook tag, чтобы увеличить сопоставление событий для вашего Facebook CAPI. Если вы используете наш Data Tag, Data Client и Facebook CAPI, то тег Facebook будет автоматически получать данные пользователя из Data Tag.

В разделе Настройки вы можете изменить тип запроса (по умолчанию тип запроса POST, измените его на GET), путь и версию протокола.

Расширенные настройки - это стандартные настройки, которые есть во всех веб-тегах Google Tag Manager.

На данный момент существует два способа отправки данных из веб в серверный контейнер: использование GA4 tag и Data Tag/Data Client.

Data Tag/Data Client имеет несколько преимуществ перед GA4:

1. Тег Data может отправлять массивы данных. Для сравнения, тег GA4 может отправлять только переменные и возвращает ошибку, если вы пытаетесь отправить массив. 

2. С помощью тега Data Tag/Data Client вы можете отправлять всю информацию от слоя веб-данных до данных событий внутри Server container. В то время как в GA4 вам придется отправлять каждую переменную вручную. 

3. Если вы хотите хранить пользовательские данные в переменных GTM, то используйте Data Tag. Например, его можно использовать, когда в orm submits доступны данные пользователя при нажатии на кнопку, но не на страницах благодарности. Я продемонстрирую, как работает эта функция, позже в разделе "Примеры использования Data Tag". 

4. Data Tag/Data Client позволяет преобразовывать данные. Например, такие как, хэш-данные, строчный регистр, обрезка.

Я покажу, как использовать Data Tag/Data Client для события покупки. Логика использования Data Tag/Data Client одинакова для всех событий.

1. Скачайте Data Tag с GitHub -> Откройте вкладку Template внутри контейнера Web -> Нажмите New -> Нажмите три точки в правом верхнем углу -> Import -> Нажмите Save. 

2. Скачайте Data Client с GitHub -> Откройте Template tab внутри Server Container -> Нажмите New в Clients section -> Нажмите три точки в правом верхнем углу -> Import -> Нажмите Save. 

3. Откройте контейнер Web -> Create new tag -> Tag Type Data to GTM Server Side -> Выберите имя события -> Add GTM Server Side URL -> GTM Server Preview HTTP header. Вам необходимо добавить заголовок предварительного просмотра, чтобы увидеть запросы Data Tag внутри серверного контейнера. Вы можете найти его, нажав на три точки в правом верхнем углу режима предварительного просмотра серверного контейнера Google Tag Manager и выбрав "Send requests manually" -> Add event data (например, название продукта, SKU, ID и т.д.) -> Add User Data.    

4. Выберите триггер для события и нажмите кнопку Save. 

5. Откройте Server container -> Open Client -> Add new client -> Client type Request Data to Event Data -> Нажмите Save. Опубликуйте серверный контейнер.

6. Откройте режим предварительного просмотра веб-контейнера и серверного контейнера и проверьте, что серверный контейнер видит информацию Data Tag. Если вы не видите запросы тегов данных, обновите HTTP-заголовок GTM Server Preview. 

7. Убедившись в правильности работы Data Tag и Data Client, опубликуйте веб-контейнер и серверный контейнер. 

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

Custom event: {{event}}

Enabled send all from data layer 

Enabled send common data

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

Если я перейду в режим предварительного просмотра веб-контейнера и серверного контейнера, я увижу, что Data Tag сработал три раза на веб-контейнере, а Data Client получил и обработал все три события внутри серверного контейнера. Если я щелкну на имя события и проверю request_data, я увижу все параметры из слоя веб-данных. 

Допустим, вы хотите отправить данные пользователя, такие как имя, фамилия или электронная почта, в Facebook Conversion API, чтобы повысить качество подбора событий. Для этого вы можете использовать Data Tag. И если вы используете наш тег для настройки тега Facebook conversion API, тег FB будет автоматически получать данные пользователя из Data Tag. 

Чтобы дважды проверить, получил ли Facebook эти параметры, можно добавить Facebook test ID к тегу сервера Facebook и проверить, какие параметры видит Facebook в инструменте тестирования менеджера событий. 

Вы можете отправлять данные из веб-контейнера Google Tag Manager в CRM, Slack, webhooks и т. д. В этом примере показано, как отправить информацию о новой покупке на вашем сайте в канал Slack. 

1. Убедитесь, что вы отправляете правильную информацию из веб-контейнера Google Tag Manager с помощью Data Tag. 

2. Сгенерируйте вебхук в Slack. 

3. Внутри серверного контейнера создайте новый тег и выберите тип тега HTTP Request.

4. В URL-адресе назначения добавьте URL-адрес, который вы сгенерировали в Slack.

5. HTTP-метод POST.

6. В request body добавьте текст и параметры, которые вы хотите отправить в Slack.

{"text": "New Purchase \n email: {{email}}  \n transation_id: {{transaction ID}} \n purchase_value: {{transaction ID}}"}

Если вы часто работаете с Google Tag Manager, то бывали случаи, когда слой данных (или любую другую переменную) нужно было передать с одной страницы сайта на другую.

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

Используя тег данных, вы можете хранить любые переменные, которые хотите передать другим страницам.

В качестве примера я использую оценивание, построенное с помощью Instapage. Нам нужно было настроить событие для лидов для Facebook conversion API. При отправке оценки пользователь должен был ввести такие данные, как электронная почта, номер телефона, имя и т.д. Эта информация о пользователе была доступна на страницах оценки, но не на странице благодарности.

Чтобы иметь высокий показатель качества совпадения события с Facebook, вы должны отправлять параметры пользователя вместе с CAPI-событием. Поэтому я использовал Data Tag для хранения пользовательских данных в локальном хранилище. Я создал Submit application Data tag, который получает параметры пользователя из слоя данных и сохраняет их в локальном хранилище. Этот тег срабатывает, когда пользователь нажимает на кнопку отправки оценки.

Чтобы включить хранение данных в Data Tag, выберите опцию хранения рядом с данными, которые вы хотите сохранить.

Затем я добавил новый тип переменной в веб-контейнер (вы можете загрузить его по этой ссылке). Создайте новые переменные для всех данных, которые вы сохранили.

И наконец, я создал Lead Data Tag, который отправляет сохраненные данные в серверный контейнер.

Вы можете использовать Data Client для получения всех входящих запросов. Для этого необходимо изменить настройки Path Settings. Это можно использовать, например, для получения данных из Webhooks. У нас есть эта статья, в которой описано, как использовать входящие webhooks.

Если вы не видите запросы Data Tag внутри серверного контейнера, это может быть вызвано следующими причинами:

1. Data Client не опубликован. Откройте Server container и опубликуйте Data Client.

Data Tag и Data Client дадут надежный источник информации для использования в тегах, которые у вас есть в серверном контейнере. С помощью этого тега вы сможете быстрее внедрять новые технологии отслеживания и технологии на стороне сервера. Этот тег сэкономит время и затраты как для IT, так и для маркетинга - явный выигрыш!