Merge pull request #6423 from overleaf/tm-plans-new-events

Add new analytics events to plans page/subscription flow

GitOrigin-RevId: 7b70ee30749ebc671cf2445f3cbdae91a7278b01

services/web/app/src/Features/Subscription/SubscriptionController.js

@@ -54,6 +54,8 @@ async function plansPage(req, res) {
     usage: getDefault('usage', 'usage', 'enterprise'),
   }
 
+  AnalyticsManager.recordEventForSession(req.session, 'plans-page-view')
+
   res.render('subscriptions/plans-marketing', {
     title: 'plans_and_pricing',
     plans,

services/web/app/views/subscriptions/plans-marketing.pug

@@ -62,6 +62,7 @@ block content
 								a.btn.btn-default(
 									href="#groups"
 									data-ol-open-group-plan-modal
+									data-ol-location='callout'
 								) #{translate('find_out_more')}
 
 					.row.row-spaced-large

services/web/frontend/js/features/plans/group-plan-modal/index.js

@@ -69,7 +69,7 @@ function showGroupPlanModal() {
     'subscription-funnel',
     'plans-page',
     'group-inquiry-potential'
-  )
+  ) // deprecated by plans-page-click
 }
 
 document
@@ -94,6 +94,12 @@ document.querySelectorAll('[data-ol-purchase-group-plan]').forEach(el =>
     if (itmContent) {
       queryParams.set('itm_content', itmContent)
     }
+    eventTracking.sendMB('groups-modal-click', {
+      plan: planCode,
+      users: size,
+      currency: currency,
+      type: usage,
+    })
     const url = new URL('/user/subscription/new', window.origin)
     url.search = queryParams.toString()
     window.location = url.toString()
@@ -101,8 +107,14 @@ document.querySelectorAll('[data-ol-purchase-group-plan]').forEach(el =>
 )
 
 document.querySelectorAll('[data-ol-open-group-plan-modal]').forEach(el => {
+  const location = el.getAttribute('data-ol-location')
   el.addEventListener('click', function (e) {
     e.preventDefault()
+    eventTracking.sendMB('plans-page-click', {
+      button: 'group',
+      location,
+      period: 'annual',
+    })
     showGroupPlanModal()
   })
 })

services/web/frontend/js/pages/user/subscription/plans.js

@@ -11,7 +11,8 @@ function setUpViewSwitching(liEl) {
   const view = liEl.getAttribute('data-ol-view-tab')
   liEl.querySelector('a').addEventListener('click', function (e) {
     e.preventDefault()
-    eventTracking.send('subscription-funnel', 'plans-page', `${view}-prices`)
+    eventTracking.send('subscription-funnel', 'plans-page', `${view}-prices`) // deprecated by plans-page-toggle
+    eventTracking.sendMB('plans-page-toggle', { button: view })
     document.querySelectorAll('[data-ol-view-tab]').forEach(el => {
       if (el.getAttribute('data-ol-view-tab') === view) {
         el.classList.add('active')
@@ -35,6 +36,7 @@ function setUpCurrencySwitching(linkEl) {
       el.hidden = el.getAttribute('data-ol-currencyCode') !== currencyCode
     })
     currentCurrencyCode = currencyCode
+    eventTracking.sendMB('plans-page-currency', { currency: currencyCode })
     updateLinkTargets()
   })
 }
@@ -43,14 +45,21 @@ function setUpSubscriptionTracking(linkEl) {
   const plan =
     linkEl.getAttribute('data-ol-tracking-plan') ||
     linkEl.getAttribute('data-ol-start-new-subscription')
+  const location = linkEl.getAttribute('data-ol-location')
+  const period = linkEl.getAttribute('data-ol-item-view') || currentView
 
   linkEl.addEventListener('click', function () {
     const customLabel = linkEl.getAttribute('data-ol-tracking-label')
     const computedLabel = currentView === 'annual' ? `${plan}_annual` : plan
     const label = customLabel || computedLabel
 
-    eventTracking.sendMB('plans-page-start-trial')
-    eventTracking.send('subscription-funnel', 'sign_up_now_button', label)
+    eventTracking.sendMB('plans-page-start-trial') // deprecated by plans-page-click
+    eventTracking.send('subscription-funnel', 'sign_up_now_button', label) // deprecated by plans-page-click
+    eventTracking.sendMB('plans-page-click', {
+      button: plan,
+      location,
+      period,
+    })
   })
 }