Інтеграція Google Tag Manager
Google Tag Manager (GTM) — система управління тегами, яка дозволяє додавати та редагувати код аналітики, пікселів та інших скриптів без змін кода сайту. Після встановлення GTM маркетологи самі додають GA4, Facebook Pixel, Яндекс.Метрику через інтерфейс.
Встановлення GTM
<!-- У <head>, якомога вище -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- Після відкривання <body> -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Data Layer — Передача даних з сайту в GTM
Data Layer — це масив подій. GTM читає його та на основі тригерів запускає теги:
window.dataLayer = window.dataLayer || [];
// Стандартна подія
dataLayer.push({
event: 'add_to_cart',
ecommerce: {
currency: 'RUB',
value: product.price,
items: [{ item_id: product.id, item_name: product.name, price: product.price }]
}
});
// Дані про користувача (при авторизації)
dataLayer.push({
event: 'login',
user_id: userId,
user_type: 'registered'
});
Для React/Next.js
// utils/gtm.ts
export const pushDataLayer = (data: Record<string, unknown>) => {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(data);
};
// У компоненті
pushDataLayer({
event: 'checkout_step',
checkout_step: 2,
checkout_option: 'delivery'
});
GTM Preview Mode — Налагодження
Перед публікацією тегів — GTM Preview Mode показує, які теги спрацювали на кожній події. Інструмент dataLayer у консолі DevTools також корисний:
// Переглянути всі події в консолі
window.dataLayer.forEach((event, i) => console.log(i, event));
Server-side GTM
Для GDPR-сумісності та точності даних — GTM Server-side Container. Теги виконуються на сервері, не в браузері. Дані про покупки не залежать від блокувальників реклами.
Час встановлення: 1 робочий день для базового встановлення з GA4, Метрикою та e-commerce подіями.