Use the whole Hotjar snippet (#21017)

GitOrigin-RevId: 3935d671bdf5299b720f319fd7d8c6879d1819b9

services/web/frontend/js/infrastructure/hotjar-snippet.js

@@ -0,0 +1,15 @@
+// tracking code from https://help.hotjar.com/hc/en-us/articles/115009336727-How-to-Install-Your-Hotjar-Tracking-Code
+export const initializeHotjar = (hotjarId, hotjarVersion) =>
+  (function (h, o, t, j, a, r) {
+    h.hj =
+      h.hj ||
+      function () {
+        ;(h.hj.q = h.hj.q || []).push(arguments)
+      }
+    h._hjSettings = { hjid: hotjarId, hjsv: hotjarVersion }
+    a = o.getElementsByTagName('head')[0]
+    r = o.createElement('script')
+    r.async = 1
+    r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv
+    a.appendChild(r)
+  })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=')

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

@@ -1,9 +1,12 @@
 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')
 
+let hotjarInitialized = false
+
 if (hotjarId && hotjarVersion && isSplitTestEnabled('hotjar')) {
   const loadHotjar = () => {
     // consent needed
@@ -11,22 +14,17 @@ if (hotjarId && hotjarVersion && isSplitTestEnabled('hotjar')) {
       return
     }
 
-    // avoid inserting twice
+    if (!/^\d+$/.test(hotjarId) || !/^\d+$/.test(hotjarVersion)) {
-    if (document.getElementById('hotjar')) {
+      debugConsole.error('Invalid Hotjar id or version')
       return
     }
 
+    // avoid inserting twice
+    if (!hotjarInitialized) {
       debugConsole.log('Loading Hotjar')
-
+      hotjarInitialized = true
-    const url = new URL(`https://static.hotjar.com/c/hotjar-${hotjarId}.js`)
+      initializeHotjar(hotjarId, hotjarVersion)
-    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