Надсилання даних із веб-контейнера Google Tag Manager до серверного контейнера

Автор
Stape
Опубліковано
April 01, 2021
Також є

Наявність надійних даних на сервері Google Tag Manager є ключем до точного додавання тегів на стороні сервера. Одним із найпопулярніших способів надсилання даних із веб на сервер GTM є Google Analytics 4. GA4 має свої обмеження. Ось чому ми створили тег даних і клієнт даних (Data Tag та Data Client), які повинні працювати разом, щоб передавати дані про події та дані користувача з веб- на серверний GTM.

У цій статті я хочу показати вам, як використовувати тег даних. Цей спеціальний тег надсилає параметри з веб-контейнера Google Tag Manager до серверного контейнера. У разі використання разом із клієнтом даних для серверного контейнера Google Tag Manager він дозволяє надсилати змінні рівня даних, спеціальні параметри та інші дані з веб- до серверного контейнера. У результаті клієнт даних отримує інформацію з тегу даних у події сервера Google Tag Manager.

Як надіслати дані з Google Tag Manager у серверний контейнерСкопіюйте посилання на цей розділ

За останні кілька років компанії почали користуватися перевагами серверних контейнерів Google Tag Manager. Деякі з них реалізують комбінацію веб-контейнерів і серверних контейнерів. Інші хочуть перенести відстеження з боку клієнта та почати використовувати лише відстеження на стороні сервера. Тег даних, який ми створили, призначений для доставки даних з веб в серверний контейнер. Клієнти, які бажають поєднати веб-відстеження та відстеження сервера, знайдуть це особливо корисним.

Відстеження на стороні сервера дозволяє перемістити інструментарій Google Tag Manager у серверне середовище. Іншими словами, ви можете перемістити відстеження з браузера на сервер. Наш тег даних і клієнт даних вирішують проблему транспортування даних із Google Tag Manager у серверний контейнер. Скажімо, у вас є всі необхідні дані, налаштовані у веб-контейнері, але серверне середовище не може використовувати ті самі змінні рівня даних, елементи DOM тощо. Наш тег даних і клієнт даних вирішують проблему транспортування всіх даних з веб- до серверного контейнера без додаткових зусиль.

За допомогою тегу даних ви можете налаштувати, які події, параметри подій і дані користувача ви хочете надсилати в серверний контейнер та коли. З іншого боку, наш клієнт даних повинен бути розміщений у серверний контейнері, щоб слухати інформацію тегів даних і обробляти її в дані подій.

Вся інформація буде зберігатися на вашому сервері. Тег даних і клієнт даних дозволять зберігати, формувати та отримувати дані з веб-контейнера та використовувати їх для налаштування тегів на стороні сервера. Тег даних і клієнт даних у серверному контейнері формуватимуть і направлятимуть дані до належних місць призначення за допомогою тегів.

Опис Data TagСкопіюйте посилання на цей розділ

Я почну з опису всіх полів і опцій, які має цей тег. Це допоможе вам краще зрозуміти, яку інформацію ви можете надіслати з веб на сервер.

data tag overview

Event Name.  У вас є два варіанти: вибрати стандартну подію зі спадного меню або надіслати спеціальну подію. Використовуючи спеціальну подію, ви можете додати змінну {{event}}, і в цьому випадку тег даних надсилатиме всі події, які ви бачите в режимі попереднього перегляду.

GTM Server Side domain є обов’язковим полем. Ви можете знайти його в налаштуваннях серверного контейнера Google Tag Manager у розділі URL-адреса сервера тегів. Data Tag використовуватиме цей домен для надсилання запитів.

Ви можете вибрати надсилання всіх значень рівня даних до серверного контейнера, увімкнувши параметр «Надіслати все з рівня даних».

Якщо ви ввімкнете функцію «Надіслати загальні дані», тег даних надішле page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution, viewport_size.

На вкладці даних події ви можете додати спеціальний параметр події, який потрібно надіслати в серверний контейнер. Ви можете вибрати будь-яку змінну веб-менеджера тегів або ввести статичне значення чи текст у полях Ім’я та Значення. Існує також можливість змінити значення за допомогою функцій «Trim», «To lower case» або «Hash». Ви також можете зберігати змінні.

За допомогою даних користувача можна надсилати параметри користувача. Потрібно вибрати назву параметра зі спадного меню, додати статичне значення або використати змінну. Існує також можливість трансформувати значення за допомогою trim, to lowercase, hash-функції та збереження. Ви можете використовувати ці поля, щоб надсилати дані користувача на сервер тегів Facebook, щоб збільшити відповідність подій для вашого Facebook CAPI. Якщо ви використовуєте наш тег даних, клієнт даних і Facebook CAPI, тег Facebook автоматично отримуватиме дані користувача з тегу даних.

