Use hotjar

package.json

@@ -31,14 +31,14 @@
     "marked": "^9.0.3",
     "next": "13.4.2",
     "next-sitemap": "^4.1.8",
-    "nextjs-google-analytics": "^2.3.3",
     "node-fetch": "^3.3.2",
     "postcss-focus-visible": "^6.0.4",
     "postcss-import": "^14.1.0",
     "prism-react-renderer": "^1.3.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-highlight-words": "^0.20.0",
+    "react-hotjar": "^6.3.1",
     "react-lite-youtube-embed": "^2.3.52",
     "simple-functional-loader": "^1.2.1",
     "swagger-ui-react": "^5.17.9",

src/components/Feedback.jsx

@@ -1,6 +1,7 @@
 import { LikeIcon } from './icons/LikeIcon'
 import { DislikeIcon } from './icons/DislikeIcon'
-import { event } from 'nextjs-google-analytics'
+import { hotjar } from 'react-hotjar'
+
 
 const handleFeedback = (
   identifier,
@@ -21,12 +22,15 @@ const handleFeedback = (
   setShowThanks(true)
   setLoading(false)
 
-  event('submit_feedback', {
-    category: article ? 'article' : 'troubleshooting',
-    label: identifier,
-    helpful: helpful ? 1 : 0,
-    feedback: feedback,
-  })
+  // Send separate, clear events to Hotjar
+  hotjar.event('feedback_submitted')
+  hotjar.event(`feedback_type_${article ? 'article' : 'troubleshooting'}`)
+  hotjar.event(`feedback_helpful_${helpful ? 'yes' : 'no'}`)
+
+  // If there's additional feedback text, send an event (be cautious with privacy)
+  if (feedback) {
+    hotjar.event('feedback_additional_text_provided')
+  }
 }
 
 import { Dialog, Transition } from '@headlessui/react'

src/components/Search.jsx

@@ -6,7 +6,7 @@ import clsx from 'clsx'
 import Highlighter from 'react-highlight-words'
 import { navigation } from '@/components/Layout'
 import { ArrowSmallUpIcon, ArrowSmallDownIcon } from '@heroicons/react/24/solid'
-import { event } from 'nextjs-google-analytics'
+import { hotjar } from 'react-hotjar'
 
 function SearchIcon(props) {
   return (
@@ -31,15 +31,18 @@ function useAutocomplete() {
       onStateChange({ state }) {
         setAutocompleteState(state)
 
+        if (typingTimeout.current) clearTimeout(typingTimeout.current)
         if (typingTimeout.current) clearTimeout(typingTimeout.current)
         if (state.query !== '' && state.query !== lastQueryRef.current) {
           typingTimeout.current = setTimeout(() => {
-            event('search', {
-              search_term: state.query,
-              result_count: state.collections.flatMap(
-                (collection) => collection.items
-              ).length,
-            })
+            hotjar.event('search_query')
+            hotjar.event(`search_query_${state.query}`)
+            hotjar.event(
+              `search_results_count_${
+                state.collections.flatMap((collection) => collection.items)
+                  .length
+              }`
+            )
             lastQueryRef.current = state.query
           }, 1000)
         }
@@ -126,11 +129,8 @@ function SearchResult({ result, autocomplete, collection, query, filter }) {
 
   // Event handler for onSelect
   const onSelect = () => {
-    event('search_article_click', {
-      article_url: result.url,
-      article_title: result.title,
-      search_query: query, // Added search query to event
-    })
+    hotjar.event('search_result_click')
+    hotjar.event(`search_result_type_${result.type}`)
     router.push(result.url)
   }
 
@@ -327,11 +327,8 @@ function FilterButton({ label, isActive, onClick, query }) {
         isActive ? 'bg-lightbluedarker dark:bg-slate-600' : 'dark:bg-slate-800'
       }`}
       onClick={() => {
-        event('filter_click', {
-          filter_type: label,
-          filter_status: !isActive ? 'added' : 'removed',
-          search_query: query,
-        })
+        hotjar.event('filter_click')
+        hotjar.event(`filter_${label}_${isActive ? 'removed' : 'added'}`)
         onClick(label)
       }}
     >

src/pages/_app.jsx

@@ -2,8 +2,8 @@ import Head from 'next/head'
 import { slugifyWithCounter } from '@sindresorhus/slugify'
 import { Inter } from 'next/font/google'
 const inter = Inter({ subsets: ['latin'] })
-import { GoogleAnalytics } from 'nextjs-google-analytics'
-
+import { hotjar } from 'react-hotjar'
+import { useEffect } from 'react'
 import { Layout } from '@/components/Layout'
 import 'focus-visible'
 import '@/styles/tailwind.css'
@@ -104,20 +104,16 @@ export default function App({ Component, pageProps }) {
     ? collectHeadings(pageProps.markdoc.content)
     : []
 
-
+  useEffect(() => {
+    hotjar.initialize({ id: 5018163, sv: 6 })
+  }, [])
 
   return (
     <>
-      <GoogleAnalytics trackPageViews />
-
       <div className={inter.className}>
         <Head>
           <title>{pageTitle}</title>
           {description && <meta name="description" content={description} />}
-          <meta
-            name="google-site-verification"
-            content="5fpjcvtgYaJbTGz1kA5h6gRiVz0vpw3UiiBtRBvm7nc"
-          />
         </Head>
         <Layout
           title={title}