chore: add analytics event to hp herop

apps/www/components/Hero.tsx

@@ -1,10 +1,18 @@
-import { Button, IconBookOpen, Space } from 'ui'
+import { Button, IconBookOpen } from 'ui'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import SectionContainer from './Layouts/SectionContainer'
+import Telemetry, { GoogleAnalyticsEvent } from '~/lib/telemetry'
+import gaEvents from '~/lib/gaEvents'
+import useGoogleAnalyticsProps from '~/hooks/useGoogleAnalyticsProps'
 
 const Hero = () => {
   const { basePath } = useRouter()
+  const googleAnalyticsProps = useGoogleAnalyticsProps()
+
+  const handleClick = (event: GoogleAnalyticsEvent) => {
+    Telemetry.sendEvent(event, googleAnalyticsProps)
+  }
 
   return (
     <div className="overflow-hidden">
@@ -41,14 +49,23 @@ const Hero = () => {
                     <div className="flex items-center gap-2">
                       <Link href="https://app.supabase.com" as="https://app.supabase.com" passHref>
                         <a>
-                          <Button size="small" className="text-white">
+                          <Button
+                            size="small"
+                            className="text-white"
+                            onClick={() => handleClick(gaEvents['www_hp_hero_startProject'])}
+                          >
                             Start your project
                           </Button>
                         </a>
                       </Link>
                       <Link href="/docs" as="/docs" passHref>
                         <a>
-                          <Button size="small" type="default" icon={<IconBookOpen />}>
+                          <Button
+                            size="small"
+                            type="default"
+                            icon={<IconBookOpen />}
+                            onClick={() => handleClick(gaEvents['www_hp_hero_documentation'])}
+                          >
                             Documentation
                           </Button>
                         </a>

apps/www/hooks/useGoogleAnalyticsProps.tsx

@@ -0,0 +1,13 @@
+import { useRouter } from 'next/router'
+
+const useGoogleAnalyticsProps = () => {
+  const { locale } = useRouter()
+
+  return {
+    screenResolution:
+      typeof window !== 'undefined' ? `${window.innerWidth}x${window.innerHeight}` : undefined,
+    language: locale ?? 'en-US',
+  }
+}
+
+export default useGoogleAnalyticsProps

apps/www/lib/constants.ts

@@ -1,5 +1,7 @@
 export const APP_NAME = 'Supabase'
 export const DESCRIPTION = 'The Open Source Alternative to Firebase.'
+export const IS_PROD = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'
+export const API_URL = !IS_PROD ? process.env.NEXT_PUBLIC_API_URL : '/api'
 
 // Launch Weeek
 export const SAMPLE_TICKET_NUMBER = 1234

apps/www/lib/fetchWrapper.ts

@@ -1,7 +1,5 @@
 interface DataProps {
-  referrer?: string
-  title: string
-  route?: string
+  [prop: string]: any
 }
 
 export const post = (url: string, data: DataProps, options = {}) => {

apps/www/lib/gaEvents.ts

@@ -0,0 +1,20 @@
+import { GoogleAnalyticsEvent } from './telemetry'
+
+interface GoogleAnalyticsEventType {
+  [key: string]: GoogleAnalyticsEvent
+}
+
+const GoogleAnalyticsEvents: GoogleAnalyticsEventType = {
+  www_hp_hero_startProject: {
+    action: 'www_hp_hero_startProject',
+    category: 'link',
+    label: 'Clicks on “Start your project” button in the home page hero',
+  },
+  www_hp_hero_documentation: {
+    action: 'www_hp_hero_documentation',
+    category: 'link',
+    label: 'Clicks on “Documentation” button in the home page hero',
+  },
+}
+
+export default GoogleAnalyticsEvents

apps/www/lib/telemetry.ts

@@ -0,0 +1,38 @@
+import { post } from '~/lib/fetchWrapper'
+import { API_URL, IS_PROD } from 'lib/constants'
+
+export interface GoogleAnalyticsEvent {
+  category: string
+  action: string
+  label: string
+  value?: string
+}
+
+export interface GoogleAnalyticsProps {
+  screenResolution?: string
+  language: string
+}
+
+// This event is the same as in studio/lib/telemetry.tx
+// but uses different ENV variables for www
+
+const sendEvent = (event: GoogleAnalyticsEvent, gaProps: GoogleAnalyticsProps) => {
+  if (!IS_PROD) return
+
+  const { category, action, label, value } = event
+
+  return post(`${API_URL}/telemetry/event`, {
+    action: action,
+    category: category,
+    label: label,
+    value: value,
+    ga: {
+      screen_resolution: gaProps?.screenResolution,
+      language: gaProps?.language,
+    },
+  })
+}
+
+export default {
+  sendEvent,
+}

apps/www/pages/_app.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import Meta from '~/components/Favicons'
 import '../styles/index.css'
-import { post } from './../lib/fetchWrapper'
+import { post } from '~/lib/fetchWrapper'
 import { AuthProvider, ThemeProvider } from 'common'
 import Head from 'next/head'