Merge pull request #1688 from appwrite/cta-experiment

update cta experiment
appwrite · Jan 23, 2025 · cf02a92 · cf02a92
2 parents 1f28168 + eafbe17
commit cf02a92
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 25 deletions.
diff --git a/src/lib/components/IsLoggedIn.svelte b/src/lib/components/IsLoggedIn.svelte
@@ -3,13 +3,16 @@
     import { classNames } from '$lib/utils/classnames';
     import { trackEvent } from '$lib/actions/analytics';
     import { browser } from '$app/environment';
+    import { page } from '$app/stores';
+
+    const ctaCopy = $page.data.ctaCopy;
 
     export let classes = '';
 
     const isLoggedIn = browser && 'loggedIn' in document.body.dataset;
 
     function getTrackingEventName() {
-        return browser ? (isLoggedIn ? 'Go to console' : 'Get started') : 'Get started';
+        return browser ? (isLoggedIn ? 'Go to console' : ctaCopy) : ctaCopy;
     }
 </script>
 
@@ -23,5 +26,5 @@
         })}
 >
     <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>
+    <span class="block group-[&[data-logged-in]]/body:hidden">{ctaCopy}</span>
 </a>
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
@@ -19,6 +19,9 @@
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
     import { trackEvent } from '$lib/actions/analytics';
     import MainNav from '$lib/components/MainNav.svelte';
+    import { page } from '$app/stores';
+
+    const ctaCopy = $page.data.ctaCopy;
 
     export let omitMainId = false;
     let theme: 'light' | 'dark' | null = 'dark';
@@ -164,7 +167,7 @@
         <div class="web-mobile-header-end">
             {#if !$isMobileNavOpen}
                 <a href={PUBLIC_APPWRITE_DASHBOARD} class="web-button">
-                    <span class="text">Get started</span>
+                    <span class="text">{ctaCopy}</span>
                 </a>
             {/if}
             <button

diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
@@ -1,6 +1,6 @@
 import crypto from 'node:crypto';
 
-import { getFeatureFlag } from '$lib/experiments';
+import { posthogServerClient } from '$lib/experiments';
 import { getAllChangelogEntries } from './changelog/utils';
 
 export const trailingSlash = 'never';
@@ -22,24 +22,14 @@ export const load = async ({ request, getClientAddress }) => {
     };
 
     const distinctId = generateDistinctId(fingerprintData);
-
-    const isStartBuilding = await getFeatureFlag<'cta-copy_ab-test'>(
-        'sticky-navigation_ab-test',
-        'start-building_variant',
-        distinctId
-    );
-
-    const isStartForFree = await getFeatureFlag<'cta-copy_ab-test'>(
-        'sticky-navigation_ab-test',
-        'start-for-free_variant',
-        distinctId
-    );
-
-    const ctaCopy = isStartBuilding
-        ? 'Start building'
-        : isStartForFree
-          ? 'Start for free'
-          : 'Get started';
+    const ctaVariant = await posthogServerClient?.getFeatureFlag('cta-copy_ab-test', distinctId);
+
+    const ctaCopy =
+        ctaVariant === 'start-building_variant'
+            ? 'Start building'
+            : ctaVariant === 'start-for-free_variant'
+              ? 'Start for free'
+              : 'Get started';
 
     return {
         ctaCopy,

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -17,11 +17,14 @@
     import Badge from '$lib/components/ui/Badge.svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import AppwriteIn100Seconds from '$lib/components/AppwriteIn100Seconds.svelte';
+    import { page } from '$app/stores';
 
     const title = 'Appwrite - Build like a team of hundreds';
     const description = DEFAULT_DESCRIPTION;
     const ogImage = `${DEFAULT_HOST}/images/open-graph/website.png`;
 
+    const ctaCopy = $page.data.ctaCopy;
+
     const infoBoxes: Array<{ label: string; description: string; icon: string }> = [
         {
             label: 'Self-Hosted',
@@ -153,7 +156,7 @@
                                         posthog: { name: 'get-started-btn_hero_click' }
                                     })}
                             >
-                                Get started
+                                {ctaCopy}
                             </a>
 
                             <AppwriteIn100Seconds />
@@ -309,10 +312,10 @@
                     </section>
                     <div class="mt-20 overflow-hidden">
                         <ul
-                            class="web-info-boxes text-sub-body divide-black/4 divide-x divide-y font-medium"
+                            class="web-info-boxes text-sub-body divide-x divide-y divide-black/4 font-medium"
                         >
                             {#each infoBoxes as box}
-                                <li class="border-black/4 relative p-8 last-of-type:border-r">
+                                <li class="relative border-black/4 p-8 last-of-type:border-r">
                                     <img src={box.icon} width="40" height="40" alt="" />
                                     <h3
                                         class="text-primary mt-4 flex flex-wrap items-baseline gap-3"