Add Hotjar script to the home page (#20758)

GitOrigin-RevId: b7fdb904702d84058c2e3519b17376083ee9cad7

services/web/app/src/Features/StaticPages/HomeController.js

@@ -9,6 +9,7 @@ const SessionManager = require('../Authentication/SessionManager')
 
 const { expressify } = require('@overleaf/promise-utils')
 const logger = require('@overleaf/logger')
+const SplitTestHandler = require('../SplitTests/SplitTestHandler')
 
 const homepageExists = fs.existsSync(
   Path.join(
@@ -35,6 +36,12 @@ async function home(req, res) {
       page: req.path,
     })
 
+    try {
+      await SplitTestHandler.promises.getAssignment(req, res, 'hotjar')
+    } catch {
+      // do nothing
+    }
+
     res.render('external/home/website-redesign/index')
   } else {
     res.redirect('/login')

services/web/app/src/infrastructure/ExpressLocals.js

@@ -406,6 +406,8 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
       sentryDsn: Settings.sentry.publicDSN,
       sentryEnvironment: Settings.sentry.environment,
       sentryRelease: Settings.sentry.release,
+      hotjarId: Settings.hotjar?.id,
+      hotjarVersion: Settings.hotjar?.version,
       enableSubscriptions: Settings.enableSubscriptions,
       gaToken:
         Settings.analytics &&

services/web/frontend/js/features/cookie-banner/index.js

@@ -20,8 +20,10 @@ function setConsent(value) {
   if (value === 'all') {
     document.cookie = 'oa=1' + cookieAttributes
     loadGA()
+    window.dispatchEvent(new CustomEvent('cookie-consent', { detail: true }))
   } else {
     document.cookie = 'oa=0' + cookieAttributes
+    window.dispatchEvent(new CustomEvent('cookie-consent', { detail: false }))
   }
 }
 

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

@@ -0,0 +1,45 @@
+import getMeta from '@/utils/meta'
+import { isSplitTestEnabled } from '@/utils/splitTestUtils'
+import { debugConsole } from '@/utils/debugging'
+
+const { hotjarId, hotjarVersion } = getMeta('ol-ExposedSettings')
+
+if (hotjarId && hotjarVersion && isSplitTestEnabled('hotjar')) {
+  const loadHotjar = () => {
+    // consent needed
+    if (!document.cookie.split('; ').some(item => item === 'oa=1')) {
+      return
+    }
+
+    // avoid inserting twice
+    if (document.getElementById('hotjar')) {
+      return
+    }
+
+    debugConsole.log('Loading Hotjar')
+
+    const url = new URL(`https://static.hotjar.com/c/hotjar-${hotjarId}.js`)
+    url.searchParams.set('sv', hotjarVersion)
+
+    const script = document.createElement('script')
+    script.src = url.toString()
+    script.async = true
+    script.id = 'hotjar'
+
+    document.head.append(script)
+  }
+
+  // load when idle, if supported
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(loadHotjar)
+  } else {
+    loadHotjar()
+  }
+
+  // listen for consent
+  window.addEventListener('cookie-consent', event => {
+    if ((event as CustomEvent<boolean>).detail) {
+      loadHotjar()
+    }
+  })
+}

services/web/frontend/js/pages/marketing/homepage.js

@@ -1,4 +1,5 @@
 import '../../marketing'
+import '../../infrastructure/hotjar' // set up Hotjar
 
 function homepageAnimation(homepageAnimationEl) {
   function createFrames(word, { buildTime, holdTime, breakTime }) {

services/web/types/exposed-settings.ts

@@ -19,6 +19,8 @@ export type ExposedSettings = {
   hasLinkedProjectOutputFileFeature: boolean
   hasSamlBeta?: boolean
   hasSamlFeature: boolean
+  hotjarId?: string
+  hotjarVersion?: string
   ieeeBrandId: number
   isOverleaf: boolean
   maxEntitiesPerProject: number