From d50fa11757c5cabf9b653eb28a376df9eb484d9c Mon Sep 17 00:00:00 2001 From: Pamela Chia Date: Thu, 23 Jan 2025 09:20:47 +0800 Subject: [PATCH] feat: add homepage click events (#33005) * feat: add homepage click events * fix codeowners telemetry filepath --- .github/CODEOWNERS | 3 +- .../BuiltWithSupabase/ExamplesMobile.tsx | 2 +- .../components/BuiltWithSupabase/index.tsx | 2 +- apps/www/components/CustomerStories/index.tsx | 15 ++++ apps/www/components/ExampleCard.tsx | 16 +++- apps/www/components/Nav/GitHubButton.tsx | 6 ++ apps/www/components/TwitterSocialSection.tsx | 19 ++++- packages/common/telemetry-constants.ts | 78 +++++++++++++++++++ 8 files changed, 135 insertions(+), 6 deletions(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index b1831720cca..5b3982ca695 100644 --- a/.github/CODEOWNERS +++ b/.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 \ No newline at end of file diff --git a/apps/www/components/BuiltWithSupabase/ExamplesMobile.tsx b/apps/www/components/BuiltWithSupabase/ExamplesMobile.tsx index 130f54fdf5c..c508b8d7bed 100644 --- a/apps/www/components/BuiltWithSupabase/ExamplesMobile.tsx +++ b/apps/www/components/BuiltWithSupabase/ExamplesMobile.tsx @@ -42,7 +42,7 @@ const ExamplesMobile: FC = ({ examples, className }: any) => { > {examples.map((example: Example, i: number) => ( - + ))} diff --git a/apps/www/components/BuiltWithSupabase/index.tsx b/apps/www/components/BuiltWithSupabase/index.tsx index 61971b8fa03..5a33f65e324 100644 --- a/apps/www/components/BuiltWithSupabase/index.tsx +++ b/apps/www/components/BuiltWithSupabase/index.tsx @@ -45,7 +45,7 @@ const BuiltWithSupabase = () => { )} key={i} > - + ) })} diff --git a/apps/www/components/CustomerStories/index.tsx b/apps/www/components/CustomerStories/index.tsx index 855f420d838..e12541dfe85 100644 --- a/apps/www/components/CustomerStories/index.tsx +++ b/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 = ({ column, className }) => { + const sendTelemetryEvent = useSendTelemetryEvent() return (
{column.cards.map((customer) => @@ -107,6 +110,12 @@ export const CompositionCol: React.FC = ({ 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' }, + }) + } > @@ -115,6 +124,12 @@ export const CompositionCol: React.FC = ({ 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' }, + }) + } > diff --git a/apps/www/components/ExampleCard.tsx b/apps/www/components/ExampleCard.tsx index f4e38b936dd..0af2ba6c350 100644 --- a/apps/www/components/ExampleCard.tsx +++ b/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 ( - + { + if (props.inHomepage) + sendTelemetryEvent({ + action: TelemetryActions.HOMEPAGE_PROJECT_TEMPLATE_CARD_CLICKED, + properties: { templateTitle: props.title }, + }) + }} + >
{props.tags && ( diff --git a/apps/www/components/Nav/GitHubButton.tsx b/apps/www/components/Nav/GitHubButton.tsx index 2548b59a238..16d58b039af 100644 --- a/apps/www/components/Nav/GitHubButton.tsx +++ b/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 ( diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts index f31610ee0e7..7301b9b46d5 100644 --- a/packages/common/telemetry-constants.ts +++ b/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