▲ PromNET

SÚGÓ › Felhő tárhely

Cookie-banner integráció a saját honlapodra

GDPR-megfelelő cookie-banner generálás, snippet-beillesztés, GA + Meta Pixel feltételes betöltés a felhasználói döntés alapján.

Ha a honlapod bármilyen analytics-et (Google Analytics, Meta Pixel, Hotjar, Plausible-account-szintű) vagy marketing-sütit használ, az EU GDPR és a magyar Eht. (Elektronikus Hírközlési Törvény) értelmében előzetes hozzájárulást kell kérned a látogatótól. Ezt egy cookie-banner-rel oldod meg. A PromNET ad hozzá egy generált bannert, amit egy <script>-tag-gel beágyazol — minden további (kategóriák, mentés, lokalizáció) a hátérben fut.

A magyar gyakorlatban (NAIH-állásfoglalások alapján) az alábbiak kötelezővé teszik:

  • Google Analytics (GA4 is) — analitikai süti, hozzájárulás-köteles
  • Meta Pixel (Facebook tracking) — marketing-süti, explicit opt-in
  • Hotjar / Microsoft Clarity — viselkedés-rögzítés, hozzájárulás kell
  • Egyedi A/B-teszt rendszerek — ha sütit állít, kell
  • Beágyazott YouTube / Vimeo (cookies-on default) — kell, vagy privacy-enhanced módot használj

Nem kell hozzájárulás:

  • Tisztán technikai sütik (login-session, kosár-tartalom, CSRF-token)
  • Plausible / Fathom szerver-oldali analytics süti nélkül (ezek a cookieless trackerek nem igényelnek bannert)

A PromNET cookie-banner alapból a technikai sütiket “always-on” kategóriába teszi (nem kell hozzá kattintás), és csak a hozzájárulás-köteleseket gyűjti a többi kategóriába.

  1. Lépj be a /app/cookie-banner oldalra
  2. Adj egy belső nevet (pl. eskuvo-hu-foaldal)
  3. Állítsd be a kategóriákat (lásd lejjebb)
  4. Színek és pozíció (alul középen / alul jobbra / banner-fej)
  5. Lokalizáció — hu, en, vagy mindkettő (auto-detect a böngésző-nyelv alapján)
  6. Kattints “Banner generálása”
  7. Másold ki a kapott <script> snippet-et

Embed-snippet beillesztése

A snippet kb. így néz ki:

<script src="https://promnet.hu/cdn/cookie-banner/cb_abc123.js" defer></script>

Ezt a </body> előtt illeszd be a HTML-fájlodba. NE a <head>-be — ott blokkolná az oldal-renderelést. A defer attribútum biztosítja, hogy a HTML után fut le.

Astro / Next.js / SvelteKit projekt

Helyezd el a globális layout-ban:

Astro (src/layouts/Base.astro):

<html>
  <body>
    <slot />
    <script src="https://promnet.hu/cdn/cookie-banner/cb_abc123.js" defer></script>
  </body>
</html>

Next.js (app/layout.tsx):

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://promnet.hu/cdn/cookie-banner/cb_abc123.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

WordPress

Kattints a “Megjelenés → Theme File Editor → footer.php” menüben, és illeszd be a snippet-et a </body> elé. Tipp: ha child-theme-et használsz, ott szerkeszd, hogy a fő-téma frissítése ne írja felül.

Vagy egy egyszerűbb módszer: a “Insert Headers and Footers” plugin Footer-mezőjébe másold be — minden oldalon megjelenik.

Wix / Squarespace

Beállítások → Egyedi kód (Custom Code) → Body End opció.

Kategóriák

A PromNET cookie-banner 3 alapkategóriát támogat:

Necessary (always-on)

Technikai sütik, amelyek a honlap alapvető működéséhez kellenek. Hozzájárulás-mentes — a banner csak tájékoztat róluk, kapcsolni nem lehet.

Tipikus tagjai: session-token, kosár-azonosító, nyelv-választás, CSRF-védelem.

Analytics

Látogatottság-mérő sütik — Google Analytics, Hotjar, Microsoft Clarity, saját analytics. Hozzájárulás-köteles, de “less invasive” — sokan opt-in-elnek.

Marketing

Cél-csoport követés és re-targeting — Meta Pixel, Google Ads, LinkedIn Insight Tag. Erre a felhasználók nagyobb arányban opt-out-olnak, és pont ezért kell külön kategória — ne kösd egybe az analytics-szel.

Custom kategóriák

A /app/cookie-banner oldalon tudsz plusz kategóriát felvenni (pl. personalization, social-embed). Ezek ugyanúgy window.promnetCookieConsent.<kategoria> flag-ben jelennek meg.

Feltételes loading — GA + Meta Pixel

Ez a kulcs-rész: a tracker-kódokat nem terhelheted be alapból a HTML-be, mert akkor a felhasználó döntése mielőtt sütit állítanak. Ehelyett a banner döntés után loadolod őket.

A snippet egy globális objektumot hoz létre:

window.promnetCookieConsent = {
  necessary: true,           // mindig
  analytics: true | false,   // user-döntés
  marketing: true | false,   // user-döntés
  decided_at: "2026-05-01T10:23:00Z",
};

