From 40184c35e92c6c58842a9ad3ecf5090eb03be944 Mon Sep 17 00:00:00 2001
From: Song Lim <songlim327@gmail.com>
Date: Thu, 15 Aug 2024 23:40:29 +0800
Subject: [PATCH] fix: ga4 not working

- passing env variable into script block of <svelte:head> have issue.
using onMount instead
---
 src/routes/+page.svelte | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 436b94f..f7538ff 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { toggleMode } from 'mode-watcher';
 	import { createQuery } from '@tanstack/svelte-query';
 	import { page } from '$app/stores';
@@ -73,6 +74,20 @@
 	const openLink = (url: string) => {
 		window.open(url, '_blank');
 	};
+
+	// Google tag (gtag.js), apparently have issue passing variable in <svelte:head> script block
+	onMount(() => {
+		const script = document.createElement('script');
+		script.innerHTML = `
+            window.dataLayer = window.dataLayer || [];
+            function gtag() { dataLayer.push(arguments); }
+            gtag('js', new Date());
+
+            gtag('config', '${PUBLIC_GA4}');
+        `;
+
+		document.head.appendChild(script);
+	});
 </script>
 
 <svelte:head>
@@ -92,15 +107,6 @@
 
 	<!-- Google tag (gtag.js) -->
 	<script async src={`https://www.googletagmanager.com/gtag/js?id=${PUBLIC_GA4}`}></script>
-	<script>
-		window.dataLayer = window.dataLayer || [];
-		function gtag() {
-			dataLayer.push(arguments);
-		}
-		gtag('js', new Date());
-
-		gtag('config', PUBLIC_GA4);
-	</script>
 
 	<title>{name}</title>
 	<meta name="description" content={description} />