Google Tag Manager Integration
Google Tag Manager (GTM) is a tag management system that allows adding and editing analytics, pixels, and other scripts without modifying website code. After installing GTM, marketers can add GA4, Facebook Pixel, Yandex.Metrica via the interface.
GTM Installation
<!-- In <head>, as high as possible -->
<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>
<!-- After opening <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 — Sending Data from Site to GTM
Data Layer is an array of events. GTM reads it and triggers tags based on triggers:
window.dataLayer = window.dataLayer || [];
// Standard event
dataLayer.push({
event: 'add_to_cart',
ecommerce: {
currency: 'RUB',
value: product.price,
items: [{ item_id: product.id, item_name: product.name, price: product.price }]
}
});
// User data (on login)
dataLayer.push({
event: 'login',
user_id: userId,
user_type: 'registered'
});
For React/Next.js
// utils/gtm.ts
export const pushDataLayer = (data: Record<string, unknown>) => {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(data);
};
// In component
pushDataLayer({
event: 'checkout_step',
checkout_step: 2,
checkout_option: 'delivery'
});
GTM Preview Mode — Debugging
Before publishing tags, GTM Preview Mode shows which tags fired on each event. The dataLayer tool in DevTools console is also helpful:
// View all events in console
window.dataLayer.forEach((event, i) => console.log(i, event));
Server-side GTM
For GDPR compliance and data accuracy — use GTM Server-side Container. Tags execute on the server, not in the browser. Purchase data is not affected by ad blockers.
Setup time: 1 business day for basic setup with GA4, Metrica, and e-commerce events.