Merge pull request #1608 from appwrite/tracking-snippet

thejessewinton · web-flow · commit 294bbe2cb762 · 2025-01-07T12:54:47.000-05:00
add basic events autocapture
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "dependencies": {
         "@sentry/sveltekit": "^8.38.0",
         "h3": "^1.13.0",
+        "posthog-js": "^1.204.0",
         "sharp": "^0.33.5"
     },
     "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -2,6 +2,7 @@ import { Analytics, type AnalyticsPlugin } from 'analytics';
 import Plausible from 'plausible-tracker';
 import { get } from 'svelte/store';
 import { page } from '$app/stores';
+import posthogEvent from 'posthog-js';
 
 import { ENV } from '$lib/system';
 import { browser } from '$app/environment';
@@ -54,7 +55,10 @@ const analytics = Analytics({
     plugins: [plausible('appwrite.io')]
 });
 
-export const trackEvent = async (name: string, data: object = {}) => {
+export const trackEvent = async (platforms: {
+    plausible?: { name: string; data?: object };
+    posthog?: { name: string };
+}) => {
     if (!isTrackingAllowed()) {
         return;
     }
@@ -63,9 +67,15 @@ export const trackEvent = async (name: string, data: object = {}) => {
     const path = currentPage.route.id ?? '';
 
     if (ENV.DEV || ENV.PREVIEW) {
-        console.log(`[Analytics] Event ${name} ${path}`, data);
+        console.log(`[Analytics] Event`, platforms.plausible, platforms.posthog);
     } else {
-        await analytics.track(name, { ...data, path });
+        if (platforms.plausible) {
+            await analytics.track(plausible.name, { ...platforms.plausible.data, path });
+        }
+
+        if (platforms.posthog) {
+            posthogEvent.capture(platforms.posthog.name);
+        }
     }
 };
 
diff --git a/src/lib/components/AppwriteIn100Seconds.svelte b/src/lib/components/AppwriteIn100Seconds.svelte
@@ -17,7 +17,10 @@
 <button
     on:click={() => {
         show = true;
-        trackEvent('Appwrite in 100 seconds');
+        trackEvent({
+            plausible: { name: 'Appwrite in 100 seconds' },
+            posthog: { name: 'intro-video-btn_hero_click' }
+        });
     }}
     class="web-button is-secondary cursor-pointer"
 >
diff --git a/src/lib/components/IsLoggedIn.svelte b/src/lib/components/IsLoggedIn.svelte
@@ -6,21 +6,21 @@
 
     export let classes = '';
 
+    const isLoggedIn = browser && 'loggedIn' in document.body.dataset;
+
     function getTrackingEventName() {
-        return browser
-            ? 'loggedIn' in document.body.dataset
-                ? 'Go to console'
-                : 'Get started'
-            : 'Get started';
+        return browser ? (isLoggedIn ? 'Go to console' : 'Get started') : 'Get started';
     }
 </script>
 
 <a
     class={classNames('web-button web-u-inline-width-100-percent-mobile', classes)}
     href={PUBLIC_APPWRITE_DASHBOARD}
-    on:click={() => {
-        trackEvent(`${getTrackingEventName()} in header`);
-    }}
+    on:click={() =>
+        trackEvent({
+            plausible: { name: `${getTrackingEventName()} in header` },
+            ...(isLoggedIn ? {} : { posthog: { name: 'get-started-btn_nav_click' } })
+        })}
 >
     <span class="hidden group-[&[data-logged-in]]/body:block">Go to Console</span>
     <span class="block group-[&[data-logged-in]]/body:hidden">Get started</span>
diff --git a/src/lib/components/PreFooter.svelte b/src/lib/components/PreFooter.svelte
@@ -19,7 +19,7 @@
         <a
             href={PUBLIC_APPWRITE_DASHBOARD}
             class="web-button is-transparent web-self-center"
-            on:click={() => trackEvent('Get started in pre footer')}
+            on:click={() => trackEvent({ plausible: { name: 'Get started in pre footer' } })}
         >
             <span class="text">Get started</span>
         </a>
@@ -47,7 +47,12 @@
                     <a
                         href={`${PUBLIC_APPWRITE_DASHBOARD}/register`}
                         class="web-button is-secondary is-full-width-mobile web-u-cross-child-end"
-                        on:click={() => trackEvent('Get started Free plan')}
+                        on:click={() =>
+                            trackEvent({
+                                plausible: {
+                                    name: 'Get started Free plan'
+                                }
+                            })}
                     >
                         <span class="text">Get started</span>
                     </a>
@@ -68,7 +73,12 @@
                         class="web-button is-full-width-mobile web-u-cross-child-end"
                         target="_blank"
                         rel="noopener noreferrer"
-                        on:click={() => trackEvent('Get started Pro plan')}
+                        on:click={() =>
+                            trackEvent({
+                                plausible: {
+                                    name: 'Get started Pro plan'
+                                }
+                            })}
                     >
                         <!-- <span class="text">Start trial</span> -->
                         <span class="text">Start building</span>
diff --git a/src/lib/components/ProductsSubmenu.svelte b/src/lib/components/ProductsSubmenu.svelte
@@ -121,7 +121,12 @@
                         <a
                             href={product.href}
                             use:melt={$item}
-                            on:click={() => trackEvent(`${product.name} in products submenu`)}
+                            on:click={() =>
+                                trackEvent({
+                                    plausible: {
+                                        name: `${product.name} in products submenu`
+                                    }
+                                })}
                             class="group flex gap-3 rounded-xl p-1 text-white outline-none transition-colors focus:bg-white/8"
                         >
                             <div
diff --git a/src/lib/components/Technologies.svelte b/src/lib/components/Technologies.svelte
@@ -75,7 +75,7 @@
                 <a
                     href={platform.href}
                     class="web-icon-button web-box-icon has-border-gradient"
-                    on:click={() => trackEvent(`${platform.name} clicked`)}
+                    on:click={() => trackEvent({ plausible: { name: `${platform.name} clicked` } })}
                 >
                     <img
                         src={platform.image}
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
@@ -23,10 +23,29 @@
     import InitBanner from '$lib/components/InitBanner.svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import MainNav, { type NavLink } from '$lib/components/MainNav.svelte';
+    import posthog from 'posthog-js';
 
     export let omitMainId = false;
     let theme: 'light' | 'dark' | null = 'dark';
 
+    // posthog
+    let isHeaderExperiment: boolean = false;
+    let mounted: boolean = false;
+
+    onMount(async () => {
+        if (posthog) {
+            if (posthog.getFeatureFlag('sticky-navigation_ab-test') === 'control') {
+                isHeaderExperiment = false;
+            }
+
+            if (posthog.getFeatureFlag('sticky-navigation_ab-test') === 'sticky-nav') {
+                isHeaderExperiment = true;
+            }
+
+            mounted = true;
+        }
+    });
+
     function setupThemeObserver() {
         const handleVisibility = () => {
             theme = getVisibleTheme();
@@ -97,7 +116,7 @@
         return setupThemeObserver();
     });
 
-    let navLinks: NavLink[] = [
+    let navLinks: Array<NavLink> = [
         {
             label: 'Products',
             submenu: ProductsSubmenu,
@@ -249,7 +268,11 @@
                     target="_blank"
                     rel="noopener noreferrer"
                     class="web-button is-text web-u-inline-width-100-percent-mobile"
-                    on:click={() => trackEvent('Star on GitHub in header')}
+                    on:click={() =>
+                        trackEvent({
+                            plausible: { name: 'Star on GitHub in header' },
+                            posthog: { name: 'github-stars_nav_click' }
+                        })}
                 >
                     <span class="web-icon-star" aria-hidden="true" />
                     <span class="text">Star on GitHub</span>
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -0,0 +1,21 @@
+import { getAllChangelogEntries } from './changelog/utils';
+import { browser } from '$app/environment';
+import posthog from 'posthog-js';
+import { PUBLIC_POSTHOG_API_KEY } from '$env/static/public';
+
+export const prerender = true;
+export const trailingSlash = 'never';
+
+export const load = async () => {
+    if (browser) {
+        posthog.init(PUBLIC_POSTHOG_API_KEY, {
+            api_host: 'https://eu.i.posthog.com',
+            person_profiles: 'identified_only',
+            persistence: 'memory'
+        });
+    }
+
+    return {
+        changelogEntries: (await getAllChangelogEntries()).length
+    };
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -123,13 +123,12 @@
                     <a
                         href="/blog/post/introducing-database-backups"
                         class="web-hero-banner-button mb-4"
-                        on:click={() => trackEvent('Banner button click')}
+                        on:click={() => trackEvent({ plausible: { name: 'Banner button click' } })}
                     >
                         <span class="web-icon-star shrink-0" aria-hidden="true" />
                         <span class="text-caption shrink-0 font-medium">New</span>
                         <div class="web-hero-banner-button-sep" />
                         <span class="text-caption web-u-trim-1">Introducing Database Backups</span>
-
                         <span class="web-icon-arrow-right shrink-0" aria-hidden="true" />
                     </a>
                     <Hero>
@@ -148,7 +147,11 @@
                             <a
                                 href={PUBLIC_APPWRITE_DASHBOARD}
                                 class="web-button w-full lg:w-fit"
-                                on:click={() => trackEvent('Get started in hero')}
+                                on:click={() =>
+                                    trackEvent({
+                                        plausible: { name: 'Get started in hero' },
+                                        posthog: { name: 'get-started-btn_hero_click' }
+                                    })}
                             >
                                 Get started
                             </a>
@@ -159,7 +162,7 @@
                 </section>
             </div>
             <div class="mb-12 lg:my-[7.5rem]">
-                <section class="container web-u-padding-block-0" style="--container-size:78.75rem">
+                <section class="web-u-padding-block-0 container" style="--container-size:78.75rem">
                     <div class="web-media-container">
                         <img
                             class="block"
@@ -457,7 +460,8 @@
                         <a
                             href="/docs/sdks"
                             class="web-button is-secondary"
-                            on:click={() => trackEvent('Explore all SDKs')}>Explore all SDKs</a
+                            on:click={() => trackEvent({ plausible: { name: 'Explore all SDKs' } })}
+                            >Explore all SDKs</a
                         >
                     </section>
                 </div>
diff --git a/src/routes/products/auth/(components)/SSR.svelte b/src/routes/products/auth/(components)/SSR.svelte
@@ -159,7 +159,8 @@ async function getLoggedInUser(request) {
                             <a
                                 href={platform.href}
                                 class="platform flex size-14 items-center justify-center rounded-lg bg-white p-2"
-                                on:click={() => trackEvent(`${platform.name} clicked`)}
+                                on:click={() =>
+                                    trackEvent({ plausible: { name: `${platform.name} clicked` } })}
                             >
                                 <img
                                     src={platform.image}

Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@`
`75`	`75`	`<a`
`76`	`76`	`href={platform.href}`
`77`	`77`	`class="web-icon-button web-box-icon has-border-gradient"`
`78`		- on:click={() => trackEvent(`${platform.name} clicked`)}
	`78`	+ on:click={() => trackEvent({ plausible: { name: `${platform.name} clicked` } })}
`79`	`79`	`>`
`80`	`80`	`<img`
`81`	`81`	`src={platform.image}`