Merge pull request #23618 from overleaf/rh-compile-timeout-paywall-event-tracking

Add events to compile timeout paywall

GitOrigin-RevId: 2982e1a8c6494bafbc3137a25f5e9eb08182812b

services/web/frontend/js/features/pdf-preview/components/timeout-message-after-paywall-dismissal.tsx

@@ -1,11 +1,12 @@
 import getMeta from '@/utils/meta'
 import { Trans, useTranslation } from 'react-i18next'
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useEffect } from 'react'
 import { useDetachCompileContext } from '@/shared/context/detach-compile-context'
 import StartFreeTrialButton from '@/shared/components/start-free-trial-button'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useStopOnFirstError } from '@/shared/hooks/use-stop-on-first-error'
+import * as eventTracking from '@/infrastructure/event-tracking'
 import PdfLogEntry from './pdf-log-entry'
 
 function TimeoutMessageAfterPaywallDismissal() {
@@ -51,6 +52,20 @@ const CompileTimeout = memo(function CompileTimeout({
 
   const hasNewPaywallCta = useFeatureFlag('paywall-cta')
 
+  useEffect(() => {
+    eventTracking.sendMB('paywall-prompt', {
+      'paywall-type': 'compile-timeout',
+      'paywall-version': 'secondary',
+    })
+  }, [])
+
+  function onPaywallClick() {
+    eventTracking.sendMB('paywall-click', {
+      'paywall-type': 'compile-timeout',
+      'paywall-version': 'secondary',
+    })
+  }
+
   return (
     <PdfLogEntry
       headerTitle={t('project_failed_to_compile')}
@@ -94,6 +109,7 @@ const CompileTimeout = memo(function CompileTimeout({
                 <StartFreeTrialButton
                   source="compile-timeout"
                   buttonProps={{ variant: 'secondary' }}
+                  handleClick={onPaywallClick}
                 >
                   {hasNewPaywallCta
                     ? t('get_more_compile_time')

services/web/frontend/js/features/pdf-preview/components/timeout-upgrade-paywall-prompt.tsx

@@ -1,5 +1,6 @@
+import { useEffect, useMemo, useState } from 'react'
 import getMeta from '@/utils/meta'
-import { useMemo, useState } from 'react'
+import * as eventTracking from '@/infrastructure/event-tracking'
 import TimeoutMessageAfterPaywallDismissal from './timeout-message-after-paywall-dismissal'
 import { UpgradePrompt } from '@/shared/components/upgrade-prompt'
 
@@ -10,6 +11,11 @@ const studentRoles = [
   'Doctoral student (e.g. PhD, MD, EngD)',
 ]
 
+type Segmentation = Record<
+  string,
+  string | number | boolean | undefined | unknown | any
+>
+
 function TimeoutUpgradePaywallPrompt() {
   const odcRole = getMeta('ol-odcRole')
   const planPrices = getMeta('ol-paywallPlans')
@@ -17,10 +23,35 @@ function TimeoutUpgradePaywallPrompt() {
 
   const [isPaywallDismissed, setIsPaywallDismissed] = useState<boolean>(false)
 
+  function sendPaywallEvent(event: string, segmentation?: Segmentation) {
+    eventTracking.sendMB(event, {
+      'paywall-type': 'compile-timeout',
+      'paywall-version': 'primary',
+      ...segmentation,
+    })
+  }
+
   function onClose() {
+    sendPaywallEvent('paywall-dismiss')
     setIsPaywallDismissed(true)
   }
 
+  function onClickInfoLink() {
+    sendPaywallEvent('paywall-info-click', { content: 'plans' })
+  }
+
+  function onClickPaywall() {
+    sendPaywallEvent('paywall-click', {
+      plan: isStudent ? 'student' : 'collaborator',
+    })
+  }
+
+  useEffect(() => {
+    sendPaywallEvent('paywall-prompt', {
+      plan: isStudent ? 'student' : 'collaborator',
+    })
+  }, [isStudent])
+
   return (
     <div>
       {!isPaywallDismissed ? (
@@ -32,8 +63,10 @@ function TimeoutUpgradePaywallPrompt() {
             student: planPrices?.student,
             standard: planPrices?.collaborator,
           }}
-          itmCampaign="storybook"
+          itmCampaign="compile-timeout"
           isStudent={isStudent}
+          onClickInfoLink={onClickInfoLink}
+          onClickPaywall={onClickPaywall}
         />
       ) : (
         <TimeoutMessageAfterPaywallDismissal />

services/web/frontend/js/shared/components/upgrade-prompt.tsx

@@ -25,17 +25,20 @@ function IconListItem({ icon, children }: IconListItemProps) {
 
 type PlansLinkProps = {
   itmCampaign: string
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>
 }
 function PlansLink({
   children,
   itmCampaign,
+  onClick,
 }: PropsWithChildren<PlansLinkProps>) {
   return (
     <a
       key="compare_plans_link"
-      href={`/user/subscription/plans&itm-campaign=${itmCampaign}`}
+      href={`/user/subscription/plans?itm-campaign=${itmCampaign}`}
       target="_blank"
       rel="noreferrer"
+      onClick={onClick}
     >
       {children}
       <MaterialIcon type="open_in_new" />
@@ -50,6 +53,8 @@ type UpgradePromptProps = {
   planPricing: { student: string; standard: string }
   itmCampaign: string
   isStudent?: boolean
+  onClickInfoLink?: React.MouseEventHandler<HTMLAnchorElement>
+  onClickPaywall?: React.MouseEventHandler<HTMLAnchorElement>
 }
 
 export function UpgradePrompt({
@@ -59,6 +64,8 @@ export function UpgradePrompt({
   planPricing,
   itmCampaign,
   isStudent = false,
+  onClickInfoLink,
+  onClickPaywall,
 }: UpgradePromptProps) {
   const { t } = useTranslation()
   const planPrice = isStudent ? planPricing.student : planPricing.standard
@@ -111,6 +118,7 @@ export function UpgradePrompt({
               <a
                 className="btn btn-premium"
                 href={`/user/subscription/new?planCode=${planCode}&itm-campaign=${itmCampaign}`}
+                onClick={onClickPaywall}
               >
                 {t('try_for_free')}
               </a>
@@ -155,7 +163,9 @@ export function UpgradePrompt({
           {/* eslint-disable react/jsx-key */}
           <Trans
             i18nKey="compare_all_plans"
-            components={[<PlansLink itmCampaign={itmCampaign} />]}
+            components={[
+              <PlansLink onClick={onClickInfoLink} itmCampaign={itmCampaign} />,
+            ]}
           />
           {/* eslint-disable react/jsx-key */}
         </p>