Add Hotjar script to the home page (#20758)

GitOrigin-RevId: b7fdb904702d84058c2e3519b17376083ee9cad7

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