Merge pull request #20005 from overleaf/mf-view-events-plans-page

[web] Implement plans page and interstitial payment page view events for plans redesign test

GitOrigin-RevId: 023338acffe149db93b37d94cf06e8102ffcff8f

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

@@ -80,30 +80,14 @@ async function plansPage(req, res) {
 
   const plans = SubscriptionViewModelBuilder.buildPlansList()
 
-  const {
-    currency,
-    recommendedCurrency,
-    countryCode,
-    geoPricingLATAMTestVariant,
-  } = await _getRecommendedCurrency(req, res)
+  const { currency, countryCode, geoPricingLATAMTestVariant } =
+    await _getRecommendedCurrency(req, res)
 
   const latamCountryBannerDetails = await getLatamCountryBannerDetails(req, res)
   const groupPlanModalDefaults = _getGroupPlanModalDefaults(req, currency)
 
   const currentView = 'annual'
 
-  const plansPageViewSegmentation = {
-    currency: recommendedCurrency,
-    countryCode,
-    'geo-pricing-latam-v2': geoPricingLATAMTestVariant,
-  }
-
-  AnalyticsManager.recordEventForSession(
-    req.session,
-    'plans-page-view',
-    plansPageViewSegmentation
-  )
-
   const { showLATAMBanner, showInrGeoBanner, showBrlGeoBanner } = _plansBanners(
     {
       geoPricingLATAMTestVariant,
@@ -145,6 +129,8 @@ async function plansPage(req, res) {
     showBrlGeoBanner,
     showLATAMBanner,
     latamCountryBannerDetails,
+    countryCode,
+    websiteRedesignPlansVariant: 'default',
   })
 }
 
@@ -156,12 +142,8 @@ async function plansPageLightDesign(req, res) {
   if (!splitTestActive && req.query.preview !== 'true') {
     return res.redirect(302, '/user/subscription/plans')
   }
-  const {
-    currency,
-    countryCode,
-    geoPricingLATAMTestVariant,
-    recommendedCurrency,
-  } = await _getRecommendedCurrency(req, res)
+  const { currency, countryCode, geoPricingLATAMTestVariant } =
+    await _getRecommendedCurrency(req, res)
 
   const language = req.i18n.language || 'en'
   const currentView = 'annual'
@@ -187,18 +169,6 @@ async function plansPageLightDesign(req, res) {
 
   const latamCountryBannerDetails = await getLatamCountryBannerDetails(req, res)
 
-  const plansPageViewSegmentation = {
-    currency: recommendedCurrency,
-    countryCode,
-    'geo-pricing-latam-v2': geoPricingLATAMTestVariant,
-  }
-
-  AnalyticsManager.recordEventForSession(
-    req.session,
-    'plans-page-view',
-    plansPageViewSegmentation
-  )
-
   res.render('subscriptions/plans-light-design', {
     title: 'plans_and_pricing',
     currentView,
@@ -223,6 +193,8 @@ async function plansPageLightDesign(req, res) {
     showInrGeoBanner,
     showBrlGeoBanner,
     latamCountryBannerDetails,
+    countryCode,
+    websiteRedesignPlansVariant: 'light-design',
   })
 }
 
@@ -370,17 +342,6 @@ async function interstitialPaymentPage(req, res) {
   if (hasSubscription) {
     res.redirect('/user/subscription?hasSubscription=true')
   } else {
-    const paywallPlansPageViewSegmentation = {
-      currency: recommendedCurrency,
-      countryCode,
-      'geo-pricing-latam-v2': geoPricingLATAMTestVariant,
-    }
-    AnalyticsManager.recordEventForSession(
-      req.session,
-      'paywall-plans-page-view',
-      paywallPlansPageViewSegmentation
-    )
-
     const { showLATAMBanner, showInrGeoBanner, showBrlGeoBanner } =
       _plansBanners({
         geoPricingLATAMTestVariant,
@@ -411,6 +372,7 @@ async function interstitialPaymentPage(req, res) {
       showLATAMBanner,
       latamCountryBannerDetails,
       skipLinkTarget: req.session?.postCheckoutRedirect || '/project',
+      websiteRedesignPlansVariant: websiteRedesignPlansAssignment.variant,
     })
   }
 }

services/web/app/views/subscriptions/interstitial-payment-light-design.pug

@@ -15,6 +15,8 @@ block vars
 block append meta
 	meta(name="ol-recommendedCurrency" content=recommendedCurrency)
 	meta(name="ol-itm_content" content=itm_content)
+	meta(name="ol-countryCode" content=countryCode)
+	meta(name="ol-websiteRedesignPlansVariant" content=websiteRedesignPlansVariant)
 
 block content
 	main.website-redesign#main-content

services/web/app/views/subscriptions/interstitial-payment.pug

@@ -13,6 +13,8 @@ block vars
 block append meta
 	meta(name="ol-recommendedCurrency" content=recommendedCurrency)
 	meta(name="ol-itm_content" content=itm_content)
+	meta(name="ol-countryCode" content=countryCode)
+	meta(name="ol-websiteRedesignPlansVariant" content=websiteRedesignPlansVariant)
 
 block content
 	main.content.content-alt#main-content

services/web/app/views/subscriptions/plans-light-design.pug

@@ -11,6 +11,8 @@ block append meta
 	meta(name="ol-currencySymbols" data-type="json" content=groupPlanModalOptions.currencySymbols)
 	meta(name="ol-itm_content" content=itm_content)
 	meta(name="ol-currentView" content=currentView)
+	meta(name="ol-countryCode" content=countryCode)
+	meta(name="ol-websiteRedesignPlansVariant" content=websiteRedesignPlansVariant)
 
 block content
 	main.website-redesign#main-content

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

@@ -9,6 +9,8 @@ block append meta
 	meta(name="ol-currencySymbols" data-type="json" content=groupPlanModalOptions.currencySymbols)
 	meta(name="ol-itm_content" content=itm_content)
 	meta(name="ol-currentView" content=currentView)
+	meta(name="ol-countryCode" content=countryCode)
+	meta(name="ol-websiteRedesignPlansVariant" content=websiteRedesignPlansVariant)
 
 block content
 	main.content.content-alt#main-content

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js

@@ -18,6 +18,7 @@ import {
   handleForStudentsLinkInFooter,
   setHashFromViewTab,
 } from './plans-v2-hash'
+import { sendPlansViewEvent } from './plans-v2-tracking'
 import getMeta from '../../../../utils/meta'
 
 const currentCurrencyCode = getMeta('ol-recommendedCurrency')
@@ -330,3 +331,5 @@ window.addEventListener('hashchange', () => {
     }
   }
 })
+
+sendPlansViewEvent()

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-tracking.ts

@@ -0,0 +1,46 @@
+import { sendMB } from '@/infrastructure/event-tracking'
+import { getSplitTestVariant } from '@/utils/splitTestUtils'
+import getMeta from '@/utils/meta'
+
+export function sendPlansViewEvent() {
+  document.addEventListener(
+    'DOMContentLoaded',
+    function () {
+      const currency = getMeta('ol-recommendedCurrency')
+      const countryCode = getMeta('ol-countryCode')
+      const geoPricingLATAMTestVariant = getSplitTestVariant(
+        'geo-pricing-latam-v2'
+      )
+
+      const websiteRedesignPlansTestVariant = getMeta(
+        'ol-websiteRedesignPlansVariant'
+      )
+
+      const device = window.matchMedia('(max-width: 767px)').matches
+        ? 'mobile'
+        : 'desktop'
+
+      const plansPageViewSegmentation = {
+        currency,
+        countryCode,
+        device,
+        'geo-pricing-latam-v2': geoPricingLATAMTestVariant,
+        'website-redesign-plans': websiteRedesignPlansTestVariant,
+      }
+
+      const isPlansPage = window.location.href.includes(
+        'user/subscription/plans'
+      )
+      const isInterstitialPaymentPage = window.location.href.includes(
+        'user/subscription/choose-your-plan'
+      )
+
+      if (isPlansPage) {
+        sendMB('plans-page-view', plansPageViewSegmentation)
+      } else if (isInterstitialPaymentPage) {
+        sendMB('paywall-plans-page-view', plansPageViewSegmentation)
+      }
+    },
+    { once: true }
+  )
+}

services/web/frontend/js/utils/meta.ts

@@ -206,6 +206,7 @@ export interface Meta {
   'ol-usersBestSubscription': ProjectDashboardSubscription | undefined
   'ol-usersEmail': string | undefined
   'ol-validationStatus': ValidationStatus
+  'ol-websiteRedesignPlansVariant': 'default' | 'light-design' | 'new-design'
   'ol-wikiEnabled': boolean
   'ol-writefullCssUrl': string
   'ol-writefullEnabled': boolean