Kuidas lisada küpsiste bänner veebilehele nii, et analüütika ei läheks katki

Sage viga küpsiste bänneriga näeb välja nii. Bänner on lehel, külastaja näeb nuppe “Accept all” ja “Reject all”, aga Google Analytics on andmed juba ära saatnud. Enne, kui inimene midagi vajutas.

Kontrollisime seda testlehel. Kõigepealt panime oma bänneri Consent rea <head> algusesse. Selle alla lisasime testanalüütika sildi, kleebitud lehele nii, nagu see on. Bänner ilmus, aga analüütika päring läks kohe teele, ilma igasuguse valikuta.

Põhjus on lihtne: bänner ei saa peatada skripti, mis on juba lehel ja käivitub ise. Pärast nelja allolevat sammu juhib bänner teie silte päriselt. Miks nõusolekut üldse vaja on ja milline analüütika seda nõuab, kirjutasime artiklis ELi reeglitest küpsiste bänneritele.

Samm 1. Pange kirja kõik sildid

Enne kui midagi lisate, koostage nimekiri kõigest, mida teie leht laadib:

• analüütika: Google Analytics, Microsoft Clarity ja sarnased tööriistad;
• reklaam: Google Ads, Meta Pixel, LinkedIn ja muud pikslid;
• Google Tag Manager, kui ülejäänu on ühendatud selle kaudu;
• vestlusaknad, YouTube’i videod, kaardid.

Vaadake üle ka oma platvormi seaded. Analüütikat ühendatakse sageli mitte koodiga, vaid lehe ehitaja seadete välja või pluginaga. Ka selline silt jõuab lehele ja bänner ei tea sellest.

Samm 2. Pange bänneri rida <head> algusesse

Bänner peab käivituma enne kõiki teisi skripte. Ainult nii saab ta silte kinni hoida, kuni külastaja valib. Consentis on see üks rida vahekaardilt Install:

<script src="https://fewbase.com/consent/s/TEIE-ID.js"></script>

Ärge lisage sellele async ega defer. Nende atribuutidega võib brauser rea käivitada hiljem kui teised sildid.

Kuhu see eri platvormidel lisada.

Next.js

Next.js-i dokumentatsioon soovitab nõusolekuhalduritele komponenti Script strateegiaga beforeInteractive (nextjs.org). Kontrollisime, mis praktikas juhtub (Next.js 16.4.3, React 19.3.1). Selline skript jõuab <head> sisse ainult eellaadimisena ja Next.js käivitab selle hiljem. Meie testis käivitus otse <head> sisse kirjutatud silt enne bännerit.

Töökindlam on tavaline silt juurpaigutuse (root layout) <head> sees, enne teie teisi skripte:

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <script src="https://fewbase.com/consent/s/TEIE-ID.js"></script>
      </head>
      <body>{children}</body>
    </html>
  );
}

Valmis HTML-is on see tavaline <script src> ilma async ja defer atribuudita ning meie testis käivitus see esimesena.

Tilda

Kõigi lehtede koodi lisate saidi seadetes: Site Settings, siis More, siis HTML code for the head section. Pärast seda avaldage lehed uuesti, muidu kood ei ilmu (Tilda abi).

Webflow

Avage Site settings, vahekaart Custom code, jaotis Head code ja vajutage Save changes. Kood hakkab tööle alles pärast saidi avaldamist. Oma koodi väli on olemas Core, Growth, Agency või Freelancer Workspace’i või aktiivse Site plan’iga (Webflow abi).

Samas artiklis soovitab Webflow lisada <head> skriptidele async või defer, et lehed laadiksid kiiremini. Bänneri rida on erand: jätke see ilma nende atribuutideta.

WordPress

WordPressis endas pole välja koodi jaoks <head> sees. Skripte väljastatakse konksuga wp_head või lisatakse wp_enqueue_scripts kaudu (WordPressi dokumentatsioon), tavaliselt alamteemas või väikeses pluginas. Alates versioonist 6.3 on wp_enqueue_script funktsioonil parameeter strategy väärtustega defer ja async (dokumentatsioon). Bänneri rea jaoks ärge seda määrake.

Samm 3. Andke sildid bänneri hallata

Nüüd andke iga silt oma nimekirjast bännerile. Selleks on kaks võimalust.

Eemaldage kood ja lisage ID

