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
This commit is contained in:
M Fahru 2024-08-20 11:45:04 -07:00 committed by Copybot
parent 8e602b6ec6
commit 41e2d1bba7
8 changed files with 67 additions and 47 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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 }
)
}

View file

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