chore: add product links ga events

apps/www/components/Features/index.tsx

@@ -1,12 +1,46 @@
-import { Button, Badge, IconArrowRight } from 'ui'
-import SectionHeader from 'components/UI/SectionHeader'
+import { Badge } from 'ui'
 import Solutions from 'data/Solutions.json'
-import Link from 'next/link'
+import useGoogleAnalyticsProps from '~/hooks/useGoogleAnalyticsProps'
+import Telemetry from '~/lib/telemetry'
+import gaEvents from '~/lib/gaEvents'
 import SectionContainer from '../Layouts/SectionContainer'
 import ProductIcon from '../ProductIcon'
 import TextLink from '../TextLink'
 
 const Features = () => {
+  const googleAnalyticsProps = useGoogleAnalyticsProps()
+
+  const sendTelemetryEvent = async (product: any) => {
+    switch (product) {
+      case 'Database':
+        return await Telemetry.sendEvent(
+          gaEvents['www_hp_subhero_products_database'],
+          googleAnalyticsProps
+        )
+      case 'Authentication':
+        return await Telemetry.sendEvent(
+          gaEvents['www_hp_subhero_products_auth'],
+          googleAnalyticsProps
+        )
+      case 'Storage':
+        return await Telemetry.sendEvent(
+          gaEvents['www_hp_subhero_products_storage'],
+          googleAnalyticsProps
+        )
+      case 'Edge Functions':
+        console.log('edge!!')
+        return await Telemetry.sendEvent(
+          gaEvents['www_hp_subhero_products_edgeFunctions'],
+          googleAnalyticsProps
+        )
+      case 'Realtime':
+        return await Telemetry.sendEvent(
+          gaEvents['www_hp_subhero_products_realtime'],
+          googleAnalyticsProps
+        )
+    }
+  }
+
   const IconSections = Object.values(Solutions).map((solution: any) => {
     const { name, description, icon, label, url } = solution
     if (solution.name === 'Realtime') return null
@@ -24,7 +58,13 @@ const Features = () => {
             <Badge dot>{label}</Badge>
           </div>
         )}
-        {url && <TextLink label={label ? 'Get notified' : 'Learn more'} url={url} />}
+        {url && (
+          <TextLink
+            label={label ? 'Get notified' : 'Learn more'}
+            url={url}
+            onClick={() => sendTelemetryEvent(name)}
+          />
+        )}
       </div>
     )
   })

apps/www/components/Hero.tsx

@@ -1,17 +1,17 @@
 import { Button, IconBookOpen } from 'ui'
 import { useRouter } from 'next/router'
