Merge pull request #20 from frc971/analytics

Add google analytics

package.json

@@ -32,7 +32,8 @@
 		"tailwindcss": "^3.4.0",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
-		"vite": "^5.0.12"
+		"vite": "^5.0.12",
+		"@types/gtag.js": "^0.0.18"
 	},
 	"type": "module",
 	"dependencies": {

src/app.d.ts

@@ -1,6 +1,10 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
+	declare interface Window {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		dataLayer: any;
+	}
 	namespace App {
 		// interface Error {}
 		// interface Locals {}

src/lib/components/Analytics.svelte

@@ -0,0 +1,62 @@
+<!-- TODO(max): Add functionality to report more things to gtag like user reports or other misc info. -->
+
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	export let id = import.meta.env.VITE_MEASUREMENT_ID;
+
+	$: {
+		if (
+			typeof gtag !== 'undefined' &&
+			typeof window !== 'undefined' &&
+			import.meta.env.PROD == true
+		) {
+			window.dataLayer = window.dataLayer || [];
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const gtag: any = function () {
+				window.dataLayer.push(arguments);
+			};
+
+			gtag('js', new Date());
+			gtag('config', id, {
+				page_title: document.title,
+				page_path: $page.url.pathname
+			});
+		}
+	}
+</script>
+
+<svelte:head>
+	<meta property="id" content={import.meta.env.VITE_MEASUREMENT_ID} />
+	<script async src={'https://www.googletagmanager.com/gtag/js?id=' + id}></script>
+	<script>
+		//https://stackoverflow.com/questions/10668292/is-there-a-setting-on-google-analytics-to-suppress-use-of-cookies-for-users-who
+
+		window.dataLayer = window.dataLayer || [];
+		function gtag() {
+			dataLayer.push(arguments);
+		}
+
+		if (localStorage.cookies_accepted != 'true') {
+			console.log('Consent NOT Granted');
+			gtag('consent', 'default', {
+				analytics_storage: 'denied',
+				personalization_storage: 'denied',
+				functionality_storage: 'denied',
+				security_storage: 'denied'
+			});
+		} else {
+			console.log('Consent Granted');
+			gtag('consent', 'default', {
+				analytics_storage: 'granted',
+				personalization_storage: 'granted',
+				functionality_storage: 'granted',
+				security_storage: 'granted'
+			});
+		}
+
+		gtag('js', new Date());
+		gtag('config', document.head.querySelector('[property~=id][content]').content);
+	</script>
+</svelte:head>

src/lib/components/CookieConsentBanner.svelte

@@ -27,6 +27,7 @@
 				class="bg-red-600 p-2 rounded-md"
 				on:click={() => {
 					visible = false;
+					cookies_accepted.set(false);
 				}}>Deny</button
 			>
 		</div>

src/routes/+layout.svelte

@@ -1,7 +1,10 @@
 <script>
 	import '../app.css';
+	import Analytics from '$lib/components/Analytics.svelte';
 </script>
 
+<Analytics />
+
 <nav
 	class="absolute top-0 p-2 w-full shadow-lg bg-gray-100 flex flex-1 flex-row space-x-4 justify-between pr-4 pl-4"
 >

svelte.config.js

@@ -17,7 +17,11 @@ const config = {
 		csp: {
 			mode: 'hash',
 			directives: {
-				'script-src': ['self']
+				'script-src': [
+					'self',
+					'https://www.googletagmanager.com',
+					'sha256-JamhpR7Q0uG1GWX4dSnTzLPgvjwSq5qkY01Boe+khAU='
+				]
 			}
 		}
 	}