Fix gtm loading (#139)

* try to get GA env to load

* rollback to injection from the server hook

* remove dead code

src/app.html

@@ -12,6 +12,9 @@
 			) {
 				document.documentElement.classList.add("dark");
 			}
+
+			// For some reason, Sveltekit doesn't let us load env variables from .env here, so we load it from hooks.server.ts
+			window.gaId = "%gaId%";
 		</script>
 		%sveltekit.head%
 	</head>
@@ -20,9 +23,9 @@
 
 		<!-- Google Tag Manager -->
 		<script>
-			if ("%sveltekit.env.PUBLIC_GOOGLE_ANALYTICS_ID%") {
+			if (window.gaId) {
 				const script = document.createElement("script");
-				script.src = "https://www.googletagmanager.com/gtag/js?id=%sveltekit.env.PUBLIC_GOOGLE_ANALYTICS_ID%";
+				script.src = "https://www.googletagmanager.com/gtag/js?id=" + window.gaId;
 				script.async = true;
 				document.head.appendChild(script);
 
@@ -32,7 +35,7 @@
 				}
 				gtag("js", new Date());
 				/// ^ See https://developers.google.com/tag-platform/gtagjs/install
-				gtag("config", "%sveltekit.env.PUBLIC_GOOGLE_ANALYTICS_ID%");
+				gtag("config", window.gaId);
 				gtag("consent", "default", { ad_storage: "denied", analytics_storage: "denied" });
 				/// ^ See https://developers.google.com/tag-platform/gtagjs/reference#consent
 				/// TODO: ask the user for their consent and update this with gtag('consent', 'update')

src/hooks.server.ts

@@ -1,6 +1,7 @@
 import { dev } from "$app/environment";
 import { COOKIE_NAME } from "$env/static/private";
 import type { Handle } from "@sveltejs/kit";
+import { PUBLIC_GOOGLE_ANALYTICS_ID } from "$env/static/public";
 import { addYears } from "date-fns";
 
 export const handle: Handle = async ({ event, resolve }) => {
@@ -18,7 +19,19 @@ export const handle: Handle = async ({ event, resolve }) => {
 		expires: addYears(new Date(), 1),
 	});
 
-	const response = await resolve(event);
+	let replaced = false;
+
+	const response = await resolve(event, {
+		transformPageChunk: (chunk) => {
+			// For some reason, Sveltekit doesn't let us load env variables from .env in the app.html template
+			if (replaced || !chunk.html.includes("%gaId%")) {
+				return chunk.html;
+			}
+			replaced = true;
+
+			return chunk.html.replace("%gaId%", PUBLIC_GOOGLE_ANALYTICS_ID);
+		},
+	});
 
 	return response;
 };