Google Tag Manager (GTM)

Sebesség

Minden tag egy külső script. Tíz tag tíz kapcsolat, tíz letöltés, tíz futtatás a fő szálon. A GTM-ből betöltött kódok a leggyakoribb okai a magas TBT és gyenge INP értéknek a mért oldalakon. A PageSpeed Insights jellemzően third-party scriptként jelöli meg őket.

Jogi megfelelés

A GTM a leggyakoribb belépési pontja a hozzájárulás nélkül futó tracking-kódoknak. A süti-hozzájárulás csak akkor ér valamit, ha a GTM tényleg vár rá. Ha nem vár, a bannered díszlet, a NAIH szempontjából pedig a sütik jogalap nélkül kerültek ki.

Adatminőség

Rossz trigger-beállítás mellett duplán számolódnak az események. A riportokban gyakori, hogy a GA4 kódja ott van a sablonban is és a GTM-ben is. Ilyenkor a session-számok és a konverziók egyaránt torzak, és a hirdetési döntések hibás adatra épülnek.

Biztonság

A GTM-be publikálási joggal bárki tud tetszőleges JavaScriptet tenni az oldaladra. Ez egy valódi támadási felület. Szigorú CSP mellett a Custom HTML tagek egyébként is el fognak akadni.

• Minden oldal, ahol mérés van: marketing-site, blog, szolgáltatásoldal, webshop. Ha GA4-et, hirdetési pixelt vagy hőtérképet használsz, a GTM releváns.
• Webshopok: itt a legnagyobb a tét, mert e-commerce események (view_item, add_to_cart, purchase) futnak rajta. Ezek adják a WooCommerce, Shopify, Unas és Shoprenter boltok bevételi riportjait.
• EU-s látogatókat kiszolgáló oldalak: a hozzájárulás-kezelés nem opcionális.

Kevésbé vagy nem vonatkozik:

• Staging és fejlesztői környezet: ott a GTM-nek jellemzően nem is kellene futnia, vagy külön konténerrel.
• Belső admin felületek: mérésre nincs szükség, a konténer csak lassít.
• Teljesen statikus, mérés nélküli oldalak: egy egyoldalas névjegynél a GTM felesleges réteg, a GA4 közvetlen beillesztése egyszerűbb.

1. Nyisd meg az oldalt, és a forráskódban keress rá a GTM- sztringre. A konténer-ID formátuma GTM-XXXXXXX. Parancssorból: curl -s https://pelda.hu | grep -o 'GTM-[A-Z0-9]*'.
2. Ellenőrizd a snippet helyét. A JS-blokk a <head> elején legyen, a <noscript> rész közvetlenül a <body> nyitótag után.
3. Nyisd meg a böngésző devtools konzolját, és írd be: dataLayer. Ha tömböt kapsz vissza objektumokkal, a réteg él.
4. A Network fülön szűrj a gtm.js névre. Nézd meg, mekkora, és milyen további kéréseket indít.
5. Töltsd újra az oldalt úgy, hogy a sütibannert NEM fogadod el. Az Application fülön nézd meg a sütiket és a Network fülön a kimenő kéréseket.
6. Kapcsold be a GTM Preview módot (Tag Assistant). Végigkattintva látod, melyik tag mikor sül el.
7. Futtass egy PageSpeed Insights mérést, és nézd meg a "Reduce the impact of third-party code" szakaszt.

Jó jel

• Egy konténer, egy ID, egy helyen beillesztve.
• Hozzájárulás előtt nincs _ga, _fbp vagy _gcl_au süti.
• A gtm.js alatt kevés, célzott tag fut.
• A dataLayer push-ok beszédes, dokumentált eseményneveket használnak.

Rossz jel

• Két-három konténer-ID ugyanazon az oldalon.
• A GA4 mérőkódja a sablonban is és a GTM-ben is szerepel.
• Elfogadás előtt megjelennek a tracking-sütik.
• Sok Custom HTML tag, amiben ismeretlen eredetű script van.
• A konténerben olyan tag van, amit senki nem tud megmagyarázni.

WordPress

1. Válassz EGY beillesztési módot: dedikált GTM-plugin vagy a sablon header.php fájlja. Ne mindkettőt.
2. Ha SEO- vagy mérő-plugin (például egy GA4-integráció) is betesz mérőkódot, kapcsold ki ott, és hagyd meg csak a GTM-ben.
3. Nézd át a cache-plugin script-optimalizáló beállításait. A gtm.js halasztása megzavarhatja a consent-logikát.
4. WooCommerce esetén használj olyan megoldást, ami szabványos e-commerce dataLayer push-okat generál.

