Add: posthog session recordings

.env.example

@@ -5,4 +5,6 @@ PUBLIC_APPWRITE_ENDPOINT=http://localhost/v1
 PUBLIC_STRIPE_KEY=
 PUBLIC_GROWTH_ENDPOINT=
 PUBLIC_CONSOLE_EMAIL_VERIFICATION=false
-PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS=true
+PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS=true
+PUBLIC_POSTHOG_API_KEY=
+PUBLIC_POSTHOG_HOST=

package.json

@@ -43,6 +43,7 @@
         "nanoid": "^5.1.5",
         "nanotar": "^0.1.1",
         "plausible-tracker": "^0.3.9",
+        "posthog-js": "^1.312.0",
         "pretty-bytes": "^6.1.1",
         "prismjs": "^1.30.0",
         "remarkable": "^2.0.1",

src/lib/actions/analytics.ts

@@ -7,6 +7,7 @@ import { ENV, MODE, VARS, isCloud } from '$lib/system';
 import { AppwriteException } from '@appwrite.io/console';
 import { browser } from '$app/environment';
 import { getReferrerAndUtmSource, getTrackedQueryParams } from '$lib/helpers/utm';
+// import { posthog } from './posthog';
 
 function plausible(domain: string): AnalyticsPlugin {
     if (!browser) return { name: 'analytics-plugin-plausible' };
@@ -72,6 +73,9 @@ export function trackEvent(name: string, data: object = null): void {
     } else {
         analytics.track(name, { ...data, path });
         sendEventToGrowth(name, path, data);
+        /*if (posthog) {
+            posthog.capture(name, { ...data, path });
+        }*/
     }
 }
 

src/lib/actions/posthog.ts

@@ -0,0 +1,40 @@
+import posthog from 'posthog-js';
+import { browser } from '$app/environment';
+import { VARS, ENV } from '$lib/system';
+import type { Models } from '@appwrite.io/console';
+import { preferences } from '$lib/stores/preferences';
+
+const POSTHOG_PREFS_KEY = 'posthog_session_recorded';
+
+if (browser && VARS.POSTHOG_API_KEY && !ENV.DEV && !ENV.TEST) {
+    posthog.init(VARS.POSTHOG_API_KEY, {
+        api_host: VARS.POSTHOG_HOST,
+        person_profiles: 'identified_only',
+        capture_pageview: true,
+        capture_pageleave: true,
+        session_recording: {
+            recordCrossOriginIframes: false,
+            /*maskTextSelector: '.ph-no-capture'*/
+        },
+        autocapture: true,
+        disable_session_recording: !ENV.PROD
+    });
+}
+
+export async function initializeSessionRecording(user: Models.User<Models.Preferences>): Promise<void> {
+    if (!posthog) return;
+
+    const hasRecordedFirstSession = preferences.getKey(POSTHOG_PREFS_KEY, false);
+
+    if (!hasRecordedFirstSession) {
+        posthog.identify(user.$id, {
+            account_created: user.$createdAt
+        });
+        posthog.startSessionRecording();
+        await preferences.setKey(POSTHOG_PREFS_KEY, true);
+    } else {
+        posthog.stopSessionRecording();
+    }
+}
+
+export { posthog };

src/lib/system.ts

@@ -12,7 +12,9 @@ export const VARS = {
     GROWTH_ENDPOINT: env.PUBLIC_GROWTH_ENDPOINT ?? undefined,
     PUBLIC_STRIPE_KEY: env.PUBLIC_STRIPE_KEY ?? undefined,
     EMAIL_VERIFICATION: env.PUBLIC_CONSOLE_EMAIL_VERIFICATION === 'true',
-    MOCK_AI_SUGGESTIONS: (env.PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS ?? 'true') === 'true'
+    MOCK_AI_SUGGESTIONS: (env.PUBLIC_CONSOLE_MOCK_AI_SUGGESTIONS ?? 'true') === 'true',
+    POSTHOG_API_KEY: env.PUBLIC_POSTHOG_API_KEY ?? undefined,
+    POSTHOG_HOST: env.PUBLIC_POSTHOG_HOST ?? undefined
 };
 
 export const ENV = {

src/routes/(console)/+layout.svelte

@@ -40,6 +40,8 @@
     import MobileSupportModal from './wizard/support/mobileSupportModal.svelte';
     import { showSupportModal } from './wizard/support/store';
     import { activeHeaderAlert, consoleVariables } from './store';
+    import { user } from '$lib/stores/user';
+    import { initializeSessionRecording } from '$lib/actions/posthog';
 
     import { base } from '$app/paths';
     import { headerAlert } from '$lib/stores/headerAlert';
@@ -270,6 +272,10 @@
             $stripe = await loadStripe(VARS.PUBLIC_STRIPE_KEY);
             await checkForMissingPaymentMethod();
         }
+
+        if ($user && isCloud) {
+            await initializeSessionRecording($user);
+        }
     });
 
     function checkForFeedback(interval: number) {

src/routes/+layout.svelte

@@ -110,7 +110,7 @@
         }
     });
 
-    $: {
+    $effect(() => {
         if (browser) {
             const isCloudClass = isCloud ? 'is-cloud' : '';
 
@@ -137,7 +137,7 @@
                 document.body.classList.remove('no-transition');
             });
         }
-    }
+    });
 
     const preloadFonts = [
         base + '/fonts/inter/inter-v8-latin-600.woff2',