feat: telemetry consent modal

Co-authored-by: oSumAtrIX <johan.melkonyan1@web.de>
Co-authored-by: afn <hey@afn.lol>

src/lib/components/Dialogue.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { quadInOut } from 'svelte/easing';
+	import { disableScrollHandling } from '$app/navigation';
 	export let modalOpen = false;
 	export let fullscreen = false;
+	export let notDismissible = false;
 
 	let element: HTMLDivElement;
 	let y = 0;
@@ -15,8 +17,12 @@
 {#if modalOpen}
 	<div
 		class="overlay"
-		on:click={() => (modalOpen = !modalOpen)}
-		on:keypress={() => (modalOpen = !modalOpen)}
+		on:click={() => {
+			if (!notDismissible) modalOpen = !modalOpen;
+		}}
+		on:keypress={() => {
+			if (!notDismissible) modalOpen = !modalOpen;
+		}}
 		transition:fade={{ easing: quadInOut, duration: 150 }}
 	/>
 

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import { writable } from 'svelte/store';
 	// There might be a better place to put this, but I am not entirely sure...
 	export const isRestoring = writable(false);
+	declare const telemetryInit: () => void;
 </script>
 
 <script lang="ts">
@@ -18,6 +19,8 @@
 
 	import NavHost from '$layout/Navbar/NavHost.svelte';
 	import Spinner from '$lib/components/Spinner.svelte';
+	import Dialogue from '$lib/components/Dialogue.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import { staleTime } from '$data/api';
 	import RouterEvents from '$data/RouterEvents';
 
@@ -30,7 +33,22 @@
 		}
 	});
 
+	let askCookieConsent = false;
+
+	// store a cookie to remember the user's preference
+	function setPrivacySetting(allowTelemetry: boolean) {
+		localStorage.setItem('allowTelemetry', allowTelemetry.toString());
+		askCookieConsent = false;
+		if (typeof telemetryInit !== 'undefined') {
+			telemetryInit();
+		}
+	}
+
 	onMount(() => {
+		if (!localStorage.getItem('allowTelemetry')) {
+			askCookieConsent = true;
+		}
+
 		isRestoring.set(true);
 		const [unsubscribe, promise] = persistQueryClient({
 			queryClient,
@@ -71,25 +89,56 @@
 		})(window, document, 'script', 'dataLayer', 'GTM-MQ6K849');
 	</script>
 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-PLH0N9VQL5"></script>
+	<!-- Sometimes you don't want telemetry -->
 	<script>
 		window.dataLayer = window.dataLayer || [];
+
 		function gtag() {
 			dataLayer.push(arguments);
 		}
-		gtag('js', new Date());
-		gtag('config', 'G-PLH0N9VQL5');
-	</script>
-	<script type="text/javascript">
-	    (function(c,l,a,r,i,t,y){
-		c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-		t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-		y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-	    })(window, document, "clarity", "script", "hfh8dhfgus");
+
+		function runClarity(c, l, a, r, i, t, y) {
+			c[a] =
+				c[a] ||
+				function () {
+					(c[a].q = c[a].q || []).push(arguments);
+				};
+			t = l.createElement(r);
+			t.async = 1;
+			t.src = 'https://www.clarity.ms/tag/' + i;
+			y = l.getElementsByTagName(r)[0];
+			y.parentNode.insertBefore(t, y);
+		}
+
+		function telemetryInit() {
+			allowTelemetry = (localStorage.getItem('allowTelemetry') === 'true');
+			if (!allowTelemetry) {
+				gtag('set', 'allow_google_signals', false);
+				return;
+			}
+			gtag('js', new Date());
+			gtag('config', 'G-PLH0N9VQL5');
+			runClarity(window, document, 'clarity', 'script', 'hfh8dhfgus');
+		}
+
+		telemetryInit();
 	</script>
 </svelte:head>
 
 <QueryClientProvider client={queryClient}>
 	<NavHost />
+	<!-- if cookie consent hasn't been set -->
+	<Dialogue bind:modalOpen={askCookieConsent} notDismissible>
+		<svelte:fragment slot="title">It's your choice</svelte:fragment>
+		<svelte:fragment slot="description">
+			This site uses analytics to understand better how you use it. Opting in is
+			optional and won't impact your experience.
+		</svelte:fragment>
+		<svelte:fragment slot="buttons">
+			<Button type="text" on:click={() => setPrivacySetting(false)}>Disallow all</Button>
+			<Button type="text" on:click={() => setPrivacySetting(true)}>Accept</Button>
+		</svelte:fragment>
+	</Dialogue>
 
 	{#if $show_loading_animation}
 		<Spinner />