Ugrás a fő tartalomhoz

Klaro! + Google Consent Mode v2 integrációs dokumentáció

Cél: GDPR kompatibilis cookie-hozzájárulási rendszer létrehozása, amely megfelel a Google Consent Mode v2 követelményeinek is.

1. Alkalmazott technológia​

  • Klaro! – open source cookie consent manager
  • Google Consent Mode v2 – 2024-től kötelező a Google Analytics / Ads használatához
  • Manuális integráció gtag() hívásokkal

2. Weboldalon használt szolgáltatások​

  • Google Analytics (GA4)
  • YouTube videó beágyazások
  • Facebook Pixel

3. Betöltési sorrend a <head>-ben​

<!-- Google Consent Mode alap beállítás -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  gtag('consent', 'default', {
    ad_storage: 'denied',
    analytics_storage: 'denied',
    wait_for_update: 500
  });
</script>

<!-- Google Analytics gtag -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Megjegyzés: A Klaro csak akkor frissíti a hozzájárulási állapotot, ha a user elfogadja a sütiket.

var klaroConfig = {
  version: 1,
  lang: 'hu',
  cookieName: 'klaro',
  htmlTexts: true,
  mustConsent: false,

  translations: {
    hu: {
      consentModal: {
        title: 'Sütikezelési beállítások',
        description: 'Ez a weboldal sütiket használ a működéshez, statisztikákhoz és marketinghez.'
      },
      purposes: {
        analytics: 'Statisztika',
        marketing: 'Marketing'
      },
      purposeItem: {
        service: 'szolgáltatás',
        services: 'szolgáltatások'
      },
      ok: 'Elfogadom',
      acceptAll: 'Mindet elfogadom',
      decline: 'Elutasítom'
    }
  },

  services: [
    {
      name: 'google-analytics',
      title: 'Google Analytics',
      purposes: ['analytics'],
      default: false,
      onlyOnce: true,
      callback: function(consent) {
        if (typeof gtag === 'function') {
          gtag('consent', 'update', {
            analytics_storage: consent ? 'granted' : 'denied'
          });
        }
      }
    },
    {
      name: 'youtube',
      title: 'YouTube videók',
      purposes: ['analytics'],
      default: false,
      onlyOnce: true,
      callback: function(consent) {
        if (typeof gtag === 'function') {
          gtag('consent', 'update', {
            analytics_storage: consent ? 'granted' : 'denied'
          });
        }
      }
    },
    {
      name: 'facebook',
      title: 'Facebook Pixel',
      purposes: ['marketing'],
      default: false,
      onlyOnce: true,
      callback: function(consent) {
        if (typeof gtag === 'function') {
          gtag('consent', 'update', {
            ad_storage: consent ? 'granted' : 'denied'
          });
        }
      }
    }
  ]
};

5. Klaro betöltés (footerben v. head végén):​

<script defer src="https://cdn.jsdelivr.net/npm/klaro/dist/klaro.min.js"></script>

6. Visszahívható beállítás gomb​

<button onclick="klaro.show()" style="position:fixed;bottom:20px;right:20px;background:#4bb1e0;color:#fff;padding:0.5em 1em;border-radius:30px;border:none;cursor:pointer;z-index:9999;">
  Sütibeállítások
</button>

7. Fontos!​

  • NE töltsd be automatikusan a Google Analyticset (pl. GTM-ből, pluginból), csak ha a hozzájárulás megvan.
  • Klaro nem tárolja a hozzájárulást 3rd party helyen, csak a saját domaineden cookie formájában (pl. klaro).
  • Az onlyOnce: true megakadályozza a többszörös callback hívást.

8. Források​