better logging

Author: sojs-coder

src/routes/+layout.svelte

@@ -1,37 +1,43 @@
 <script lang="ts">
     import { browser } from "$app/environment";
+    import { onMount } from "svelte";
 
     let { children } = $props();
 
     let ga4Codes = {
         "ccported.click": "G-ER9VZ5QL8K",
         "ccported.github.io": "G-ER9VZ5QL8K",
-        "localhost": null,
+        localhost: null,
     };
     let defaultGA4Code = "G-DJDL65P9Y4";
 
     let idToUse = $state(defaultGA4Code);
     let useGA4 = $state(false);
-    if (browser) {
-        let hostname = window.location.hostname;
-        console.log("[R][LAYOUT][BASE] Hostname:", hostname);
-        if (hostname in ga4Codes) {
-            const code = ga4Codes[hostname as keyof typeof ga4Codes];
-            if (code) {
-                idToUse = code;
-                useGA4 = true;
+
+    onMount(() => {
+        if (browser) {
+            let hostname = window.location.hostname;
+            console.log("[R][LAYOUT][BASE] Hostname:", hostname);
+            if (hostname in ga4Codes) {
+                const code = ga4Codes[hostname as keyof typeof ga4Codes];
+                console.log("[R][LAYOUT][BASE] GA4 Code:", code);
+                if (code) {
+                    idToUse = code;
+                    useGA4 = true;
+                } else {
+                    useGA4 = false;
+                }
             } else {
-                useGA4 = false;
+                idToUse = defaultGA4Code;
+                useGA4 = true;
             }
-        } else{
-            idToUse = defaultGA4Code;
-            useGA4 = true;
         }
-    }
+        console.log("[R][LAYOUT][BASE] Using GA4:", useGA4, "with ID:", idToUse);
+    });
 </script>
 
 <svelte:head>
-    <meta name = "use-ga4" content = {String(useGA4)} />
+    <meta name="use-ga4" content={String(useGA4)} />
     {#if useGA4}
         <script
             async