Populaarsete teenuste puhul on see kõige lihtsam. Eemaldage nende kood lehtedelt ja lisage nende ID vahekaardil Connectors: Google Tag Manager, Google Analytics 4, Google Ads, Meta Pixel ja Microsoft Clarity. Bänner laadib iga teenuse pärast seda, kui külastaja lubab selle kategooria.

Märgistage silt

Kui kood peab jääma HTML-i, muutke sildi tüübiks text/plain ja lisage kategooria:

<!-- enne: käivitub kohe -->
<script src="/tracker.js"></script>

<!-- pärast: ootab külastaja valikut -->
<script type="text/plain" data-category="analytics" src="/tracker.js"></script>

Brauser ei käivita skripti, mille tüüp on text/plain. Bänner käivitab selle pärast seda, kui külastaja lubab analüütika. Samamoodi töötavad lehe sisse kirjutatud skriptid. Videote ja kaartide puhul <iframe> sees viige aadress src alt data-src alla ja lisage data-category.

Samal testlehel märgistatud sildiga ei läinud enne valikut teele ühtegi päringut.

Kui kasutate Google Tag Managerit

Tag Manageriga kasutatakse Google’i nõusolekurežiimi (Consent Mode). Bänner seab kõigepealt nõusoleku vaikeoleku, enne kõiki silte. Selleks on Tag Manageris päästik Consent Initialization. Pärast külastaja valikut annab bänner edasi uuendatud oleku (Google). Google’i siltidel on nõusoleku kontroll sisse ehitatud. Teistele siltidele saab Tag Manageris lisakontrolli sisse lülitada (Tag Manageri abi).

Consent Mode’il on kaks versiooni. Põhiversioonis ei laadita Google’i silte enne, kui külastaja nõusoleku annab. Täiustatud versioonis laaditakse need kohe ja keeldumise korral saadavad need Google’ile päringuid ilma küpsisteta (Google; Analyticsi abi).

Consentisse on nõusolekurežiim sisse ehitatud. Tag Manager laaditakse pärast mis tahes valikut, ka pärast “Reject all”, sest edasi kontrollib ta nõusolekut iga sildi jaoks ise.

Kui Meta Pixel on teie koodis

Kui piksel jääb koodi, on Metal oma viis: kutsuge fbq('consent', 'revoke') enne fbq('init') igal lehel ja pärast nõusolekut kutsuge fbq('consent', 'grant') (Meta dokumentatsioon). Lihtsam on anda piksel bännerile ID järgi, nagu sammus 3.

Samm 4. Kontrollige, et see töötab

Avage oma leht Chrome’is uues inkognito aknas. Pärast inkognito seansi lõppu ei säilita Chrome saitide andmeid (Chrome’i abi), nii et uues seansis näete bännerit nagu uus külastaja.

1. Avage DevTools, minge paneelile Network, lülitage sisse Preserve log, et päringud lehe uuesti laadimisel kaduma ei läheks, ja Disable cache (Chrome DevTools).
2. Laadige leht uuesti ja otsige filtriga, kuni bänner on ekraanil, päringuid analüütika ja reklaami teenustele. Neid ei tohi olla.
3. Jaotises Application, Storage, Cookies ei tohi olla analüütika küpsiseid, näiteks _ga (Chrome DevTools).
4. Vajutage “Reject all”: päringuid ikka pole.
5. Avage uus inkognito aken ja vajutage “Accept all”: nüüd päringud lähevad.

Consentis on veel üks kontroll: pärast esimest valikut teie lehel näitab vahekaart Install olekut “Working”, viimase nõusoleku aega ja domeeni, kust see tuli.

Kontroll-loend

• Kõik sildid on kirjas, ka need, mis on lisatud platvormi seadetes.
• Bänneri rida on <head> alguses, ilma async ja defer atribuudita.
• Iga silt on kas ühendatud bänneri kaudu ID järgi või märgistatud type="text/plain" ja data-category abil.
• Videod ja kaardid <iframe> sees on märgistatud data-src abil.
• Inkognito aknas pole enne valikut analüütika päringuid ega küpsiseid nagu _ga.
• Pärast “Reject all” päringuid pole, pärast “Accept all” need lähevad.

Mida Consent ei tee: see ei skanni teie lehte ega leia silte ise. Silt, mida te ei ühendanud ega märgistanud, töötab nagu varem. Seepärast on sammud 1 ja 4 kõige olulisemad.

Alustada saab tasuta.