diff --git a/client/src/analytics/call-ga.ts b/client/src/analytics/call-ga.ts index 98da19af5b6..0c9599c31bb 100644 --- a/client/src/analytics/call-ga.ts +++ b/client/src/analytics/call-ga.ts @@ -32,11 +32,15 @@ type DonationRelatedEventAction = | 'Modal Become Supporter Click' | 'Donate Page Patreon Payment Redirection' | 'Modal Patreon Payment Redirection' + | 'Amount Confirmation Clicked' + | 'Select Amount Tab Clicked' + | 'Edit Amount Clicked' | 'Certificate Patreon Payment Redirection'; interface DonationRelatedEvent { event: 'donation_related'; action: DonationRelatedEventAction; + amount?: DonationAmount; } type DonationViewEventAction = diff --git a/client/src/components/Donation/multi-tier-donation-form.tsx b/client/src/components/Donation/multi-tier-donation-form.tsx index 6087f9a7eb5..2fdf4fdcb3a 100644 --- a/client/src/components/Donation/multi-tier-donation-form.tsx +++ b/client/src/components/Donation/multi-tier-donation-form.tsx @@ -17,6 +17,7 @@ import { defaultTierAmount, type DonationAmount } from '../../../../shared/config/donation-settings'; // You can further extract these into separate components and import them +import callGA from '../../analytics/call-ga'; import { LocalStorageThemes } from '../../redux/types'; import { formattedAmountLabel, convertToTimeContributed } from './utils'; import DonateForm from './donate-form'; @@ -45,6 +46,22 @@ function SelectionTabs({ setDonationAmount(Number(value) as DonationAmount); }; useFeature('aa-test-in-component'); + const handleAmountConfirmationClick = () => { + callGA({ + event: 'donation_related', + action: `Amount Confirmation Clicked` + }); + setShowDonateForm(true); + }; + + const selectAmountTabClick = (value: DonationAmount) => { + callGA({ + event: 'donation_related', + action: `Select Amount Tab Clicked`, + amount: value + }); + setDonationAmount(value); + }; return ( setDonationAmount(value)} + onClick={() => selectAmountTabClick(value)} > ${formattedAmountLabel(value)} @@ -97,7 +114,7 @@ function SelectionTabs({