Server-side tagging для Shopify

Ви шукаєте простий і швидкий спосіб налаштувати теги на стороні сервера Shopify? Зверніть увагу на додаток Stape Conversion Tracking для Shopify. За допомогою нашого додатку ви можете легко вставити веб-скрипт Google Tag Manager на веб-сайт, налаштувати власний домен і власний завантажувач, надсилати дані про користувачів і події електронної комерції на рівень даних, а також налаштувати веб-хуки. Всі ці функції допоможуть вам зробити відстеження більш точним, продовживши термін дії файлів cookie, зробивши відстеження браузера стійким до технологій запобігання відстеженню та надсилаючи надійні дані на рекламні та маркетингові платформи через кінцеву точку сервера.

У цій статті ми розглянемо, як налаштувати та встановити додаток Stape для Shopify, щоб ви могли негайно використовувати ці потужні функції.

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

Щоб максимально спростити впровадження односторонніх тегів, ми створили додаток Conversion Tracking Shopify. Ця програма безкоштовна і допомагає легко налаштувати серверний контейнер Google Tag Manager для магазину Shopify. Але спочатку давайте поговоримо про основні переваги серверних тегів для сайтів Shopify.

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

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

3. Покращена продуктивність веб-сайту. При використанні тегів на стороні сервера теги завантажуються на сервері, а не на стороні клієнта, що зменшує кількість коду, який потрібно завантажувати в браузер користувача. Це може покращити швидкість завантаження веб-сайту, що має вирішальне значення для користувацького досвіду та SEO.

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

Розгорніть елемент нижче, щоб переглянути детальний гайд.

Застосунок Stape Conversion Tracking для Shopify можна безкоштовно встановити з маркетплейсу Shopify.

На вкладці General зосереджено всі параметри, пов'язані з додаванням сніпета GTM на всі сторінки вашого магазину Shopify таким чином, щоб він був стійким до блокувальників реклами, ITP і обмежень терміну дії файлів cookie.

• Use Shopify Markets

Встановіть цей прапорець, якщо у вас кілька ринків Shopify. За допомогою цієї функції можна налаштувати впровадження GTM окремо для кожного ринку Shopify. Якщо функцію вимкнено, усі ринки використовують типові налаштування.

Після увімкнення ви побачите поля, які потрібно налаштувати для кожного ринку:

• Insert GTM: якщо ввімкнено, сніпет GTM додається на кожну сторінку сайту.

• GTM container ID: ідентифікатор вашого веб контейнера GTM.

• Customer privacy API: якщо опцію ввімкнено, застосунок затримує завантаження GTM до моменту, коли відвідувач погодиться на використання cookie через банер Shopify Customer Privacy. За замовчуванням цю опцію не рекомендується використовувати.

• Custom domain, Stape container ID та Cookie Keeper: ці поля пов'язані з сервер-сайд трекінгом; налаштуйте їх, якщо використовуєте або плануєте використовувати сервер-сайд конфігурацію. Нижче пояснюємо, де знайти значення для кожного поля.

• GTM web container ID

Вкажіть тут ідентифікатор вашого веб контейнера GTM.

• Custom domain

Надзвичайно важливо використовувати кастомний субдомен для коректної роботи власних файлів cookie (first-party cookies) та трекінгу загалом. Якщо ви ще не додали субдомен до свого контейнера sGTM, скористайтеся гайдом з налаштування кастомних доменів.

• Custom Loader

Наполегливо рекомендуємо використовувати Custom Loader для посилення захисту від блокувальників реклами.

Встановіть відповідний прапорець і вкажіть ідентифікатор контейнера Stape. Щоб його знайти, увійдіть у свій обліковий запис Stape, виберіть контейнер sGTM і знайдіть ідентифікатор контейнера в розділі Settings.

• Cookie Keeper

Це рішення дозволяє мінімізувати вплив обмежень ITP. Перед активацією Cookie Keeper через застосунок переконайтеся, що він вже увімкнений у вашому контейнері Stape. Щоб налаштувати Cookie Keeper, натисніть на розкривний елемент і дотримуйтесь інструкцій:

• GTM snippet block

Тут можна отримати сніпет GTM для встановлення на сторінках, які перебувають поза межами вашої теми Shopify (наприклад, сторінки, створені сторонніми застосунками на кшталт Zipify).

