docs(app): improve analytics tracking

Author: benjamincanac

docs/app/components/FrameworkTabs.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-const { framework, frameworks } = useFrameworks()
-const { track } = useAnalytics()
+const { framework, setFramework, frameworks } = useFrameworks()
 
 const value = ref<string | undefined>(undefined)
 
@@ -12,8 +11,7 @@ watch(framework, () => {
 })
 
 function onFrameworkChange(newFramework: string) {
-  framework.value = newFramework
-  track('Framework Tab Switched', { framework: newFramework })
+  setFramework(newFramework as 'nuxt' | 'vue', 'tabs')
 }
 </script>
 

docs/app/components/PageHeaderLinks.vue

@@ -13,7 +13,7 @@ const items = [
     label: 'Copy Markdown link',
     icon: 'i-lucide-link',
     onSelect() {
-      track('Page Action', { action: 'Copy Markdown Link' })
+      track('Page Action', { action: 'Copy Markdown Link', page: route.path })
       copy(mdPath.value)
       toast.add({
         title: 'Copied to clipboard',
@@ -27,7 +27,7 @@ const items = [
     target: '_blank',
     to: `/raw${route.path}.md`,
     onSelect() {
-      track('Page Action', { action: 'View as Markdown' })
+      track('Page Action', { action: 'View as Markdown', page: route.path })
     }
   },
   {
@@ -36,7 +36,7 @@ const items = [
     target: '_blank',
     to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`,
     onSelect() {
-      track('Page Action', { action: 'Open in ChatGPT' })
+      track('Page Action', { action: 'Open in ChatGPT', page: route.path })
     }
   },
   {
@@ -45,13 +45,13 @@ const items = [
     target: '_blank',
     to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`,
     onSelect() {
-      track('Page Action', { action: 'Open in Claude' })
+      track('Page Action', { action: 'Open in Claude', page: route.path })
     }
   }
 ]
 
 async function copyPage() {
-  track('Page Action', { action: 'Copy Page' })
+  track('Page Action', { action: 'Copy Page', page: route.path })
   copy(await $fetch<string>(`/raw${route.path}.md`))
 }
 </script>

docs/app/components/content/ComponentCode.vue

@@ -8,6 +8,8 @@ import { CalendarDate, Time } from '@internationalized/date'
 import * as theme from '#build/ui'
 import { get, set } from '#ui/utils'
 
+const { track } = useAnalytics()
+
 interface CastImport {
   name: string
   from: string
@@ -479,6 +481,7 @@ const { data: ast } = useAsyncData(codeKey, async () => {
             size="sm"
             class="absolute -bottom-[13px] -right-[13px] z-1 rounded-full lg:opacity-0 lg:group-hover/component:opacity-100 ring-muted transition-opacity duration-200"
             aria-label="Open in playground"
+            @click="track('Playground Opened', { component: camelName, source: 'code' })"
           />
         </UTooltip>
 

docs/app/components/content/ComponentExample.vue

@@ -5,6 +5,8 @@ import { hash } from 'ohash'
 import { useElementSize } from '@vueuse/core'
 import { get, set } from '#ui/utils'
 
+const { track } = useAnalytics()
+
 const props = withDefaults(defineProps<{
   name: string
   class?: any
@@ -262,6 +264,7 @@ const urlSearchParams = computed(() => {
               size="sm"
               class="absolute -bottom-[13px] -right-[13px] z-1 rounded-full lg:opacity-0 lg:group-hover/component:opacity-100 ring-muted transition-opacity duration-200"
               aria-label="Open in playground"
+              @click="track('Playground Opened', { component: camelName, source: 'example' })"
             />
           </UTooltip>
 

docs/app/components/header/Header.vue

@@ -2,6 +2,14 @@
 const route = useRoute()
 const { desktopLinks } = useHeader()
 const { open } = useChat()
+const { track } = useAnalytics()
+
+function toggleChat() {
+  if (!open.value) {
+    track('AI Chat Opened', { source: 'header' })
+  }
+  open.value = !open.value
+}
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
@@ -29,7 +37,7 @@ const { open } = useChat()
           variant="ghost"
           icon="i-lucide-bot-message-square"
           aria-label="Ask AI for help"
-          @click="open = !open"
+          @click="toggleChat"
         />
       </UTooltip>
 

docs/app/components/theme-picker/ThemePicker.vue

@@ -11,7 +11,7 @@ watch(open, (isOpen) => {
 })
 
 const { copy: copyCSS, copied: copiedCSS } = useClipboard()
-const { copy: copyAppConfig, copied: copiedAppConfig } = useClipboard()
+const { copy: copyConfig, copied: copiedConfig } = useClipboard()
 
 const {
   neutralColors,
@@ -32,7 +32,7 @@ const {
   hasConfigChanges,
   configLabel,
   exportCSS,
-  exportAppConfig,
+  exportConfig,
   resetTheme
 } = useTheme()
 </script>
@@ -246,9 +246,9 @@ const {
             variant="soft"
             size="sm"
             :label="configLabel"
-            :icon="copiedAppConfig ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+            :icon="copiedConfig ? 'i-lucide-copy-check' : 'i-lucide-copy'"
             class="flex-1 text-[11px]"
-            @click="copyAppConfig(exportAppConfig())"
+            @click="copyConfig(exportConfig())"
           />
           <UTooltip text="Reset theme">
             <UButton

docs/app/composables/useFrameworks.ts

@@ -2,9 +2,9 @@ export function useFrameworks() {
   const framework = useCookie('nuxt-ui-framework', { default: () => 'nuxt' })
   const { track } = useAnalytics()
 
-  function setFramework(value: 'nuxt' | 'vue') {
+  function setFramework(value: 'nuxt' | 'vue', source?: string) {
     framework.value = value
-    track('Framework Switched', { framework: value })
+    track('Framework Switched', { framework: value, source: source || 'search' })
   }
 
   const frameworks = computed(() => [{
@@ -21,6 +21,7 @@ export function useFrameworks() {
 
   return {
     framework,
+    setFramework,
     frameworks
   }
 }

docs/app/composables/useSearch.ts

@@ -7,7 +7,7 @@ export function useSearch() {
   const searchTerm = ref('')
 
   function onSelect() {
-    track('AI Chat Opened', { hasSearchTerm: !!searchTerm.value })
+    track('AI Chat Opened', { source: 'search', hasSearchTerm: !!searchTerm.value })
 
     if (searchTerm.value) {
       messages.value = [...messages.value, {

docs/app/composables/useTheme.ts

@@ -244,8 +244,8 @@ export function useTheme() {
     return lines.join('\n')
   }
 
-  function exportAppConfig(): string {
-    track('Theme Exported', { type: 'AppConfig' })
+  function exportConfig(): string {
+    track('Theme Exported', { type: 'Config', framework: framework.value })
 
     const config: Record<string, any> = {}
 
@@ -415,7 +415,7 @@ export function useTheme() {
     hasConfigChanges,
     configLabel: computed(() => framework.value === 'vue' ? 'vite.config.ts' : 'app.config.ts'),
     exportCSS,
-    exportAppConfig,
+    exportConfig,
     applyThemeSettings,
     resetTheme
   }