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

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

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

Серверний контейнер не має прямого доступу до даних браузера, таких як data layer, файли cookie або контекст сторінки. Тому ці дані необхідно явно надсилати з веб-контейнера. Для цього доступні два методи:

• Data Tag у поєднанні з Data Client у серверному контейнері для прийому та аналізу його запитів надсилає змінні рівня даних та інші параметри незалежно від конкретної платформи;
• Google Analytics 4, який надсилає дані через тег Google, налаштований із URL-адресою серверного контейнера. Обидва методи розглянуто нижче.

Крок 1. Встановіть шаблон тегу Data Tag:

1. 1.
   Натисніть меню Теги.
2. 2.
   Натисніть Новий.
3. 3.
   Відкрийте розділ Шаблони у вашому веб-контейнері Google Tag Manager → додайте Data Tag із галереї шаблонів.
4. 4.
   Перейдіть на вкладку Конфігурація тегу.
5. 5.
   Натисніть Переглянути інші типи тегів у галереї шаблонів спільноти → знайдіть Data Tag → натисніть Додати до робочого простору → натисніть Додати.

Крок 2. Далі ми налаштуємо Data Tag для події перегляду сторінки:

1. 1.
   У полі Назва події ви можете вибрати стандартну назву події, додати власну назву або динамічну назву за допомогою змінної {{Event}}.
2. 2.
   Введіть свою URL-адресу GTM на стороні сервера (ви можете знайти свою URL-адресу GTM на стороні сервера в обліковому записі stape.io, відкривши контейнер sGTM та перевіривши розділ Домен.)
3. 3.
   Позначте, як саме ви хочете, щоб дані надсилалися:

   1. 3.1.
      Надсилати все з DataLayer — надсилатиме всю інформацію, що міститься у веб-шарі даних GTM, до даних подій GTM на сервері.
   2. 3.2.
      Надіслати загальні дані — додає до запиту такі параметри: page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution, viewport_size.
   3. 3.3.
      Додати стан згоди — додає до запиту об’єкт consent_state. Він містить такі властивості: ad_storage, analytics_storage, functionality_storage, personalization_storage, security_storage.
   4. 3.4.
      Додати загальні файли cookie — тег надсилатиме загальні файли cookie у eventData, щоб уникнути деяких обмежень платформ електронної комерції. Наприклад, це потрібно для подій, що працюють на сторінках оформлення замовлення Shopify.
4. 4.
   У розділі Дані події ви можете додати до запиту будь-які дані вручну. Ви також можете застосувати перетворення (наприклад, хешування, обрізання тощо) або зберегти дані.
5. 5.
   У розділі Дані користувача ви можете надіслати параметри користувача та застосувати перетворення або зберегти дані.
6. 6.
   У розділі Налаштування та Розширені налаштування ви знайдете саме те, що вказано в назві — розширені параметри конфігурації. Якщо ви не впевнені, що робите, краще не змінювати ці налаштування.
7. 7.
   Дайте своєму тегу описову назву та натисніть Зберегти.

Крок 3. Далі ви можете налаштувати тег даних для інших подій. Наступний приклад показує, як налаштувати події електронної комерції, коли доступний шар даних.

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

Приклад змінної, яка витягує дані користувача з шару даних.

Крок 4. Далі завантажте клієнт даних з GitHub:

1. 1.
   Перейдіть за цим посиланням.
2. 2.
   Натисніть Код → Завантажити ZIP.

Крок 5. Тепер імпортуйте клієнт даних:

1. 1.
   Відкрийте контейнер Google Tag Manager на сервері.
2. 2.
   Натисніть Шаблони.
3. 3.
   У розділі Клієнти натисніть Новий.
4. 4.
   Натисніть на три крапки у правому верхньому куті.
5. 5.
   Натисніть Імпортувати та виберіть Data Client, який ви завантажили з GitHub (можливо, спочатку доведеться розпакувати архів).
6. 6.
   Після завершення імпорту натисніть Зберегти.

Крок 6. Відкрийте вкладку Клієнти та натисніть Новий → виберіть Data Client → натисніть Зберегти.

Крок 7. Відкрийте екрани попереднього перегляду GTM для Веб та Сервер і протестуйте налаштування. Ви повинні побачити, що тег даних спрацьовує у веб-контейнері GTM, а Data Client обробляє запити тегу даних у sGTM.

Крок 1. Створіть конфігураційну змінну для URL-адреси серверного контейнера. Для цього:

1. 1.
   Натисніть на меню Змінні.
   
2. 2.
   Натисніть Нова під панеллю Змінні, визначені користувачем.
   
3. 3.
   Натисніть на панель Конфігурація змінних.
   
4. 4.
   Виберіть тип Тег Google: Параметри конфігурації.
   
5. 5.
   Натисніть Додати параметр.
   
6. 6.
   Введіть такі параметри:

   1. 6.1.
      Параметр конфігурації: server_container_url.
   2. 6.2.
      Значення: URL-адреса вашого серверного контейнера Tag Manager.
7. 7.
   Дайте змінній описову назву та натисніть Зберегти.
   

Крок 2. Створіть тег Google Analytics 4:

1. 1.
   Натисніть на меню Теги.
2. 2.
   Натисніть Новий.
3. 3.
   Перейдіть на вкладку Конфігурація тегу.
4. 4.
   Виберіть Google Analytics → Google Tag.
5. 5.
   У полі Ідентифікатор тегу введіть ідентифікатор зі свого облікового запису GA4 (щоб його знайти, перейдіть у GA4 → натисніть Адміністратор → Потоки даних → виберіть потік → перегляньте Ідентифікатор вимірювання).
6. 6.
   У розділі Налаштування конфігурації виберіть змінну контейнера сервера, яку ви створили раніше.
7. 7.
   У розділі Тригери переконайтеся, що вибрано опцію Ініціалізація — тригер для всіх сторінок .
8. 8.
   Дайте тегу описову назву та натисніть Зберегти.
9. 9.
   Натисніть Опублікувати, щоб контейнер запрацював.

Крок 3. Далі розглянемо, як створити подію GA4, використовуючи як приклад подію Усі кліки:

1. 1.
   Натисніть на меню Теги.
2. 2.
   Натисніть Новий.
3. 3.
   Перейдіть на вкладку Конфігурація тегу.
4. 4.
   Виберіть Google Analytics → Google Analytics: Подія GA4.
5. 5.
   Введіть свій Ідентифікатор вимірювання (з меню Потоки даних GA4).
6. 6.
   Дайте події описову назву.
7. 7.
   Натисніть Тригери → Усі кліки.
8. 8.
   Дайте тегу описову назву.
9. 9.
   Натисніть Зберегти.

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

• Як налаштувати Meta Conversions API
• Як налаштувати відстеження в Google Analytics 4 (GA4)
• Як налаштувати відстеження конверсій у Google Ads
• Інші платформи

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

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

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

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

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

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

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

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

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

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

    2. Створіть вебхук в 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}}”}

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

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

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

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

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

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

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

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

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

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

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

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