From 41e2d1bba7256451ab16d835d8c3b1f4abac46cd Mon Sep 17 00:00:00 2001 From: M Fahru Date: Tue, 20 Aug 2024 11:45:04 -0700 Subject: [PATCH] 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 --- .../Subscription/SubscriptionController.js | 56 +++---------------- .../interstitial-payment-light-design.pug | 2 + .../subscriptions/interstitial-payment.pug | 2 + .../subscriptions/plans-light-design.pug | 2 + .../web/app/views/subscriptions/plans.pug | 2 + .../subscription/plans-v2/plans-v2-main.js | 3 + .../plans-v2/plans-v2-tracking.ts | 46 +++++++++++++++ services/web/frontend/js/utils/meta.ts | 1 + 8 files changed, 67 insertions(+), 47 deletions(-) create mode 100644 services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-tracking.ts diff --git a/services/web/app/src/Features/Subscription/SubscriptionController.js b/services/web/app/src/Features/Subscription/SubscriptionController.js index c7224c47b0..a1ba0ff4d1 100644 --- a/services/web/app/src/Features/Subscription/SubscriptionController.js +++ b/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, }) } } diff --git a/services/web/app/views/subscriptions/interstitial-payment-light-design.pug b/services/web/app/views/subscriptions/interstitial-payment-light-design.pug index 0c0883230f..9250fd59a5 100644 --- a/services/web/app/views/subscriptions/interstitial-payment-light-design.pug +++ b/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 diff --git a/services/web/app/views/subscriptions/interstitial-payment.pug b/services/web/app/views/subscriptions/interstitial-payment.pug index 1ccf5c31f3..a771af7dfc 100644 --- a/services/web/app/views/subscriptions/interstitial-payment.pug +++ b/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 diff --git a/services/web/app/views/subscriptions/plans-light-design.pug b/services/web/app/views/subscriptions/plans-light-design.pug index e3b1935299..d171a024c8 100644 --- a/services/web/app/views/subscriptions/plans-light-design.pug +++ b/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 diff --git a/services/web/app/views/subscriptions/plans.pug b/services/web/app/views/subscriptions/plans.pug index d34e94eacc..50e17b09c1 100644 --- a/services/web/app/views/subscriptions/plans.pug +++ b/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 diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js index 0dbb0aedda..2e23480110 100644 --- a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js +++ b/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() diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-tracking.ts b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-tracking.ts new file mode 100644 index 0000000000..ae5e8abf76 --- /dev/null +++ b/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 } + ) +} diff --git a/services/web/frontend/js/utils/meta.ts b/services/web/frontend/js/utils/meta.ts index 5750292705..f009afa050 100644 --- a/services/web/frontend/js/utils/meta.ts +++ b/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