typescript - Pridanie Google Analytics s manažérom súhlasov na webovú stránku SvelteKit


Potrebujem pridať Google Analytics na webovú stránku SvelteKit. Inštrukcie od Googlu uvádzajú, že nasledujúci skript by mal byť pridaný do značky <head>, takže som si myslel, že ho môžem jednoducho pridať do app.html. Problém je v tom, že musím používať Consent Mode, aby som dodržal predpisy GDPR. Aby som to mohol urobiť, potrebujem mať možnosť čítať a zapisovať do nejakej premennej na zapnutie a vypnutie analytiky.

Pokiaľ viem, nemôžem pristupovať k žiadnym premenným z vnútra značky <head>. Skúšal som tiež pridať ten istý kód do značky <svelte:head> v __layout.svelte, ale zdá sa, že tam tiež nemôžem pristupovať k premenným.

Plánujem sledovať súhlas s cookies pomocou úložiska a uchovávať túto hodnotu v lokálnom úložisku, ale som otvorený aj iným riešeniam.

Tu je kód, ktorý by mal byť pridaný do značky <head>:

<!-- 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>

Tu je kód, ktorý sa musí pridať na deaktiváciu analytiky:

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

A tu je kód na volanie na aktualizáciu hodnoty:

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

Predpokladám, že posledný úryvok kódu by sa mal volať, keď je stlačené tlačidlo prijatia, ale ak volám gtag odkiaľkoľvek inde než na tom istom mieste ako prvý úryvok kódu, dostanem upozornenie, že funkcia nie je definovaná.

Mal by som pridať kód niekde inde, alebo by sa to malo urobiť nejakým iným spôsobom?

Možno by som mal spomenúť, že používam aj TypeScript.