Интеграция 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 событиями.