update events

Author: thejessewinton

src/lib/components/appwrite-network/map-nav.svelte

@@ -3,6 +3,7 @@
     import type { IconType } from '../ui';
     import Icon from '../ui/icon/icon.svelte';
     import { classNames } from '$lib/utils/classnames';
+    import { trackEvent } from '$lib/actions/analytics';
 
     const {
         onValueChange,
@@ -67,6 +68,9 @@
                         'group data-[state="active"]:bg-accent/4 data-[state="active"]:border-accent/36 data-[state="active"]:text-accent'
                     )}
                     style="animation-delay:{index * 75}ms;"
+                    onclick={() => {
+                        trackEvent(`network-map-nav-${value}-click`);
+                    }}
                 >
                     <Icon
                         name={icon}

src/routes/(marketing)/(components)/features.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
     import Icon from '$lib/components/ui/icon';
 
     const features = [
@@ -73,6 +74,9 @@
                 <a
                     class="text-sub-body group relative border-b border-dashed border-black/8 px-4 py-8 font-medium last-of-type:border-0 nth-of-type-[4]:border-r-0 nth-of-type-[7]:border-b-0 max-lg:even:border-r-0 md:border-r lg:nth-of-type-[5]:border-b-0 lg:nth-of-type-[6]:border-b-0 lg:nth-of-type-[8]:border-b-0"
                     href={box.href}
+                    onclick={() => {
+                        trackEvent(`feature-${box.label.toLowerCase().replace(' ', '-')}-click`);
+                    }}
                 >
                     <img loading="lazy" src={box.icon} width="40" height="40" alt="" />
                     <h3 class="text-primary mt-4 flex flex-wrap items-center gap-0.5">

src/routes/(marketing)/(components)/hero.svelte

@@ -45,7 +45,7 @@
                     href={PUBLIC_APPWRITE_DASHBOARD}
                     class="w-full! lg:w-fit!"
                     onclick={() => {
-                        trackEvent(`hero-start-building-click`);
+                        trackEvent(`main-get_started_btn_hero-click`);
                     }}>Start building for free</Button
                 >
                 <AppwriteIn100Seconds />

src/routes/(marketing)/(components)/pricing.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { trackEvent } from '$lib/actions/analytics';
     import Noise from '$lib/components/fancy/noise.svelte';
     import { Button } from '$lib/components/ui';
     import { classNames } from '$lib/utils/classnames';
@@ -10,30 +11,35 @@
         description: string;
         tag?: string;
         subtitle?: string;
+        event: string;
     }> = [
         {
             name: 'Free',
             price: '$0',
-            description: 'For personal hobby projects and students.'
+            description: 'For personal hobby projects and students.',
+            event: 'home-pricing-cards-free-click'
         },
         {
             name: 'Pro',
             price: '$15',
             tag: 'Popular',
             description: 'For pro developers and teams that need to scale their products.',
-            subtitle: 'per member/month'
+            subtitle: 'per member/month',
+            event: 'home-pricing-cards-pro-click'
         },
         {
             name: 'Scale',
             price: '$599',
             description: 'For teams and products that need more control and support.',
-            subtitle: 'per organization/month'
+            subtitle: 'per organization/month',
+            event: 'home-pricing-cards-scale-click'
         },
         {
             name: 'Enterprise',
             price: 'Custom',
             description: 'For enterprises that need more power and premium support.',
-            subtitle: 'per organization/month'
+            subtitle: 'per organization/month',
+            event: 'home-pricing-cards-enterprise-click'
         }
     ];
 </script>
@@ -58,19 +64,28 @@
             </h2>
 
             <div class="mt-4 flex flex-col gap-2 lg:flex-row">
-                <Button href={getAppwriteDashboardUrl()} class="w-full! md:w-fit!"
-                    >Start building for free</Button
+                <Button
+                    href={getAppwriteDashboardUrl()}
+                    class="w-full! md:w-fit!"
+                    onclick={() => {
+                        trackEvent(`pricing-get-started-click`);
+                    }}>Start building for free</Button
                 >
-                <Button href="/pricing" class="w-full! md:w-fit!" variant="secondary"
-                    >View pricing plans</Button
+                <Button
+                    onclick={() => {
+                        trackEvent(`pricing-view-plans-click`);
+                    }}
+                    href="/pricing"
+                    class="w-full! md:w-fit!"
+                    variant="secondary">View pricing plans</Button
                 >
             </div>
         </div>
 
         <div
             class="border-smooth divide-smooth grid min-h-75 w-full grid-cols-1 divide-y divide-dashed rounded-3xl border bg-white/2 backdrop-blur-lg md:grid-cols-2 md:gap-y-12 md:divide-y-0 md:px-4 md:py-8 lg:grid-cols-4 lg:divide-x"
         >
-            {#each plans as { name, price, tag: label, subtitle, description }}
+            {#each plans as { name, price, tag: label, subtitle, description, event }}
                 {@const isEnterprise = name === 'Enterprise'}
                 <div class="flex h-full w-full grow flex-col gap-1 px-5 py-5 md:pb-0">
                     <div class="flex items-center gap-2.5">
@@ -96,7 +111,9 @@
                         class="mt-8 mb-0 w-full!"
                         variant={name === 'Pro' ? 'primary' : 'secondary'}
                         href={isEnterprise ? '/contact-us/enterprise' : getAppwriteDashboardUrl()}
-                        >{isEnterprise ? 'Contact us' : 'Start building'}</Button
+                        onclick={() => {
+                            trackEvent(event);
+                        }}>{isEnterprise ? 'Contact us' : 'Start building'}</Button
                     >
                 </div>
             {/each}