У розділі «Параметри» ви можете змінити тип запиту (за замовчуванням тип запиту POST, змініть його на GET), шлях і версії протоколу.

Розширені налаштування – це стандартні налаштування, які є у всіх веб-тегах Google Tag Manager.

Переваги Data TagСкопіюйте посилання на цей розділ

Наразі існує два способи надсилання даних із веб-контейнера на сервер: за допомогою тегу GA4 і тегу даних/клієнта даних.

Data Tag/Data Client має кілька переваг перед GA4:

  1. Data Tag може надсилати масиви даних. Для порівняння: тег GA4 може надсилати лише змінні та повертає помилку, якщо ви намагаєтеся надіслати масив.
  2. За допомогою Data Tag/Data Client ви можете надсилати всю інформацію з веб-рівня даних до даних подій у серверному контейнері. З GA4 вам доведеться надсилати кожну змінну вручну.
  3. Якщо ви хочете зберігати дані користувача в змінних GTM, використовуйте тег даних. Наприклад, його можна використовувати, коли форма надсилає доступні дані користувача про натискання кнопок, але не на сторінках подяки (thank-you pages). Пізніше я покажу, як ця функція працює, у розділі «Випадки використання тегів даних».
  4. Data Tag/Data Client дозволяють трансформувати дані. Наприклад, hash data, lowercase, trim.

Як надіслати дані з веб-контейнера на сервер за допомогою тегу даних/клієнта данихСкопіюйте посилання на цей розділ

Я покажу, як використовувати тег даних/клієнт даних для події покупки. Ця логіка використання тегу даних/клієнта даних однакова для всіх подій.

У цьому відео показано, як використовувати тег даних/клієнт даних для надсилання інформації про подію та користувача з веб- на серверний контейнер👇

1. Додайте Data Tag до веб-контейнера GTM із галереї шаблонів.

2. Завантажте Data Client з GitHub -> Відкрийте вкладку Template всередині контейнера Server -> Натисніть New у розділі Clients -> Натисніть три крапки у верхньому правому куті -> Import -> Натисніть Save.

3. Відкрийте веб-контейнер -> Створити новий тег -> типу тегу Data Tag -> Виберіть назву події або виберіть динамічну назву події -> Додати URL-адресу на стороні сервера GTM -> Додати дані події (наприклад, назву продукту, артикул, ідентифікатор тощо). ) і Дані користувача вручну або виберіть Надіслати все з DataLayer.

set up data tag enhanced e-commerce 

4. Виберіть тригер для події та натисніть зберегти.

5. Відкрийте серверний контейнер -> Відкрийте клієнт -> Додати новий клієнт -> Тип клієнта Клієнт даних -> Натисніть Зберегти. Опублікуйте серверний контейнер

6. Відкрийте режим попереднього перегляду веб-контейнера та серверного контейнера та переконайтеся, що серверний контейнер бачить інформацію тегів даних.

test data tag requests in the server container 

7. Переконавшись, що тег даних і клієнт даних працюють правильно, опублікуйте веб-контейнер і серверний контейнер.

Випадки використання Data TagСкопіюйте посилання на цей розділ

1. Рівень даних від веб- до серверного контейнера.Скопіюйте посилання на цей розділ

Перший варіант використання, який спадає на думку, це надсилання рівня даних із веб-контейнера на сервер. За допомогою цих даних ви можете передавати додаткові параметри своїм тегам на стороні сервера.

На знімку екрана нижче я використовував ці налаштування, щоб надіслати рівень даних у серверний контейнер:

  • Custom event: {{event}}
  • Enabled send all from data layer
  • Enabled send common data

Цей тег даних запускається на всіх подіях enhanced e-commerce.

send data from web gtm to Server GTM 

У режимі попереднього перегляду серверного контейнера ви побачите, що Data Tag надсилає запити на всі події електронної комерції, а Data Client отримує й обробляє ці запити всередині серверного контейнера. Якщо я клацну назву події та перевірю event_data, ви побачите всі параметри рівня веб-даних.

2. Надсилання даних користувача до Facebook Conversion API.Скопіюйте посилання на цей розділ

Припустімо, що ви хочете надіслати дані користувача, як-от ім’я, прізвище чи електронну адресу, до Facebook Conversion API, щоб підвищити якість відповідності подій. Для цього можна використовувати тег даних. І якщо ви використовуєте наш тег для налаштування тегу Facebook conversion API, тег FB автоматично збиратиме дані користувача з тегу даних.

