typescript - Google Analyticsin lisääminen suostumusmanagerin kanssa SvelteKit-verkkosivustolle


Minun täytyy lisätä Google Analytics SvelteKit-verkkosivustoon. Googlen ohjeiden mukaan alla oleva skripti tulisi lisätä <head>-tunnisteeseen, joten ajattelin, että voisin vain lisätä sen app.html-tiedostoon. Ongelma on se, että minun täytyy käyttää suostumustilaa (Consent Mode) noudattaakseni GDPR-säännöksiä. Tehdäkseni sen, minun täytyy pystyä lukemaan ja kirjoittamaan jonkinlaiseen muuttujaan, jotta analytiikka voidaan ottaa käyttöön ja poistaa käytöstä.

Siitä mitä voin päätellä, en pääse käsiksi mihinkään muuttujiiin <head>-tunnisteen sisältä. Yritin myös lisätä saman koodin <svelte:head>-tunnisteeseen tiedostossa __layout.svelte, mutta näyttää siltä, etten pääse käsiksi muuttujiiin sielläkään.

Suunnittelen seuraavani evästeiden suostumusta käyttämällä storea ja tallentavani sen arvon paikalliseen tallennustilaan, mutta olen myös avoin muille ratkaisuille.

Tässä on koodi, joka tulisi lisätä <head>-tunnisteeseen:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-H5XGB0JC8S"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-H5XGB0JC8S');
</script>

Tässä on koodi, joka on lisättävä analytiikan poistamiseksi käytöstä:

gtag('consent', 'default', {
  analytics_storage: 'denied',
  ad_storage: 'denied'
});

Ja tässä on koodi arvon päivittämiseen kutsuttaessa:

gtag('consent', 'update', {
  'ad_storage': 'granted'
});

Oletan, että viimeistä koodinpätkää pitäisi kutsua, kun hyväksy-painiketta painetaan, mutta jos kutsun gtag-funktiota mistä tahansa muualta kuin samasta paikasta kuin ensimmäinen koodinpätkä, saan varoituksen, joka sanoo, että funktiota ei ole määritelty.

Pitäisikö minun lisätä koodi johonkin muualle, vai pitäisikö se tehdä jollain muulla tavalla?

Ehkä minun pitäisi mainita, että käytän myös TypeScriptiä.