Google Consent Mode v2

<ConsentMode /> välittää kävijän valinnan Google-tageille (GA4, Google Ads, Google Tag Manager) Consent Mode v2 -signaaleina. Se asettaa oletuksen, jossa kaikki on denied, ennen kuin yksikään Google-tagi suoritetaan, ja lähettää sitten consent update -päivityksen aina, kun kävijä tekee valinnan – sekä jokaisella myöhemmällä sivunlatauksella, kun valinta on kerran tehty.

Kaikki neljä v2:n suostumustyyppiä ovat mukana: ad_storage, ad_user_data, ad_personalization ja analytics_storage.

Saatavilla versiosta 1.0.0 alkaen.

Käyttöönotto

Renderöi <ConsentMode /> <head>-osioon ennen kaikkia Googlen koodinpätkiä. Consent Mode vaatii, että oletus asetetaan ennen kuin Google-tagi latautuu, ja siksi se on erillinen komponentti eikä osa <ConsentBanner />-komponenttia (joka renderöidään <body>-osioon):

---
import ConsentBanner from 'astro-cookie-consent/ConsentBanner.astro';
import ConsentMode from 'astro-cookie-consent/ConsentMode.astro';
---

<html>
  <head>
    <ConsentMode
      mapping={{
        analytics: ['analytics_storage'],
        marketing: ['ad_storage', 'ad_user_data', 'ad_personalization'],
      }}
    />
    <!-- Google snippet goes after this -->
  </head>
  <body>
    <slot />
    <ConsentBanner
      privacyHref="/privacy"
      categories={[
        { id: 'analytics', label: 'Analytics' },
        { id: 'marketing', label: 'Marketing' },
      ]}
    />
  </body>
</html>

Kategorioiden liittäminen suostumustyyppeihin

mapping yhdistää bannerisi kategoriatunnisteet niihin Consent Mode -tyyppeihin, jotka ne myöntävät. Tyyppi on granted, jos mikä tahansa hyväksytty kategoria on liitetty siihen, muuten denied.

Pelkän hyväksy/hylkää-bannerin kanssa (ilman categories-propsia) jätä mapping pois. Oletusarvo saa tämän yhden valinnan ohjaamaan kaikkia neljää tyyppiä:

<ConsentMode />

Google-tagin lataaminen

Googlen tagin voi ladata <ConsentMode />-komponentin kanssa kahdella tavalla.

Perustila (suositeltu)

Lataa Google-tagi vasta suostumuksen jälkeen gateScript()-funktiolla. Mitään ei lähetetä Googlelle ennen kuin kävijä hyväksyy:

<script is:inline>
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>
<script>
  import { gateScript } from 'astro-cookie-consent';

  gateScript({
    src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX',
    category: 'analytics',
  });
</script>

<ConsentMode /> määrittää window.gtag-funktion, joten jonoon asetetut js- ja config-kutsut käsitellään heti, kun gtag.js latautuu.

Edistynyt tila

Lataa Googlen vakiokoodinpätkä (tai GTM:n) ilman estoa <ConsentMode />-komponentin jälkeen. Kun suostumus on evätty, Google-tagit lähettävät evästeettömiä pingejä, joiden avulla Google voi mallintaa enemmän tietojasi.

Google Tag Manager lukee samaa dataLayer-tietokerrosta, joten sen sisäänrakennetut suostumustarkistukset toimivat kummassakin tilassa.

Propsit

Propsi	Oletus	Kuvaus
`mapping`	`{ all: [all 4 types] }`	Kategoriatunniste → Consent Mode -tyypit, jotka se myöntää.
`expiryDays`	`365`	Täytyy vastata `<ConsentBanner expiryDays>` -arvoa.
`waitForUpdate`	`500`	Millisekunnit, jotka Google-tagit odottavat päivitystä ennen suoritusta.
`adsDataRedaction`	`false`	Peittää mainosten klikkaustunnisteet, kun `ad_storage` on evätty.
`urlPassthrough`	`false`	Välittää mainosklikkausten tiedot URL-osoitteissa, kun evästeet on evätty.
`region`	(kaikkialla)	ISO 3166-2 -koodit, joihin evätty oletus pätee, esim. vain ETA-maat.

Toiminnan tarkistaminen

Avaa sivustosi selaimen kehittäjätyökaluilla ja kirjoita konsoliin dataLayer. Ennen valintaa näet consent / default -merkinnän, jossa jokainen liitetty tyyppi on denied. Kun olet hyväksynyt tai hylännyt bannerissa, sen perään tulee consent / update -merkintä uudella tilalla. Googlen Tag Assistant näyttää samat signaalit tagikohtaisesti.