diff --git a/web/app/components/billing/plan/index.tsx b/web/app/components/billing/plan/index.tsx index a05da7733b..9c4fb2609a 100644 --- a/web/app/components/billing/plan/index.tsx +++ b/web/app/components/billing/plan/index.tsx @@ -69,6 +69,7 @@ const PlanComp: FC = ({ )} @@ -83,6 +84,7 @@ const PlanComp: FC = ({ isFull size='lg' isPlain={type !== Plan.sandbox} + gaEventName='click_header_upgrade_btn' /> )} diff --git a/web/app/components/billing/upgrade-btn/index.tsx b/web/app/components/billing/upgrade-btn/index.tsx index 2eecf30097..5fa435d2b0 100644 --- a/web/app/components/billing/upgrade-btn/index.tsx +++ b/web/app/components/billing/upgrade-btn/index.tsx @@ -15,9 +15,10 @@ type Props = { isPlain?: boolean isShort?: boolean onClick?: () => void + gaEventName?: string } -const PlainBtn = ({ className, onClick }: { className?: string; onClick: () => {} }) => { +const PlainBtn = ({ className, onClick }: { className?: string; onClick: () => void }) => { const { t } = useTranslation() return ( @@ -38,13 +39,22 @@ const UpgradeBtn: FC = ({ isFull = false, isShort = false, size = 'md', - onClick, + onClick: _onClick, + gaEventName, }) => { const { t } = useTranslation() const { setShowPricingModal } = useModalContext() + const onClick = () => { + if (gaEventName) + (window as any).dataLayer.push({ event: gaEventName }) + if (_onClick) + _onClick() + else + (setShowPricingModal as any)() + } if (isPlain) - return + return return (
= ({ size === 'lg' ? 'h-10' : 'h-9', 'relative flex items-center cursor-pointer border rounded-[20px] border-[#0096EA] text-white', )} - onClick={onClick || setShowPricingModal} + onClick={onClick} >
{t(`billing.upgradeBtn.${isShort ? 'encourageShort' : 'encourage'}`)}
diff --git a/web/i18n/lang/billing.en.ts b/web/i18n/lang/billing.en.ts index e4ce69bcdb..fc90198661 100644 --- a/web/i18n/lang/billing.en.ts +++ b/web/i18n/lang/billing.en.ts @@ -19,7 +19,7 @@ const translation = { year: 'year', save: 'Save ', free: 'Free', - currentPlan: 'current plan', + currentPlan: 'Current Plan', startForFree: 'Start for free', getStartedWith: 'Get started with ', contactSales: 'Contact Sales',