From f13c7299238e8a3102ebf49d45a41e7f93e1bf72 Mon Sep 17 00:00:00 2001
From: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Date: Wed, 3 May 2023 15:42:56 +0200
Subject: [PATCH] chore: add analytics event to hp herop

---
 apps/www/components/Hero.tsx               | 23 +++++++++++--
 apps/www/hooks/useGoogleAnalyticsProps.tsx | 13 ++++++++
 apps/www/lib/constants.ts                  |  2 ++
 apps/www/lib/fetchWrapper.ts               |  4 +--
 apps/www/lib/gaEvents.ts                   | 20 ++++++++++++
 apps/www/lib/telemetry.ts                  | 38 ++++++++++++++++++++++
 apps/www/pages/_app.tsx                    |  2 +-
 7 files changed, 95 insertions(+), 7 deletions(-)
 create mode 100644 apps/www/hooks/useGoogleAnalyticsProps.tsx
 create mode 100644 apps/www/lib/gaEvents.ts
 create mode 100644 apps/www/lib/telemetry.ts

diff --git a/apps/www/components/Hero.tsx b/apps/www/components/Hero.tsx
index e97cd31fa74..5557da55251 100644
--- a/apps/www/components/Hero.tsx
+++ b/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>
diff --git a/apps/www/hooks/useGoogleAnalyticsProps.tsx b/apps/www/hooks/useGoogleAnalyticsProps.tsx
new file mode 100644
index 00000000000..a3254a8b307
--- /dev/null
+++ b/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
diff --git a/apps/www/lib/constants.ts b/apps/www/lib/constants.ts
index e3c815b5dca..1b7537a438d 100644
--- a/apps/www/lib/constants.ts
+++ b/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
diff --git a/apps/www/lib/fetchWrapper.ts b/apps/www/lib/fetchWrapper.ts
index c573a0d37dc..0313e49565f 100644
--- a/apps/www/lib/fetchWrapper.ts
+++ b/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 = {}) => {
diff --git a/apps/www/lib/gaEvents.ts b/apps/www/lib/gaEvents.ts
new file mode 100644
index 00000000000..53908751474
--- /dev/null
+++ b/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
diff --git a/apps/www/lib/telemetry.ts b/apps/www/lib/telemetry.ts
new file mode 100644
index 00000000000..cdaa08cf1e8
--- /dev/null
+++ b/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,
+}
diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
index 2ccb053b3ae..60a1a4684fe 100644
--- a/apps/www/pages/_app.tsx
+++ b/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'