docs: track anonymous search queries

Author: atinux

docs/app.vue

@@ -1,7 +1,8 @@
 <script setup>
+import { debounce } from 'perfect-debounce'
 const { mapContentNavigation } = useElementsHelpers()
 
-const route = useRoute()
+const search = ref(null)
 useServerSeoMeta({
   titleTemplate: '%s - Nuxt Image',
   ogSiteName: 'Nuxt Image',
@@ -34,6 +35,11 @@ const { data: navigation } = await useAsyncData('navigation', () => fetchContent
 
 // Provide
 provide('navigation', navigation)
+
+watch(() => search.value?.commandPaletteRef?.query, debounce((query) => {
+  if (!query) return
+  useTrackEvent('Search', { props: { results: `${search.value?.commandPaletteRef.results.length}` } })
+}, 500))
 </script>
 
 <template>
@@ -72,6 +78,6 @@ provide('navigation', navigation)
     </template>
   </UFooter>
   <ClientOnly>
-    <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
+    <LazyUDocsSearch ref="search" :files="files" :navigation="navigation" :links="links" />
   </ClientOnly>
 </template>

docs/package.json

@@ -13,20 +13,21 @@
     "@iconify-json/simple-icons": "^1.1.70",
     "@nuxt/content": "^2.8.2",
     "@nuxt/image": "link:..",
-    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28242263.01d174c",
+    "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28245154.98fc0f6",
     "@nuxthq/studio": "^0.14.1",
     "@nuxtjs/fontaine": "^0.4.1",
     "@nuxtjs/google-fonts": "^3.0.2",
     "@nuxtjs/plausible": "^0.2.3",
     "@vueuse/core": "^10.4.1",
-    "@vueuse/nuxt": "^10.4.1"
+    "@vueuse/nuxt": "^10.4.1",
+    "nuxt": "^3.7.1",
+    "nuxt-og-image": "^2.0.25",
+    "perfect-debounce": "^1.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.41.3",
     "@nuxt/devtools": "0.8.3",
     "@types/node": "^20.6.0",
-    "eslint": "^8.49.0",
-    "nuxt": "^3.7.3",
-    "nuxt-og-image": "^2.0.26"
+    "eslint": "^8.49.0"
   }
 }