fix: google analytics with sveltekit

Author: Vonter

package.json

@@ -17,6 +17,7 @@
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.4",
     "@tsconfig/svelte": "^5.0.4",
+    "@types/gtag.js": "^0.0.20",
     "@types/topojson-client": "^3.1.5",
     "@typescript-eslint/parser": "^8.18.2",
     "autoprefixer": "^10.4.20",
@@ -45,7 +46,6 @@
     "maplibre-gl": "^4.7.1",
     "polygon-lookup": "^2.6.0",
     "svelte-i18n": "^4.0.1",
-    "svelte-use-click-outside": "^1.0.0",
-    "vite-plugin-radar": "^0.9.6"
+    "svelte-use-click-outside": "^1.0.0"
   }
 }

pnpm-lock.yaml

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { page } from '$app/stores'
+
+  const GA_ID = import.meta.env.VITE_GOOGLE_ANALYTICS_ID
+
+  $: {
+    if (typeof gtag !== 'undefined') {
+      gtag('config', GA_ID, {
+        page_title: document.title,
+        page_path: $page.url.pathname,
+      })
+    }
+  }
+</script>
+
+<svelte:head>
+  <script
+    async
+    src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}>
+  </script>
+  <script>
+    window.dataLayer = window.dataLayer || []
+
+    function gtag() {
+      dataLayer.push(arguments)
+    }
+
+    gtag('js', new Date())
+    gtag('config', GA_ID)
+  </script>
+</svelte:head>

src/components/Analytics.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
   import '../app.css';
   import 'maplibre-gl/dist/maplibre-gl.css';
+  import Analytics from '../components/Analytics.svelte';
   import SEO from '../components/SEO.svelte';
+
+  const hasAnalytics = Boolean(import.meta.env['VITE_GOOGLE_ANALYTICS_ID']);
 </script>
 
+{#if hasAnalytics}
+  <Analytics />
+{/if}
 <SEO />
 <slot />

src/routes/+layout.svelte

@@ -1,6 +1,5 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig, loadEnv } from 'vite';
-import radar from 'vite-plugin-radar';
 import postcss from './postcss.config.js';
 
 export default ({ mode }) => {
@@ -9,12 +8,7 @@ export default ({ mode }) => {
   return defineConfig({
     css: { postcss },
     plugins: [
-      sveltekit(),
-      radar({
-        analytics: {
-          id: process.env.VITE_GOOGLE_ANALYTICS_ID
-        }
-      })
+      sveltekit()
     ]
   });
 };