feat: add homepage click events (#33005)

* feat: add homepage click events

* fix codeowners telemetry filepath

.github/CODEOWNERS

@@ -1,5 +1,6 @@
 /packages/shared-data/pricing.ts @roryw10 @kevcodez
 /packages/shared-data/plans.ts @roryw10 @kevcodez
+/packages/common/telemetry-constants.ts @4L3k51 @loong @pamelachia
 
 /apps/studio/ @supabase/Dashboard
 
@@ -17,5 +18,3 @@
 /apps/studio/components/interfaces/Organization/BillingSettings/    @supabase/security
 /apps/studio/components/interfaces/Organization/Documents/          @supabase/security
 /apps/studio/pages/new/index.tsx                                    @supabase/security
-
-/apps/studio/common/telemetry-constants.ts @4L3k51 @loong @pamelachia

apps/www/components/BuiltWithSupabase/ExamplesMobile.tsx

@@ -42,7 +42,7 @@ const ExamplesMobile: FC<Props> = ({ examples, className }: any) => {
       >
         {examples.map((example: Example, i: number) => (
           <SwiperSlide key={`${content}-${i}`}>
-            <ExampleCard {...example} showProducts />
+            <ExampleCard {...example} showProducts inHomepage />
           </SwiperSlide>
         ))}
       </Swiper>

apps/www/components/BuiltWithSupabase/index.tsx

@@ -45,7 +45,7 @@ const BuiltWithSupabase = () => {
                 )}
                 key={i}
               >
-                <ExampleCard {...example} showProducts />
+                <ExampleCard {...example} showProducts inHomepage />
               </div>
             )
           })}

apps/www/components/CustomerStories/index.tsx

@@ -12,6 +12,8 @@ import Panel from '~/components/Panel'
 
 import customerStories from '~/data/CustomerStories'
 import type { CustomerStoryType } from '~/data/CustomerStories'
+import { useSendTelemetryEvent } from '~/lib/telemetry'
+import { TelemetryActions } from 'common/telemetry-constants'
 
 const CustomersSliderMobile = dynamic(() => import('./CustomersSliderMobile'))
 const CutomsersSliderDesktop = dynamic(() => import('./CutomsersSliderDesktop'))
