Setup Posthog analytics

Author: techniq

packages/svelte-ux/package.json

@@ -60,6 +60,7 @@
     "date-fns": "^2.30.0",
     "immer": "^10.0.3",
     "lodash-es": "^4.17.21",
+    "posthog-js": "^1.95.1",
     "rehype-slug": "^6.0.0",
     "tailwind-merge": "^2.0.0",
     "zod": "^3.22.4"

packages/svelte-ux/src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+  import posthog from 'posthog-js';
   import 'prism-themes/themes/prism-vsc-dark-plus.css';
-  import { dev } from '$app/environment';
   import { mdiArrowTopRight, mdiGithub, mdiTwitter } from '@mdi/js';
 
   import AppBar from '$lib/components/AppBar.svelte';
@@ -9,7 +10,11 @@
   import Tooltip from '$lib/components/Tooltip.svelte';
   import NavMenu from './_NavMenu.svelte';
   import QuickSearch from '$lib/components/QuickSearch.svelte';
+
+  import { dev } from '$app/environment';
   import { afterNavigate, goto } from '$app/navigation';
+  import { page } from '$app/stores';
+
   import { settings } from '$lib';
 
   settings({
@@ -46,6 +51,34 @@
       };
     })
     .sort((a, b) => groups.indexOf(a.group) - groups.indexOf(b.group));
+
+  let currentPath = '';
+  onMount(() => {
+    // Posthog analytics
+    if (!dev) {
+      const unsubscribePage = page.subscribe(($page) => {
+        if (currentPath && currentPath !== $page.url.pathname) {
+          // Page navigated away
+          posthog.capture('$pageleave');
+        }
+        console.log('entering');
+        // Page entered
+        currentPath = $page.url.pathname;
+        posthog.capture('$pageview');
+      });
+
+      const handleBeforeUnload = () => {
+        // Hard reloads or browser exit
+        posthog.capture('$pageleave');
+      };
+      window.addEventListener('beforeunload', handleBeforeUnload);
+
+      return () => {
+        unsubscribePage();
+        window.removeEventListener('beforeunload', handleBeforeUnload);
+      };
+    }
+  });
 </script>
 
 <AppLayout>

packages/svelte-ux/src/routes/+layout.ts

@@ -1,2 +1,17 @@
+import posthog from 'posthog-js';
+
+import { browser, dev } from '$app/environment';
+
 // Disable server-side rendering until AppLayout shift is fixed (issue #22)
 export const ssr = false;
+
+export const load = async () => {
+  // Setup Posthog
+  if (browser && !dev) {
+    posthog.init('phc_F78mUWQpKPpsXS1mamJFzDWM8bivZrwIx4Nm1cI8BSb', {
+      api_host: 'https://app.posthog.com',
+      capture_pageview: false,
+      capture_pageleave: false,
+    });
+  }
+};