Merge pull request #22119 from overleaf/kh-hotjar-on-plans-and-checkout

[web] add hotjar to plans pages

GitOrigin-RevId: eb582a85200747754923f28e7d710a9072577d75

services/web/app/src/Features/Project/ProjectController.js

@@ -807,6 +807,7 @@ const _ProjectController = {
             ? usedLatex
             : null,
         isSaas: Features.hasFeature('saas'),
+        shouldLoadHotjar: splitTestAssignments.hotjar?.variant === 'enabled',
       })
       timer.done()
     } catch (err) {

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

@@ -130,6 +130,8 @@ async function plansPage(req, res) {
       ? formatCurrencyLocalized
       : SubscriptionHelper.formatCurrencyDefault
 
+  const shouldLoadHotjar = await getShouldLoadHotjar(req, res)
+
   res.render('subscriptions/plans', {
     title: 'plans_and_pricing',
     currentView,
@@ -156,6 +158,7 @@ async function plansPage(req, res) {
     latamCountryBannerDetails,
     countryCode,
     websiteRedesignPlansVariant: 'default',
+    shouldLoadHotjar,
   })
 }
 
@@ -194,6 +197,8 @@ async function plansPageLightDesign(req, res) {
 
   const latamCountryBannerDetails = await getLatamCountryBannerDetails(req, res)
 
+  const shouldLoadHotjar = await getShouldLoadHotjar(req, res)
+
   res.render('subscriptions/plans-light-design', {
     title: 'plans_and_pricing',
     currentView,
@@ -220,6 +225,7 @@ async function plansPageLightDesign(req, res) {
     latamCountryBannerDetails,
     countryCode,
     websiteRedesignPlansVariant: 'light-design',
+    shouldLoadHotjar,
   })
 }
 
@@ -383,6 +389,8 @@ async function interstitialPaymentPage(req, res) {
       'local-ccy-format-v2'
     )
 
+    const shouldLoadHotjar = await getShouldLoadHotjar(req, res)
+
     res.render(template, {
       title: 'subscribe',
       itm_content: req.query?.itm_content,
@@ -403,6 +411,7 @@ async function interstitialPaymentPage(req, res) {
       skipLinkTarget: req.session?.postCheckoutRedirect || '/project',
       websiteRedesignPlansVariant: websiteRedesignPlansAssignment.variant,
       countryCode,
+      shouldLoadHotjar,
     })
   }
 }
@@ -899,6 +908,15 @@ async function getLatamCountryBannerDetails(req, res) {
   return latamCountryBannerDetails
 }
 
+async function getShouldLoadHotjar(req, res) {
+  const assignment = await SplitTestHandler.promises.getAssignment(
+    req,
+    res,
+    'hotjar-plans'
+  )
+  return assignment?.variant === 'enabled'
+}
+
 /**
  * Build a subscription change preview for display purposes
  *

services/web/app/views/project/editor/_meta.pug

@@ -39,6 +39,7 @@ meta(name="ol-linkSharingEnforcement" data-type="boolean" content=linkSharingEnf
 meta(name="ol-usedLatex" data-type="string" content=usedLatex)
 meta(name="ol-ro-mirror-on-client-no-local-storage" data-type="boolean" content=roMirrorOnClientNoLocalStorage)
 meta(name="ol-isSaas" data-type="boolean" content=isSaas)
+meta(name="ol-shouldLoadHotjar" data-type="boolean" content=shouldLoadHotjar)
 
 // translations for the loading page, before i18n has loaded in the client
 meta(name="ol-loadingText", data-type="string" content=translate("loading"))

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

@@ -17,6 +17,7 @@ block append meta
 	meta(name="ol-itm_content" content=itm_content)
 	meta(name="ol-countryCode" content=countryCode)
 	meta(name="ol-websiteRedesignPlansVariant" content=websiteRedesignPlansVariant)
+	meta(name="ol-shouldLoadHotjar" data-type="boolean" content=shouldLoadHotjar)
 
 block content
 	main.website-redesign#main-content

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

@@ -15,6 +15,7 @@ block append meta
 	meta(name="ol-itm_content" content=itm_content)
 	meta(name="ol-countryCode" content=countryCode)
 	meta(name="ol-websiteRedesignPlansVariant" content=websiteRedesignPlansVariant)
+	meta(name="ol-shouldLoadHotjar" data-type="boolean" content=shouldLoadHotjar)
 
 block content
 	main.content.content-alt#main-content

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

@@ -15,6 +15,7 @@ block append meta
 	meta(name="ol-currentView" content=currentView)
 	meta(name="ol-countryCode" content=countryCode)
 	meta(name="ol-websiteRedesignPlansVariant" content=websiteRedesignPlansVariant)
+	meta(name="ol-shouldLoadHotjar" data-type="boolean" content=shouldLoadHotjar)
 
 block content
 	main.website-redesign#main-content

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

@@ -11,6 +11,7 @@ block append meta
 	meta(name="ol-currentView" content=currentView)
 	meta(name="ol-countryCode" content=countryCode)
 	meta(name="ol-websiteRedesignPlansVariant" content=websiteRedesignPlansVariant)
+	meta(name="ol-shouldLoadHotjar" data-type="boolean" content=shouldLoadHotjar)
 
 block content
 	main.content.content-alt#main-content

services/web/frontend/js/infrastructure/hotjar.ts

@@ -1,13 +1,13 @@
 import getMeta from '@/utils/meta'
-import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import { debugConsole } from '@/utils/debugging'
 import { initializeHotjar } from '@/infrastructure/hotjar-snippet'
 
 const { hotjarId, hotjarVersion } = getMeta('ol-ExposedSettings')
+const shouldLoadHotjar = getMeta('ol-shouldLoadHotjar')
 
 let hotjarInitialized = false
 
-if (hotjarId && hotjarVersion && isSplitTestEnabled('hotjar')) {
+if (hotjarId && hotjarVersion && shouldLoadHotjar) {
   const loadHotjar = () => {
     // consent needed
     if (!document.cookie.split('; ').some(item => item === 'oa=1')) {

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

@@ -1,4 +1,5 @@
 import '../../../../marketing'
+import '../../../../infrastructure/hotjar'
 
 import * as eventTracking from '../../../../infrastructure/event-tracking'
 import { setUpStickyHeaderObserver } from './plans-v2-sticky-header'

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

@@ -175,6 +175,7 @@ export interface Meta {
   'ol-settingsGroupSSO': { enabled: boolean } | undefined
   'ol-settingsPlans': Plan[]
   'ol-shouldAllowEditingDetails': boolean
+  'ol-shouldLoadHotjar': boolean
   'ol-showAiErrorAssistant': boolean
   'ol-showBrlGeoBanner': boolean
   'ol-showCouponField': boolean