fix: Only load GTM when consent is given & use reactivity instead of reloading the site

This commit is contained in:
oSumAtrIX 2024-11-29 23:24:39 +01:00
parent 582d51e394
commit 504a670e4e
No known key found for this signature in database
GPG Key ID: A9B3094ACDB604B4
2 changed files with 38 additions and 30 deletions

View File

@ -23,14 +23,4 @@
<body> <body>
<div>%sveltekit.body%</div> <div>%sveltekit.body%</div>
</body> </body>
<!-- Google Tag Manager (noscript) -->
<!-- TODO: Is this allowed to be present, even when consent to collect data is not given? -->
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-MQ6K849"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe>
</noscript>
</html> </html>

View File

@ -34,21 +34,25 @@
}); });
let showConsentModal = false; let showConsentModal = false;
let allowAnalytics = false;
function rememberChoice(allow: boolean) { function rememberChoice(allow: boolean) {
localStorage.setItem('analytics', allow.toString()); localStorage.setItem('analytics', allow.toString());
showConsentModal = false; showConsentModal = false;
allowAnalytics = allow;
if (allow) location.reload();
} }
onMount(() => { onMount(() => {
new DateTriggerEventHandler(themeEvents); new DateTriggerEventHandler(themeEvents);
// Check if the user has already decided. // Check if the user has already decided.
// Check if the user has already decided
const hasDecided = localStorage.getItem('analytics') !== null; const hasDecided = localStorage.getItem('analytics') !== null;
if (!hasDecided) showConsentModal = true; if (hasDecided) {
allowAnalytics = localStorage.getItem('analytics') === 'true';
} else {
showConsentModal = true;
}
isRestoring.set(true); isRestoring.set(true);
const [unsubscribe, promise] = persistQueryClient({ const [unsubscribe, promise] = persistQueryClient({
@ -76,6 +80,7 @@
</script> </script>
<svelte:head> <svelte:head>
{#if allowAnalytics}
<!-- Google Tag Manager --> <!-- Google Tag Manager -->
<script> <script>
allowAnalytics = localStorage.getItem('analytics') === 'true'; allowAnalytics = localStorage.getItem('analytics') === 'true';
@ -92,6 +97,7 @@
})(window, document, 'script', 'dataLayer', 'GTM-MQ6K849'); })(window, document, 'script', 'dataLayer', 'GTM-MQ6K849');
} }
</script> </script>
{/if}
</svelte:head> </svelte:head>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
@ -117,3 +123,15 @@
</div> </div>
<!-- <Footer> --> <!-- <Footer> -->
</QueryClientProvider> </QueryClientProvider>
{#if allowAnalytics}
<!-- Google Tag Manager (noscript) -->
<noscript>
<!-- svelte-ignore a11y-missing-attribute -->
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-MQ6K849"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe>
</noscript>
{/if}