feat(tracker): added actions monitoring

src/components/SearchBar.vue

@@ -61,6 +61,7 @@ function renderOption({ tool }: { tool: Tool }) {
       :render-label="renderOption"
       :default-value="'aa'"
       :get-show="() => true"
+      :on-focus="() => $tracker.trackEvent({ eventName: 'Search-bar focused' })"
     >
       <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
         <n-input

src/layouts/base.layout.vue

@@ -157,6 +157,7 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
               target="_blank"
               class="support-button"
               :bordered="false"
+              @click="() => $tracker.trackEvent({ eventName: 'Support button clicked' })"
             >
               Buy me a coffee
               <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 5px" />

src/modules/tracker/tracker.services.ts

@@ -0,0 +1,11 @@
+import type Plausible from 'plausible-tracker';
+
+export { createTrackerService };
+
+function createTrackerService({ plausible }: { plausible: ReturnType<typeof Plausible> }) {
+  return {
+    trackEvent({ eventName }: { eventName: string }) {
+      plausible.trackEvent(eventName);
+    },
+  };
+}

src/modules/tracker/tracker.types.ts

@@ -0,0 +1,3 @@
+import type { createTrackerService } from './tracker.services';
+
+export type TrackerService = ReturnType<typeof createTrackerService>;

src/pages/About.vue

@@ -25,6 +25,7 @@ useHead({ title: 'About - IT Tools' });
         href="https://github.com/sponsors/CorentinTh"
         rel="noopener"
         target="_blank"
+        @click="() => $tracker.trackEvent({ eventName: 'Support button clicked' })"
       >
         sponsoring me </n-button
       >.

src/plugins/plausible.plugin.ts

@@ -1,4 +1,5 @@
 import { config } from '@/config';
+import { createTrackerService } from '@/modules/tracker/tracker.services';
 import Plausible from 'plausible-tracker';
 import type { App } from 'vue';
 
@@ -7,6 +8,6 @@ export const plausible = {
     const plausible = Plausible(config.plausible);
     plausible.enableAutoPageviews();
 
-    app.config.globalProperties.$plausible = plausible;
+    app.config.globalProperties.$tracker = createTrackerService({ plausible });
   },
 };

src/shims.d.ts

@@ -1,3 +1,10 @@
+import type { TrackerService } from './modules/tracker/tracker.types';
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $tracker: TrackerService;
+  }
+}
+
 declare module '*.vue' {
   import type { ComponentOptions, ComponentOptions } from 'vue';
   const Component: ComponentOptions;