Introduce analytics

components/rewrite-card.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { trackEvent } from "@aptabase/web";
 import type { FormSubmitEvent } from "@nuxt/ui";
 
 const { user } = useUserSession();
@@ -34,6 +35,10 @@ const validate = ({
 };
 
 const submit = async (event: FormSubmitEvent<typeof formData>) => {
+  trackEvent("rewrite_activity", {
+    activityUrl: event.data.activityUrl,
+  });
+
   await $fetch("/api/rewrite", {
     method: "POST",
     query: {

nuxt.config.ts

@@ -13,6 +13,9 @@ export default defineNuxtConfig({
     stravaVerifyToken: "",
     openaiApiKey: "",
     databaseUrl: "",
+    public: {
+      aptabaseAppKey: "",
+    },
   },
   future: { compatibilityVersion: 4 },
   compatibilityDate: "2025-03-01",

pages/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { omit } from "radash";
+import { diff, omit } from "radash";
+import { trackEvent } from "@aptabase/web";
 
 useHead({ title: "Ghostwriter" });
 
@@ -43,7 +44,17 @@ const saveOp = watchPausable(
       body: toValue(preferences),
     });
   },
-  { initialState: "paused", deep: true },
+  {
+    initialState: "paused",
+    deep: true,
+    onTrigger: (event) => {
+      trackEvent("update_preferences", {
+        key: event.key,
+        value: event.newValue,
+        oldValue: event.oldValue,
+      });
+    },
+  },
 );
 </script>
 

plugins/aptabase.client.ts

@@ -0,0 +1,19 @@
+import { init, trackEvent } from "@aptabase/web";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig();
+
+  nuxtApp.hook("app:mounted", () => {
+    init(config.public.aptabaseAppKey, { isDebug: import.meta.dev });
+  });
+
+  nuxtApp.hook("page:finish", (ctx) => {
+    const route = useRoute();
+
+    trackEvent("page_view", {
+      path: route.path,
+      name: String(route.name),
+      redirectedFrom: String(route.redirectedFrom),
+    });
+  });
+});