Add Hotjar

* add hotjar

* use env vars

.env.example

@@ -1,3 +1,5 @@
 NEXT_PUBLIC_DOCSEARCH_APP_ID=R2IYF7ETH7
 NEXT_PUBLIC_DOCSEARCH_API_KEY=599cec31baffa4868cae4e79f180729b
 NEXT_PUBLIC_DOCSEARCH_INDEX_NAME=docsearch
+NEXT_PUBLIC_HOTJAR_ID=3793483
+NEXT_PUBLIC_HOTJAR_VERSION=6

package.json

@@ -13,6 +13,7 @@
     "@docsearch/react": "^3.2.1",
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.18",
+    "@hotjar/browser": "^1.0.9",
     "@markdoc/markdoc": "0.3.0",
     "@markdoc/next.js": "0.2.3",
     "@sindresorhus/slugify": "^2.1.0",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@docsearch/react':
     specifier: ^3.2.1
@@ -10,6 +14,9 @@ dependencies:
   '@heroicons/react':
     specifier: ^2.0.18
     version: 2.0.18(react@18.2.0)
+  '@hotjar/browser':
+    specifier: ^1.0.9
+    version: 1.0.9
   '@markdoc/markdoc':
     specifier: 0.3.0
     version: 0.3.0(react@18.2.0)
@@ -267,6 +274,10 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@hotjar/browser@1.0.9:
+    resolution: {integrity: sha512-n9akDMod8BLGpYEQCrHwlYWWd63c1HlhUSXNIDfClZtKYXbUjIUOFlNZNNcUxgHTCsi4l2i+SWKsGsO0t93S8w==}
+    dev: false
+
   /@humanwhocodes/config-array@0.11.8:
     resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
     engines: {node: '>=10.10.0'}
@@ -788,6 +799,7 @@ packages:
 
   /@types/linkify-it@3.0.2:
     resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -802,6 +814,7 @@ packages:
 
   /@types/mdurl@1.0.2:
     resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
+    requiresBuild: true
     dev: false
     optional: true
 

src/components/Layout.jsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import Link from 'next/link'
+import Hotjar from '@hotjar/browser';
 
 import { Header } from '@/components/Header'
 import { Navigation } from '@/components/Navigation'
@@ -13,6 +14,9 @@ export function Layout({ children, page }) {
   const Hero = page.activeHero
   useLightense()
   useAccentClass(page.product)
+  if(process.env.NEXT_HOTJAR_ID && process.env.NEXT_HOTJAR_Version){
+    Hotjar.init(process.env.NEXT_HOTJAR_ID, process.env.NEXT_HOTJAR_Version);
+  }
 
   return (
     <>