@@ -99,6 +101,7 @@ const compositionCols: CompositionColType[] = [
 ]
 
 export const CompositionCol: React.FC<CompositionColProps> = ({ column, className }) => {
+  const sendTelemetryEvent = useSendTelemetryEvent()
   return (
     <div className={className}>
       {column.cards.map((customer) =>
@@ -107,6 +110,12 @@ export const CompositionCol: React.FC<CompositionColProps> = ({ column, classNam
             href={customer.url!}
             key={customer.organization}
             className="col-span-12 md:col-span-4 w-full md:w-[450px] h-full"
+            onClick={() =>
+              sendTelemetryEvent({
+                action: TelemetryActions.HOMEPAGE_CUSTOMER_STORY_CARD_CLICKED,
+                properties: { customer: customer.organization, cardType: 'expanded' },
+              })
+            }
           >
             <CustomerCard size="expanded" customer={customer} />
           </Link>
@@ -115,6 +124,12 @@ export const CompositionCol: React.FC<CompositionColProps> = ({ column, classNam
             href={customer.url!}
             key={customer.organization}
             className="col-span-12 md:col-span-4 w-full h-full flex-grow"
+            onClick={() =>
+              sendTelemetryEvent({
+                action: TelemetryActions.HOMEPAGE_CUSTOMER_STORY_CARD_CLICKED,
+                properties: { customer: customer.organization, cardType: 'narrow' },
+              })
+            }
           >
             <CustomerCard size="narrow" customer={customer} />
           </Link>

apps/www/components/ExampleCard.tsx

@@ -5,10 +5,13 @@ import { useBreakpoint } from 'common'
 
 import { Button } from 'ui'
 import Panel from './Panel'
+import { useSendTelemetryEvent } from '~/lib/telemetry'
+import { TelemetryActions } from 'common/telemetry-constants'
 
 function ExampleCard(props: any) {
   const isXs = useBreakpoint()
   const [mounted, setMounted] = useState(false)
+  const sendTelemetryEvent = useSendTelemetryEvent()
 
   useEffect(() => {
     setMounted(true)
@@ -17,7 +20,18 @@ function ExampleCard(props: any) {
   if (!mounted) return null
 
   return (
-    <Link href={props.repo_url} className="w-full h-full" target="_blank">
+    <Link
+      href={props.repo_url}
+      className="w-full h-full"
+      target="_blank"
+      onClick={() => {
+        if (props.inHomepage)
+          sendTelemetryEvent({
+            action: TelemetryActions.HOMEPAGE_PROJECT_TEMPLATE_CARD_CLICKED,
+            properties: { templateTitle: props.title },
+          })
+      }}
+    >
       <Panel outerClassName="h-full" innerClassName="bg-surface-75 group/panel" hasActiveOnHover>
         <div className="flex flex-col justify-between">
           {props.tags && (

apps/www/components/Nav/GitHubButton.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Button } from 'ui'
 import { githubStars } from '~/.contentlayer/generated/staticContent/_index.json' with { type: 'json' }
+import { useSendTelemetryEvent } from '~/lib/telemetry'
+import { TelemetryActions } from 'common/telemetry-constants'
 
 const GitHubButton = () => {
   const kFormatter = (num: number) => {
@@ -19,12 +21,16 @@ const GitHubButton = () => {
       ? `${kFormat}.${decimalPart >= 8 ? hundreds + 1 : hundreds}K`
       : `${isAlmostNextThousand ? kFormat + 1 : kFormat}K`
   }
+  const sendTelemetryEvent = useSendTelemetryEvent()
 
   return (
     <Button
       className="hidden group lg:flex text-foreground-light hover:text-foreground"
       type="text"
       asChild
+      onClick={() =>
+        sendTelemetryEvent({ action: TelemetryActions.HOMEPAGE_GITHUB_BUTTON_CLICKED })
+      }
     >
       <a type={undefined} href="https://github.com/supabase/supabase" target="_blank">
         <span className="flex items-center gap-1">

apps/www/components/TwitterSocialSection.tsx

@@ -6,9 +6,12 @@ import TwitterSocialProof from './Sections/TwitterSocialProof'
 import TwitterSocialProofMobile from './Sections/TwitterSocialProofMobile'
 
 import Tweets from '~/data/tweets/Tweets.json'
+import { useSendTelemetryEvent } from '~/lib/telemetry'
+import { TelemetryActions } from 'common/telemetry-constants'
 
 const TwitterSocialSection = () => {
   const tweets = Tweets.slice(0, 18)
+  const sendTelemetryEvent = useSendTelemetryEvent()
 
   return (
     <>
@@ -23,12 +26,26 @@ const TwitterSocialSection = () => {
               href={'https://github.com/supabase/supabase/discussions'}
               target="_blank"
               tabIndex={-1}
+              onClick={() =>
+                sendTelemetryEvent({
+                  action: TelemetryActions.HOMEPAGE_GITHUB_DISCUSSIONS_BUTTON_CLICKED,
+                })
+              }
             >
               GitHub discussions
             </Link>
           </Button>
           <Button asChild type="default" size="small" iconRight={<MessageCircle size={14} />}>
-            <Link href={'https://discord.supabase.com/'} target="_blank" tabIndex={-1}>
+            <Link
+              href={'https://discord.supabase.com/'}
+              target="_blank"
+              tabIndex={-1}
+              onClick={() =>
+                sendTelemetryEvent({
+                  action: TelemetryActions.HOMEPAGE_DISCORD_BUTTON_CLICKED,
+                })
+              }
+            >
               Discord
             </Link>
           </Button>

packages/common/telemetry-constants.ts

@@ -51,6 +51,11 @@ export enum TelemetryActions {
   PRICING_PLAN_CTA_CLICKED = 'pricing_plan_cta_clicked',
   PRICING_COMPARISON_PLAN_CLICKED = 'pricing_comparison_plan_clicked',
   EVENT_PAGE_CTA_CLICKED = 'event_page_cta_clicked',
+  HOMEPAGE_GITHUB_BUTTON_CLICKED = 'homepage_github_button_clicked',
+  HOMEPAGE_GITHUB_DISCUSSIONS_BUTTON_CLICKED = 'homepage_github_discussions_button_clicked',
+  HOMEPAGE_DISCORD_BUTTON_CLICKED = 'homepage_discord_button_clicked',
+  HOMEPAGE_CUSTOMER_STORY_CARD_CLICKED = 'homepage_customer_story_card_clicked',
+  HOMEPAGE_PROJECT_TEMPLATE_CARD_CLICKED = 'homepage_project_template_card_clicked',
 }
 
 /**
@@ -754,6 +759,74 @@ export interface EventPageCtaClickedEvent {
   }
 }
 
+/**
+ * User clicked on the GitHub button in the homepage header section. Is hidden when in mobile view.
+ *
+ * @group Events
+ * @source www
+ * @page /
+ */
+export interface HomepageGitHubButtonClickedEvent {
+  action: TelemetryActions.HOMEPAGE_GITHUB_BUTTON_CLICKED
+}
+
+/**
+ * User clicked on the GitHub Discussions button in the homepage community section.
+ *
+ * @group Events
+ * @source www
+ * @page /
+ */
+export interface HomepageGitHubDiscussionsButtonClickedEvent {
+  action: TelemetryActions.HOMEPAGE_GITHUB_DISCUSSIONS_BUTTON_CLICKED
+}
+
+/**
+ * User clicked on the Discord button in the homepage community section.
+ *
+ * @group Events
+ * @source www
+ * @page /
+ */
+export interface HomepageDiscordButtonClickedEvent {
+  action: TelemetryActions.HOMEPAGE_DISCORD_BUTTON_CLICKED
+}
+
+/**
+ * User clicked on a customer story in the homepage.
+ *
+ * @group Events
+ * @source www
+ * @page /
+ */
+export interface HomepageCustomerStoryCardClickedEvent {
+  action: TelemetryActions.HOMEPAGE_CUSTOMER_STORY_CARD_CLICKED
+  properties: {
+    customer?: string
+    /**
+     * The size of the card clicked.
+     */
+    cardType: 'expanded' | 'narrow'
+  }
+}
+
+/**
+ * User clicked on a project template card in the homepage.
+ *
+ * @group Events
+ * @source www
+ * @page /
+ */
+export interface HomepageProjectTemplateCardClickedEvent {
+  action: TelemetryActions.HOMEPAGE_PROJECT_TEMPLATE_CARD_CLICKED
+  properties: {
+    /**
+     * The title of the project template card clicked.
+     */
+    templateTitle: string
+  }
+}
+
 export type TelemetryEvent =
   | SignUpEvent
   | SignInEvent
@@ -796,3 +869,8 @@ export type TelemetryEvent =
   | PricingPlanCtaClickedEvent
   | PricingComparisonPlanClickedEvent
   | EventPageCtaClickedEvent
+  | HomepageGitHubButtonClickedEvent
+  | HomepageGitHubDiscussionsButtonClickedEvent
+  | HomepageDiscordButtonClickedEvent
+  | HomepageCustomerStoryCardClickedEvent
+  | HomepageProjectTemplateCardClickedEvent