Server-side tagging для Shopify
Ви шукаєте простий і швидкий спосіб налаштувати теги на стороні сервера Shopify? Зверніть увагу на додаток Stape Conversion Tracking для Shopify. За допомогою нашого додатку ви можете легко вставити веб-скрипт Google Tag Manager на веб-сайт, налаштувати власний домен і власний завантажувач, надсилати дані про користувачів і події електронної комерції на рівень даних, а також налаштувати веб-хуки. Всі ці функції допоможуть вам зробити відстеження більш точним, продовживши термін дії файлів cookie, зробивши відстеження браузера стійким до технологій запобігання відстеженню та надсилаючи надійні дані на рекламні та маркетингові платформи через кінцеву точку сервера.
У цій статті ми розглянемо, як налаштувати та встановити додаток Stape для Shopify, щоб ви могли негайно використовувати ці потужні функції.
Переваги використання серверних тегів для Shopify
Серверні теги можуть прискорити успіх ваших маркетингових кампаній завдяки точному відстеженню конверсій та аналізу користувачів. Однак, щоб скористатися всіма перевагами, потрібне ретельне налаштування - те, що ніхто не повинен випускати з уваги.
Щоб максимально спростити впровадження односторонніх тегів, ми створили додаток Conversion Tracking Shopify. Ця програма безкоштовна і допомагає легко налаштувати серверний контейнер Google Tag Manager для магазину Shopify. Але спочатку давайте поговоримо про основні переваги серверних тегів для сайтів Shopify.
1. Підвищення точності даних. тегування на стороні сервера може допомогти забезпечити більш точний збір даних, зменшуючи ризик втрати даних або помилок, спричинених блокувальниками реклами, розширеннями браузерів або іншими факторами на стороні клієнта.
2. Точна атрибуція конверсій. Завдяки збільшенню часу життя файлів cookie та даних користувачів, що передаються через сервер, рекламні мережі можуть більш точно атрибутувати конверсії до маркетингових кампаній.
3. Покращена продуктивність веб-сайту. При використанні тегів на стороні сервера теги завантажуються на сервері, а не на стороні клієнта, що зменшує кількість коду, який потрібно завантажувати в браузер користувача. Це може покращити швидкість завантаження веб-сайту, що має вирішальне значення для користувацького досвіду та SEO.
4. Підвищена безпека. Тегування на стороні сервера може допомогти підвищити безпеку веб-сайту, зменшивши ризик витоку даних або інших загроз безпеці, спричинених вразливостями на стороні клієнта.
Як налаштувати сервер-сайд тегінг у вашому магазині Shopify
Крок 1. Налаштуйте серверний контейнер Google Tag Manager на Stape
Розгорніть елемент нижче, щоб переглянути детальний гайд.
Як налаштувати серверний контейнер GTM
Крок 1. Створіть серверний контейнер у Google Tag Manager
➡️ Примітка
Перш ніж налаштовувати серверний контейнер Google Tag Manager, важливо спочатку налаштувати вебконтейнер GTM, оскільки:
- Вебконтейнер збирає події, параметри та взаємодії користувачів на вашому сайті.
- Він надсилає ці дані до вашого серверного контейнера.
Будь ласка, дотримуйтеся офіційної документації Google.
1. Виберіть свій обліковий запис GTM → Натисніть Admin → Натисніть + поруч з назвою контейнера.
2. Виберіть свій обліковий запис GTM → Натисніть Admin → Натисніть + поруч з назвою контейнера.
3. Виберіть Manually provision tagging server. Скопіюйте конфігурацію контейнера. Нам це знадобиться на наступних кроках.
Крок 2. Створіть обліковий запис Stape для розміщення серверного контейнера sGTM
1. Перейдіть на сайт stape.io та створіть обліковий запис або увійдіть.
2. Натисніть «Створити контейнер sGTM» на головній сторінці.
3. Введіть дані вашого контейнера.
- Назва контейнера — дайте назву своєму контейнеру (для зручності рекомендуємо використовувати ту саму назву, яку ви дали контейнеру сервера в GTM).
- Конфігурація контейнера — вставте дані «Конфігурація контейнера», які ви скопіювали зі спливаючого вікна «Встановити Google Tag Manager». Якщо ви їх загубили, перейдіть на Google Tag Manager → натисніть «Адміністратор» → натисніть «Налаштування контейнера» → скопіюйте рядок під «Конфігурація контейнера».
- Розташування сервера — для найкращої продуктивності виберіть розташування сервера, яке найближче до місця перебування більшості ваших клієнтів. Перегляньте список доступних розташувань серверів тут. Крім того, ви можете вибрати опцію «Глобальне багатозональне розташування сервера», якщо у вас є трафік із різних регіонів. Вона автоматично перенаправлятиме вхідні запити до найближчої доступної зони на основі IP-адреси користувача.
Потім натисніть «Створити контейнер».
4. Оберіть тарифний план для вашого контейнера. Ви можете почати з безкоштовного плану. Натисніть «Продовжити з безкоштовним планом».
5. Ви побачите статус вашого контейнера, його конфігурацію та назву тарифного плану. Розгортання серверного контейнера займає приблизно 5 хвилин.
Будь ласка, перезавантажте сторінку, щоб оновити статус. Якщо налаштування Google Tag Manager на стороні сервера було виконано правильно, ви повинні побачити статус Running.
Крок 2. Додайте та налаштуйте застосунок Stape Conversion Tracking для Shopify
2.1 Встановіть застосунок Stape Conversion Tracking у своєму магазині
Застосунок Stape Conversion Tracking для Shopify можна безкоштовно встановити з маркетплейсу Shopify.
2.2 Налаштуйте вкладку General
На вкладці 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, натисніть на розкривний елемент і дотримуйтесь інструкцій:
Як налаштувати Cookie Keeper
1. Увійдіть у свій обліковий запис Stape та виберіть необхідний контейнер sGTM на дашборді.
2. Перейдіть до Power-ups і натисніть Use поруч із панеллю Cookie Keeper.
3. Увімкніть перемикач Cookie Keeper.
4. У розділі Standard cookies виберіть файли cookie, термін дії яких потрібно продовжити.
Кастомні cookies
Якщо потрібних вам файлів cookie немає в стандартному списку, можна налаштувати кастомні. Введіть назву файлу cookie й за бажанням вкажіть термін дії в днях (залиште поле порожнім, щоб зберігати цей cookie безстроково).
5. Натисніть Save changes.
Тестування налаштування
Наведені нижче кроки використовують файл cookie _ga Google Analytics як приклад, але той самий процес можна застосувати до будь-якої платформи. Перш ніж починати тест, переконайтеся, що ви налаштували принаймні один тег GA4.
- Відкрийте браузер Safari (версія не старіша за 16.4). Щоб перевірити версію, натисніть Safari в рядку меню та виберіть About Safari.
- Введіть URL свого сайту з параметром запиту
?galid=test123, щоб встановити файл cookie_ga. Наприклад:вашсайт.com/?galid=test123. - Клацніть правою кнопкою миші на сторінці → Inspect Element → вкладка Storage → Cookies.
- Знайдіть
_ga, скопіюйте і збережіть його значення, а потім видаліть файл cookie (клацніть правою кнопкою миші на файл cookie → Delete). - Перезавантажте сторінку двічі.
- Переконайтеся, що файл cookie
_gaз'явився знову з тим самим значенням. Якщо так — Cookie Keeper працює правильно.
- GTM snippet block
Тут можна отримати сніпет GTM для встановлення на сторінках, які перебувають поза межами вашої теми Shopify (наприклад, сторінки, створені сторонніми застосунками на кшталт Zipify).
2.3 Налаштуйте вкладку Data Layer
На вкладці Data Layer є події data layer, які можна активувати та налаштувати. Другий перемикач дозволяє контролювати, чи додаватиметься суфікс _stape для запобігання конфліктам у GTM. Якщо його вимкнено, події зберігають свої стандартні назви.
Активація 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ʼів.
Цей параметр призначений лише для розробки; у виробничому середовищі його слід вимкнути, щоб уникнути зайвого ведення журналів у консолі.
2.4 Налаштуйте вкладку Webhooks
Події вебхуків налаштовуються на вкладці Webhook.
Примітка: проблема з вебхуками у Shopify полягає в тому, що вони не містять даних файлів cookie, які є критично важливими для відстеження на будь-якій платформі. Тому використання подій вебхуків рекомендується лише як крайній захід, якщо з якихось причин ви не можете відстежувати їх онлайн.
На цій вкладці налаштовуються події вебхуків.
Щоб активувати вебхук, встановіть прапорець, вкажіть URL серверного контейнера GTM і /path, на який слід надсилати вебхуки.
Ви можете налаштувати активацію вебхуків при створенні нового замовлення або при поверненні коштів за замовлення.
Корисні публікації блогу про використання та налагодження вебхуків:
2.5 Вкладка Customer Match
Пропустіть налаштування цієї вкладки, якщо ви не запускаєте кампанії Google Ads або не використовуєте списки Customer Match.
Крок 3. Налаштуйте надсилання даних до серверного контейнера Google Tag Manager
Серверний контейнер не має прямого доступу до даних браузера, таких як data layer, файли cookie або контекст сторінки. Тому ці дані необхідно явно надсилати з веб-контейнера. Для цього доступні два методи:
- Data Tag у поєднанні з Data Client у серверному контейнері для прийому та аналізу його запитів надсилає змінні рівня даних та інші параметри незалежно від конкретної платформи;
- Google Analytics 4, який надсилає дані через тег Google, налаштований із URL-адресою серверного контейнера. Обидва методи розглянуто нижче.
Надсилання даних із веб-контейнера до серверного контейнера за допомогою тегу Data Tag
Крок 1. Встановіть шаблон тегу Data Tag:
- Натисніть меню Теги.
- Натисніть Новий.
- Відкрийте розділ Шаблони у вашому веб-контейнері Google Tag Manager → додайте Data Tag із галереї шаблонів.
- Перейдіть на вкладку Конфігурація тегу.
- Натисніть Переглянути інші типи тегів у галереї шаблонів спільноти → знайдіть Data Tag → натисніть Додати до робочого простору → натисніть Додати.
Крок 2. Далі ми налаштуємо Data Tag для події перегляду сторінки:
- У полі Назва події ви можете вибрати стандартну назву події, додати власну назву або динамічну назву за допомогою змінної {{Event}}.
- Введіть свою URL-адресу GTM на стороні сервера (ви можете знайти свою URL-адресу GTM на стороні сервера в обліковому записі stape.io, відкривши контейнер sGTM та перевіривши розділ Домен.)
- Позначте, як саме ви хочете, щоб дані надсилалися:
- Надсилати все з DataLayer — надсилатиме всю інформацію, що міститься у веб-шарі даних GTM, до даних подій GTM на сервері.
- Надіслати загальні дані — додає до запиту такі параметри: page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution, viewport_size.
- Додати стан згоди — додає до запиту об’єкт consent_state. Він містить такі властивості: ad_storage, analytics_storage, functionality_storage, personalization_storage, security_storage.
- Додати загальні файли cookie — тег надсилатиме загальні файли cookie у eventData, щоб уникнути деяких обмежень платформ електронної комерції. Наприклад, це потрібно для подій, що працюють на сторінках оформлення замовлення Shopify.
- У розділі Дані події ви можете додати до запиту будь-які дані вручну. Ви також можете застосувати перетворення (наприклад, хешування, обрізання тощо) або зберегти дані.
- У розділі Дані користувача ви можете надіслати параметри користувача та застосувати перетворення або зберегти дані.
- У розділі Налаштування та Розширені налаштування ви знайдете саме те, що вказано в назві — розширені параметри конфігурації. Якщо ви не впевнені, що робите, краще не змінювати ці налаштування.
- Дайте своєму тегу описову назву та натисніть Зберегти.
Крок 3. Далі ви можете налаштувати тег даних для інших подій. Наступний приклад показує, як налаштувати події електронної комерції, коли доступний шар даних.
Цей тег спрацьовує при кожній події електронної комерції в шарі даних. У цьому прикладі всі події електронної комерції закінчуються на _stape, тому ми використовуємо регулярний вираз, який фіксує всі події, що містять _stape.
Приклад змінної, яка витягує дані користувача з шару даних.
Крок 4. Далі завантажте клієнт даних з GitHub:
- Перейдіть за цим посиланням.
- Натисніть Код → Завантажити ZIP.
Крок 5. Тепер імпортуйте клієнт даних:
- Відкрийте контейнер Google Tag Manager на сервері.
- Натисніть Шаблони.
- У розділі Клієнти натисніть Новий.
- Натисніть на три крапки у правому верхньому куті.
- Натисніть Імпортувати та виберіть Data Client, який ви завантажили з GitHub (можливо, спочатку доведеться розпакувати архів).
- Після завершення імпорту натисніть Зберегти.
Крок 6. Відкрийте вкладку Клієнти та натисніть Новий → виберіть Data Client → натисніть Зберегти.
Крок 7. Відкрийте екрани попереднього перегляду GTM для Веб та Сервер і протестуйте налаштування. Ви повинні побачити, що тег даних спрацьовує у веб-контейнері GTM, а Data Client обробляє запити тегу даних у sGTM.
Як надіслати дані з веб-сайту до серверного контейнера через Google Analytics 4
Крок 1. Створіть конфігураційну змінну для URL-адреси серверного контейнера. Для цього:
- Натисніть на меню Змінні.
- Натисніть Нова під панеллю Змінні, визначені користувачем.
- Натисніть на панель Конфігурація змінних.
- Виберіть тип Тег Google: Параметри конфігурації.
- Натисніть Додати параметр.
- Введіть такі параметри:
- Параметр конфігурації: server_container_url.
- Значення: URL-адреса вашого серверного контейнера Tag Manager.
- Дайте змінній описову назву та натисніть Зберегти.
Крок 2. Створіть тег Google Analytics 4:
- Натисніть на меню Теги.
- Натисніть Новий.
- Перейдіть на вкладку Конфігурація тегу.
- Виберіть Google Analytics → Google Tag.
- У полі Ідентифікатор тегу введіть ідентифікатор зі свого облікового запису GA4 (щоб його знайти, перейдіть у GA4 → натисніть Адміністратор → Потоки даних → виберіть потік → перегляньте Ідентифікатор вимірювання).
- У розділі Налаштування конфігурації виберіть змінну контейнера сервера, яку ви створили раніше.
- У розділі Тригери переконайтеся, що вибрано опцію Ініціалізація — тригер для всіх сторінок .
- Дайте тегу описову назву та натисніть Зберегти.
- Натисніть Опублікувати, щоб контейнер запрацював.
Крок 3. Далі розглянемо, як створити подію GA4, використовуючи як приклад подію Усі кліки:
- Натисніть на меню Теги.
- Натисніть Новий.
- Перейдіть на вкладку Конфігурація тегу.
- Виберіть Google Analytics → Google Analytics: Подія GA4.
- Введіть свій Ідентифікатор вимірювання (з меню Потоки даних GA4).
- Дайте події описову назву.
- Натисніть Тригери → Усі кліки.
- Дайте тегу описову назву.
- Натисніть Зберегти.
Налаштування відстеження конверсій на різних платформах
Далі вам потрібно налаштувати надсилання даних про події на вашу маркетингову/аналітичну платформу. Конкретні кроки залежатимуть від обраної вами платформи. Ознайомтеся з нашими посібниками щодо популярних платформ, щоб дізнатися більше:
Крок 4. Налаштуйте трекінг у серверному контейнері Google Tag Manager
Більшість популярних маркетингових та аналітичних інструментів уже підтримують сервер-сайд тегінг та мають готові теги для sGTM. На нашому сайті ви знайдете гайди з їх інтеграції: Facebook CAPI, TikTok Events API, Snapchat Conversions API, сервер-сайд трекінг для Google Ads тощо.
Крок 5. Перевірте конфігурацію застосунку
Налагодження завантаження GTM
Після активації або будь-яких змін рекомендується перевірити, чи дійсно ваш контейнер завантажено на сайт.
Для цього перейдіть на будь-яку сторінку свого сайту, відкрийте консоль браузера і на вкладці мережі відфільтруйте за URL вашого піддомену/сервера тегування. Ви маєте побачити запит, подібний до наведеного на скріншоті, зі статусом відповіді 200.
Налагодження подій data layer на сторінці чекауту
З подіями, які відбуваються до переходу на сторінку чекауту, все працює так само, як і на будь-якій іншій платформі — ви можете запустити режим попереднього перегляду вашого веб контейнера GTM і знайти всі дії, які ви виконуєте.
Події на сторінці оформлення замовлення не відображатимуться в GTM Preview через ізольоване середовище цих сторінок, яке блокує необмежені маніпуляції з DOM або додавання скриптів, зокрема сніпета GTM.
Проте ви можете вручну вставити сніпет на сторінку оформлення замовлення за допомогою розширення Chrome Stape GTM Helper:
- Після запуску режиму Preview у GTM увімкніть перемикач Shopify Sandbox dataLayer на вкладці Settings розширення.
- На вкладці 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. Спробуйте самі - ми знаємо, що ви не будете розчаровані!
Потрібна допомога з налаштування Shopify?
У нас є все, що вам потрібно! Натисніть Отримати допомогу, заповніть форму, і ми надішлемо вам пропозицію.
Коментарі