Я хотів надіслати електронну адресу користувача, ім’я та прізвище разом із подіями оформлення замовлення в наведених нижче прикладах. Я додав дані користувача до тегу даних у веб-контейнері Google Tag Manager. Я використовую статичні параметри для тесту, але ви можете передавати ці параметри динамічно за допомогою змінних. Наш тег Facebook автоматично фіксує параметри користувача з клієнта даних і надсилає хешовану інформацію до Facebook.

send user data from web to Server GTM

Щоб ще раз перевірити, чи Facebook отримав ці параметри, ви можете додати тестовий ідентифікатор Facebook до тегу сервера Facebook і перевірити, які параметри Facebook бачить в інструменті тестування менеджера подій.

3. Надішліть спеціальні дані з веб-контейнера на інші сервери.Скопіюйте посилання на цей розділ

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

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

    2. Створіть вебхук https://api.slack.com/tutorials/slack-apps-hello-world на Slack.

    3. Усередині серверного контейнера створіть новий тег і виберіть тип тегу HTTP-запит.

    4. У цільову URL-адресу додайте URL-адресу, згенеровану на Slack.

    5. HTTP method POST.

    6. У Request body додайте текст і параметри, які ви хочете надіслати в Slack.

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

4. Зберігайте дані.Скопіюйте посилання на цей розділ

Якщо ви досить часто працюєте з Google Tag Manager, то був момент, коли рівень даних (або будь-яку іншу змінну) доводилося передавати з однієї сторінки вашого сайту на іншу.

На жаль, Google Tag Manager не має можливості зберігати дані та передавати їх між сторінками сайту. Наприклад, можна надіслати електронну пошту користувача, лише якщо вона існує на сторінці. Але що, якщо дані користувача недоступні на сторінці подяки (thank you page), і їх можна отримати лише зі сторінки, яка передує сторінці подяки?

Використовуючи тег даних, ви можете зберігати будь-які змінні, які хочете передати на інші сторінки.

Як приклад я використаю оцінку, створену за допомогою Instapage. Нам потрібно було налаштувати провідну подію для Facebook conversion API. Під час подання оцінки користувач повинен був ввести такі дані, як електронна адреса, номер телефону, ім’я тощо. Ця інформація користувача була доступна на сторінках оцінювання, але не на сторінці подяки.

Щоб отримати високу оцінку якості відповідності подій у Facebook, ви повинні надіслати параметри користувача разом із подією CAPI. Ось чому я використовував Data Tag для зберігання даних користувача в локальному сховищі. Я створив тег Submit Application Data, який отримує параметри користувача з рівня даних і зберігає їх у локальному сховищі. Цей тег активується, коли користувач натискає кнопку «Подати оцінку».

Щоб увімкнути збереження даних у тезі даних, виберіть опцію збереження поруч із даними, які потрібно зберегти.

store user data in cookies web google tag manager

Потім я додав новий тип змінної у веб-контейнер (ви можете завантажити його за цим посиланням). Створіть нові змінні для всіх даних, які ви зберігаєте.

І, нарешті, я створив тег Lead Data Tag, який надсилає збережені дані в серверний контейнер.

5. Отримайте всі вхідні запити.Скопіюйте посилання на цей розділ

Ви можете використовувати Data Client для отримання будь-яких вхідних запитів. Для цього вам потрібно змінити налаштування шляху. Його можна використовувати, наприклад, для отримання даних із Webhooks. У нас є ця стаття, яка описує, як використовувати вхідні вебхуки.

prices incoming requests in the server container

Поширені проблеми з тегом даних і клієнтом данихСкопіюйте посилання на цей розділ

Якщо ви не бачите запити тегів даних у серверному контейнері, це може бути з таких причин:

1. Дані клієнта не опубліковані. Відкрийте серверний контейнер та опублікуйте клієнт даних.

data client nor working CORS

ВисновокСкопіюйте посилання на цей розділ

Тег даних і клієнт даних нададуть надійне джерело інформації для введення тегів, які ви використовуєте в серверному контейнері. За допомогою цього тегу ви можете швидше просуватися в розгортанні нових технологій і відстеження на стороні сервера. Цей тег заощадить час і витрати як для ІТ, так і для маркетингу – безпрограшний варіант!

Розмістіть свій сервер GTM на Stape

Реєструючись, ви приймаєте Умови використання та Примітку про конфіденційність Stape