Shopify

1. A konténert a theme.liquid fájlba tedd, vagy használd a Customer Events (Web Pixels) felületet.
2. A checkout oldalakon csak a Customer Events API-n keresztül tudsz mérni. A régi additional scripts mezőre ne építs.
3. A Shopify saját GA4- és Meta-integrációját kapcsold ki, ha ugyanazt a GTM-ből is küldöd.

Unas

1. A konténer-kódot a Marketing vagy Külső kódok menüpontban helyezd el, a megfelelő pozícióban.
2. Az Unas beépített GA4- és Pixel-mezőit ürítsd ki, ha a GTM-ből is mérsz.
3. Ellenőrizd a rendelés-visszaigazoló oldalt: a tranzakciós adatnak ott kell a dataLayerbe kerülnie.

Shoprenter

1. A Külső kódok vagy HTML-beszúrás felületen tedd be a konténert fej- és törzs-pozícióba.
2. A beépített marketing-integrációkat és a GTM tageket ne futtasd párhuzamosan.
3. Teszteld a kosár- és pénztár-lépéseket Preview módban.

Egyedi fejlesztés

1. A snippetet a base layout template-be tedd, ne oldalanként.
2. A dataLayer tömböt a GTM-snippet ELŐTT deklaráld és töltsd fel a szerveroldali adatokkal.
3. Állítsd be a Consent Mode alapértelmezett állapotát denied értékre, még a konténer betöltése előtt.
4. Ha van CSP, vedd fel a szükséges forrásokat, vagy használj nonce-alapú megoldást a GTM-hez.
5. Vezess be verziókezelést: minden GTM-publikálásnak legyen leírása és felelőse.

Minden platformon

1. Tag-leltár: listázd ki az összes tagot, és töröld, amit fél éve senki nem használ.
2. Kösd a marketing-tageket consent-feltételhez.
3. Publikálás után ellenőrizd élesben, sütiket és kéréseket is.

• Dupla mérőkód: a GA4 a sablonban és a GTM-ben is fut, ezért a session- és konverziószámok duplázódnak.
• Több konténer egy oldalon: az ügynökség és a fejlesztő is beteszi a sajátját, senki nem tudja, melyik mit csinál.
• Consent nélküli tüzelés: a marketing-tagek a banner megjelenése előtt lefutnak, így a hozzájárulás csak formalitás.
• Snippet rossz helyen: a <body> végére tett konténer miatt az első kattintások és a korai események elvesznek.
• dataLayer a snippet után: a push-ok a konténer inicializálása előtt tűnnek el, így az e-commerce események üresek.
• Tag-szemét: régi kampányok pixeljei évekig futnak, lassítanak, és fölösleges adatot küldenek külső szolgáltatóknak.
• Tesztelés nélküli publikálás: a Preview mód kihagyása miatt a hiba az éles forgalmon derül ki.

A konténer-snippet helyes elhelyezése, a dataLayer inicializálásával és a Consent Mode alapállapotával:

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="utf-8">
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('consent', 'default', {
      'ad_storage': 'denied',
      'analytics_storage': 'denied',
      'ad_user_data': 'denied',
      'ad_personalization': 'denied',
      'wait_for_update': 500
    });
  </script>
  <!-- Google Tag Manager -->
  <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>
  <!-- End Google Tag Manager -->
</head>
<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
</body>
</html>

A sorrend számít: a consent alapállapot és a dataLayer deklaráció a GTM-snippet ELŐTT van.

Egy tipikus e-commerce push, amit a GTM triggerként használ:

{
  "event": "add_to_cart",
  "ecommerce": {
    "currency": "HUF",
    "value": 12990,
    "items": [
      {
        "item_id": "SKU-1042",
        "item_name": "Kerti szék",
        "price": 12990,
        "quantity": 1
      }
    ]
  }
}

Gyors ellenőrzés parancssorból, hogy hány konténer-ID van az oldalon:

curl -s https://pelda.hu | grep -o 'GTM-[A-Z0-9]\{5,8\}' | sort -u

Ha egynél több sort kapsz vissza, több konténer fut párhuzamosan.