feat(tracker): added actions monitoring

7 files changed, 26 insertions, 1 deletions

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 22842a4..a93f46a 100644
--- a/src/components/SearchBar.vue
+++ b/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
diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
index e213218..5c050d3 100644
--- a/src/layouts/base.layout.vue
+++ b/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" />
diff --git a/src/modules/tracker/tracker.services.ts b/src/modules/tracker/tracker.services.ts
new file mode 100644
index 0000000..c05dccc
--- /dev/null
+++ b/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);
+    },
+  };
+}
diff --git a/src/modules/tracker/tracker.types.ts b/src/modules/tracker/tracker.types.ts
new file mode 100644
index 0000000..edf7920
--- /dev/null
+++ b/src/modules/tracker/tracker.types.ts
@@ -0,0 +1,3 @@
+import type { createTrackerService } from './tracker.services';
+
+export type TrackerService = ReturnType<typeof createTrackerService>;
diff --git a/src/pages/About.vue b/src/pages/About.vue
index 7817b50..ca717ff 100644
--- a/src/pages/About.vue
+++ b/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
       >.
diff --git a/src/plugins/plausible.plugin.ts b/src/plugins/plausible.plugin.ts
index 56a8869..04bb2a2 100644
--- a/src/plugins/plausible.plugin.ts
+++ b/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 });
   },
 };
diff --git a/src/shims.d.ts b/src/shims.d.ts
index f8798e5..34ae761 100644
--- a/src/shims.d.ts
+++ b/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;