És kibocsát egy promnet:consent-changed eventet, amikor a user dönt (vagy később módosít a banner újra-megnyitásával).

Google Analytics 4 — feltételes load

<script>
  function loadGA() {
    if (window.__gaLoaded) return;
    window.__gaLoaded = true;
    const s = document.createElement('script');
    s.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX';
    s.async = true;
    document.head.appendChild(s);
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    window.gtag = gtag;
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXX');
  }

  // Ha az oldal-betöltéskor már megvan a consent:
  if (window.promnetCookieConsent?.analytics === true) {
    loadGA();
  }

  // Ha később adod meg / módosítod:
  window.addEventListener('promnet:consent-changed', (e) => {
    if (e.detail.analytics === true) loadGA();
  });
</script>

Meta Pixel — feltételes load

<script>
  function loadMetaPixel() {
    if (window.__metaPixelLoaded) return;
    window.__metaPixelLoaded = true;

    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
      n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}
      (window, document,'script','https://connect.facebook.net/en_US/fbevents.js');

    fbq('init', 'XXXXXXXXXXXXXXX');
    fbq('track', 'PageView');
  }

  if (window.promnetCookieConsent?.marketing === true) {
    loadMetaPixel();
  }
  window.addEventListener('promnet:consent-changed', (e) => {
    if (e.detail.marketing === true) loadMetaPixel();
  });
</script>

Egyszerű ellenőrzés a console-ban

// Mit állított a felhasználó?
console.log(window.promnetCookieConsent);

// Manuális ellenőrzés egy konkrét kategóriára:
if (window.promnetCookieConsent?.analytics) {
  console.log('Analytics engedélyezve');
}

Lokalizáció (hu / en)

A banner a <html lang> attribútumot vagy a böngésző-nyelvet veszi alapul, és automatikusan a megfelelő nyelvre vált. A magyar és angol szöveg a /app/cookie-banner oldalon szerkeszthető — minden mező mellett egy nyelv-tab van.

Példa magyar / angol címek:

Mezőhuen
Cím”Sütiket használunk""We use cookies”
Leírás”Az oldalunk működéséhez…""We use cookies to…”
Elfogadás-gomb”Mindent elfogadok""Accept all”
Csak szükségesek”Csak a szükségeseket""Only necessary”
Beállítások”Beállítások""Customize”

Ha csak magyarul akarod megjeleníteni, az en szöveget hagyd üresen — a generált snippet automatikusan magyar fallback-et használ.

Hibaelhárítás

A banner nem jelenik meg

  1. Cache-tisztítás — a CDN-ben 1 óráig cache-elünk; egy ctrl+F5 frissít
  2. Console-ellenőrzés — Developer Tools → Console: ha látsz Failed to load promnet/cb_abc123.js hibát, a snippet URL hibás
  3. CSP (Content-Security-Policy) — ha van CSP-fejléced, engedélyezd: 
    script-src 'self' https://promnet.hu;
  4. Korábban már elfogadta — a banner alapból csak az első látogatáskor jelenik meg. Nyiss inkognitó-ablakot, vagy töröld a localStorage.promnetCookieConsent kulcsot

A banner megjelenik, de a tracker mégis sütit állít

Általában nem a banner hibája — a tracker-snippet-ed bele van fixen égetve a HTML-be, és a banner mellett párhuzamosan fut. Ellenőrizd, hogy a GA / Meta Pixel-snippet-et csak feltételesen loadolod (ld. fent), nem közvetlenül a <head>-be.

Nem mentődik el a döntés

A banner a localStorage-ot használja. Ha a böngésző Safari ITP / inkognitó-mód, csak session-szintű mentés — minden látogatáskor újra megjelenik. Ez nem hiba, hanem privacy-feature.

A felhasználó később módosítaná a döntését

A bannert újra meg lehet nyitni egy <a> link-kel:

<a href="#" onclick="window.promnetCookieBanner.open(); return false;">
  Cookie-beállítások
</a>

Ezt tipikusan a footer-be teszik “Cookie-beállítások” vagy “Sütik kezelése” néven.

GDPR-igazolás

A /app/cookie-banner oldalon a “Audit-log” tab mutatja:

  • Hány döntés érkezett az adott bannerről
  • A kategóriák szerinti opt-in arányok
  • A felhasználó IP-jét NEM tároljuk a döntéshez (privacy-by-design), csak egy aggregált statisztikát

Ha NAIH-vizsgálat esetén kell igazolás, ez a oldal és a generált banner-konfig (timestamp + szövegek) elegendő bizonyíték a “kértem hozzájárulást és tájékoztattam a felhasználót” claim-re.

Tipp — minimális verzió

Ha gyors megoldást akarsz, és nem akarsz GA-t / Meta Pixel-t használni: nézz rá a Plausible Analytics-ra (cookieless, így nem kell banner), vagy a PromNET saját analytics-ára (Sprint-26 körül érkezik). Ezek mellett egyáltalán nem kell foglalkoznod a banner-rel — viszont kompromisszum a feature-szám.

← Felhő tárhely Frissítve: 2026. 05. 01.