На вкладці Data Layer є події data layer, які можна активувати та налаштувати. Другий перемикач дозволяє контролювати, чи додаватиметься суфікс _stape для запобігання конфліктам у GTM. Якщо його вимкнено, події зберігають свої стандартні назви.

Тут ви знайдете повний список подій і їхніх пейлоудів, які додаються через застосунок Stape.

Активація data layer:

• Активуйте прапорець Add ecommerce Data Layer events.
• Збережіть зміни.
• Скопіюйте код для кастомного пікселя з поля нижче на вкладці Data Layer і дотримуйтесь інструкцій, щоб додати та активувати його.

У розділі Customer privacy, під Permission spoiler, обов'язково виберіть Not required. Сніпет лише генерує Data Layer; він не встановлює жодних файлів cookie та не передає дані третім особам.

На вкладці Data Layer також є опція Log events to console (Dev) — інструмент налагодження для розробників і адміністраторів магазину. Коли вона увімкнена, eCommerce події реєструються в консолі браузера, відображаються пейлоуди подій, надісланих на серверний контейнер GTM/Stape для перевірки, а також полегшується дебагінг Data Layerʼів.

Цей параметр призначений лише для розробки; у виробничому середовищі його слід вимкнути, щоб уникнути зайвого ведення журналів у консолі.

Події вебхуків налаштовуються на вкладці Webhook.

На цій вкладці налаштовуються події вебхуків.

Щоб активувати вебхук, встановіть прапорець, вкажіть URL серверного контейнера GTM і /path, на який слід надсилати вебхуки.

Ви можете налаштувати активацію вебхуків при створенні нового замовлення або при поверненні коштів за замовлення.

Корисні публікації блогу про використання та налагодження вебхуків:

• Що таке вебхуки та їх використання в відстеженні на стороні сервера
• Налагодження вхідних вебхуків у режимі попереднього перегляду сервера Google Tag Manager
• Трекінг server-to-server у Google Tag Manager: що це та як налаштувати

Дозволяє автоматично заповнювати та оновлювати списки Customer Match у Google Ads.

Пропустіть налаштування цієї вкладки, якщо ви не запускаєте кампанії Google Ads або не використовуєте списки Customer Match.

Серверний контейнер не має прямого доступу до даних браузера, таких як 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
• Інші платформи

Більшість популярних маркетингових та аналітичних інструментів уже підтримують сервер-сайд тегінг та мають готові теги для sGTM. На нашому сайті ви знайдете гайди з їх інтеграції: Facebook CAPI, TikTok Events API, Snapchat Conversions API, сервер-сайд трекінг для Google Ads тощо.

Налагодження завантаження GTM

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

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

Налагодження подій data layer на сторінці чекауту

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

Події на сторінці оформлення замовлення не відображатимуться в GTM Preview через ізольоване середовище цих сторінок, яке блокує необмежені маніпуляції з DOM або додавання скриптів, зокрема сніпета GTM.

Проте ви можете вручну вставити сніпет на сторінку оформлення замовлення за допомогою розширення Chrome Stape GTM Helper:

1. 1.
   Після запуску режиму Preview у GTM увімкніть перемикач Shopify Sandbox dataLayer на вкладці Settings розширення.
2. 2.
   На вкладці Inject GTM натисніть Enable injection, додайте свою доменну назву та GTM ID. Збережіть зміни.

Тепер події на сторінці оформлення замовлення відображатимуться в GTM Preview.

Можливості серверних тегів швидко розширюються, надаючи користувачеві чудовий інструмент для підвищення точності відстеження та аналітики конверсій. Крім того, Stape намагається спростити використання sGTM для наших клієнтів, тому ми випускаємо додаток Conversion Tracking для Shopify.

Stape Conversion Tracking для Shopify - це фантастичний інструмент з численними функціями та перевагами. Наприклад, ви можете легко налаштувати відстеження на своєму сайті, додавши скрипт Google Tag Manager і налаштувавши власний домен і завантажувач. Крім того, ви можете надсилати дані користувачів на рівень даних і налаштовувати веб-хуки.

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

Якщо ви шукаєте швидке і просте рішення для налаштування тегів на стороні сервера Shopify, Stape - це те, що вам потрібно. Скористайтеся цим чудовим рішенням вже сьогодні і скористайтеся перевагами більш точного відстеження за допомогою додатку Stape Conversion Tracking для Shopify. Спробуйте самі - ми знаємо, що ви не будете розчаровані!