feat(posthog): integrate PostHog for analytics tracking in the application

The application now includes PostHog for tracking user interactions. This integration captures events such as quiz completions and shares, enhancing our ability to analyze user behavior. The addition of PostHog client setup allows for better monitoring and insights into user engagement, which is crucial for improving the overall user experience.

Author: ariel-frischer

package-lock.json

@@ -36,6 +36,8 @@
 	},
 	"dependencies": {
 		"@types/js-yaml": "^4.0.9",
-		"js-yaml": "^4.1.0"
+		"js-yaml": "^4.1.0",
+		"posthog-js": "^1.260.2",
+		"posthog-node": "^5.7.0"
 	}
 }

package.json

@@ -3,12 +3,28 @@
 	import { generateShareUrl, getShareText, shareLinks, copyToClipboard } from '$lib/utils/sharing';
 	import { quizStore } from '$lib/stores/quiz';
 	import { mbtiDescriptions, type MBTIType } from '$lib/data/mbti-descriptions';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import posthog from 'posthog-js';
 
 	export let language: Language;
 	export let onRestart: () => void;
 
 	let copied = false;
 
+	// Track when results page is reached
+	onMount(() => {
+		if (browser) {
+			posthog.capture('quiz_completed', {
+				language: language.name,
+				language_id: language.id,
+				mbti_type: $quizStore.mbtiType,
+				mbti_questions_answered: $quizStore.mbtiAnswers.length,
+				language_questions_answered: $quizStore.languageAnswers.length
+			});
+		}
+	});
+
 	$: shareUrl = generateShareUrl({
 		languageId: language.id,
 		mbtiType: $quizStore.mbtiType
@@ -20,12 +36,26 @@
 		if (success) {
 			copied = true;
 			setTimeout(() => (copied = false), 2000);
+			if (browser) {
+				posthog.capture('share_clicked', {
+					platform: 'copy_link',
+					language: language.name,
+					mbti_type: $quizStore.mbtiType
+				});
+			}
 		}
 	}
 
 	function handleShare(platform: keyof typeof shareLinks) {
 		const url = shareLinks[platform](shareUrl, shareText);
 		window.open(url, '_blank', 'width=600,height=400');
+		if (browser) {
+			posthog.capture('share_clicked', {
+				platform,
+				language: language.name,
+				mbti_type: $quizStore.mbtiType
+			});
+		}
 	}
 </script>
 

src/lib/components/Results.svelte

@@ -0,0 +1,13 @@
+import posthog, { PostHog } from 'posthog-node';
+import { PUBLIC_POSTHOG_KEY, PUBLIC_POSTHOG_HOST } from '$env/static/public';
+
+let _client: PostHog | null = null;
+
+export function getPostHogClient() {
+	if (!_client) {
+		_client = new posthog.PostHog(PUBLIC_POSTHOG_KEY, {
+			host: PUBLIC_POSTHOG_HOST
+		});
+	}
+	return _client;
+}

src/lib/server/posthog.ts

@@ -1,8 +1,16 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
 	import '../app.css';
+	import { browser } from '$app/environment';
+	import { beforeNavigate, afterNavigate } from '$app/navigation';
+	import posthog from 'posthog-js';
 
 	let { children } = $props();
+
+	if (browser) {
+		beforeNavigate(() => posthog.capture('$pageleave'));
+		afterNavigate(() => posthog.capture('$pageview'));
+	}
 </script>
 
 <svelte:head>

src/routes/+layout.svelte

@@ -1,2 +1,17 @@
+import posthog from 'posthog-js';
+import { browser } from '$app/environment';
+import { PUBLIC_POSTHOG_KEY, PUBLIC_POSTHOG_HOST } from '$env/static/public';
+
 export const prerender = true;
 export const ssr = false;
+
+export const load = async () => {
+	if (browser) {
+		posthog.init(PUBLIC_POSTHOG_KEY, {
+			api_host: PUBLIC_POSTHOG_HOST,
+			capture_pageview: false,
+			capture_pageleave: false,
+			capture_exceptions: true // This enables capturing exceptions using Error Tracking
+		});
+	}
+};

src/routes/+layout.ts

@@ -16,7 +16,8 @@ const config = {
 			strict: true
 		}),
 		paths: {
-			base: process.env.NODE_ENV === 'production' ? '/programming-personality' : ''
+			base: process.env.NODE_ENV === 'production' ? '/programming-personality' : '',
+			relative: false // Required for PostHog session replay to work correctly
 		}
 	}
 };