+import Link from 'next/link'
 import SectionContainer from './Layouts/SectionContainer'
 import Telemetry, { GoogleAnalyticsEvent } from '~/lib/telemetry'
 import gaEvents from '~/lib/gaEvents'
 import useGoogleAnalyticsProps from '~/hooks/useGoogleAnalyticsProps'
 
 const Hero = () => {
-  const router = useRouter()
+  const { basePath } = useRouter()
   const googleAnalyticsProps = useGoogleAnalyticsProps()
 
-  const trackAndNavigate = async (url: string, event: GoogleAnalyticsEvent) => {
+  const sendTelemetryEvent = async (event: GoogleAnalyticsEvent) => {
     await Telemetry.sendEvent(event, googleAnalyticsProps)
-    router.push(url)
   }
 
   return (
@@ -47,28 +47,22 @@ const Hero = () => {
                       </div>
                     </div>
                     <div className="flex items-center gap-2">
-                      <Button
-                        size="small"
-                        className="text-white"
-                        onClick={() =>
-                          trackAndNavigate(
-                            'https://app.supabase.com',
-                            gaEvents['www_hp_hero_startProject']
-                          )
-                        }
-                      >
-                        Start your project
-                      </Button>
-                      <Button
-                        size="small"
-                        type="default"
-                        icon={<IconBookOpen />}
-                        onClick={() =>
-                          trackAndNavigate('/docs', gaEvents['www_hp_hero_documentation'])
-                        }
-                      >
-                        Documentation
-                      </Button>
+                      <Link href="https://app.supabase.com" as="https://app.supabase.com" passHref>
+                        <a onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_startProject'])}>
+                          <Button size="small" className="text-white">
+                            Start your project
+                          </Button>
+                        </a>
+                      </Link>
+                      <Link href="'/docs'" as="'/docs'" passHref>
+                        <a
+                          onClick={() => sendTelemetryEvent(gaEvents['www_hp_hero_documentation'])}
+                        >
+                          <Button size="small" type="default" icon={<IconBookOpen />}>
+                            Documentation
+                          </Button>
+                        </a>
+                      </Link>
                     </div>
                     <div className="flex flex-col gap-4">
                       <small className="small text-xs">backed by</small>
@@ -76,22 +70,22 @@ const Hero = () => {
                         <div className="flex flex-wrap items-center justify-start gap-y-8 sm:flex-nowrap">
                           <img
                             className="h-8 pr-5 sm:h-8 md:pr-10"
-                            src={`${router.basePath}/images/logos/yc--grey.png`}
+                            src={`${basePath}/images/logos/yc--grey.png`}
                             alt="Y Combinator"
                           />
                           <img
                             className="relative h-5 pr-5 sm:h-5 md:pr-10"
-                            src={`${router.basePath}/images/logos/mozilla--grey.png`}
+                            src={`${basePath}/images/logos/mozilla--grey.png`}
                             alt="Mozilla"
                           />
                           <img
                             className="relative h-5 pr-5 sm:h-5 md:pr-10"
-                            src={`${router.basePath}/images/logos/coatue.png`}
+                            src={`${basePath}/images/logos/coatue.png`}
                             alt="Coatue"
                           />
                           <img
                             className="relative h-6 pr-5 sm:h-6 md:pr-10"
-                            src={`${router.basePath}/images/logos/felicis.png`}
+                            src={`${basePath}/images/logos/felicis.png`}
                             alt="Felicis"
                           />
                         </div>

apps/www/components/TextLink.tsx

@@ -1,20 +1,22 @@
-import { IconArrowRight, IconChevronRight } from 'ui'
+import { IconChevronRight } from 'ui'
 import Link from 'next/link'
 
-function TextLink({ url, label }: any) {
+function TextLink({ url, label, ...props }: any) {
   return (
-    <a
-      href={url}
-      className="text-scale-1100 hover:text-scale-1200 mt-3 block cursor-pointer text-sm"
-    >
-      <div className="group flex items-center gap-1">
-        <span className="sr-only">{`${label} about ${url}`}</span>
-        <span>{label}</span>
-        <div className="transition-all group-hover:ml-0.5">
-          <IconChevronRight size={14} strokeWidth={2} />
+    <Link href={url}>
+      <a
+        className="text-scale-1100 hover:text-scale-1200 mt-3 block cursor-pointer text-sm"
+        {...props}
+      >
+        <div className="group flex items-center gap-1">
+          <span className="sr-only">{`${label} about ${url}`}</span>
+          <span>{label}</span>
+          <div className="transition-all group-hover:ml-0.5">
+            <IconChevronRight size={14} strokeWidth={2} />
+          </div>
         </div>
-      </div>
-    </a>
+      </a>
+    </Link>
   )
 }
 

apps/www/lib/gaEvents.ts

@@ -15,6 +15,31 @@ const GoogleAnalyticsEvents: GoogleAnalyticsEventType = {
     category: 'link',
     label: '',
   },
+  www_hp_subhero_products_database: {
+    action: 'www_hp_subhero_products_database',
+    category: 'link',
+    label: '',
+  },
+  www_hp_subhero_products_auth: {
+    action: 'www_hp_subhero_products_auth',
+    category: 'link',
+    label: '',
+  },
+  www_hp_subhero_products_storage: {
+    action: 'www_hp_subhero_products_storage',
+    category: 'link',
+    label: '',
+  },
+  www_hp_subhero_products_edgeFunctions: {
+    action: 'www_hp_subhero_products_edgeFunctions',
+    category: 'link',
+    label: '',
+  },
+  www_hp_subhero_products_realtime: {
+    action: 'www_hp_subhero_products_realtime',
+    category: 'link',
+    label: '',
+  },
 }
 
 export default GoogleAnalyticsEvents