From bfc2e24bbfc08f67ed9c9b1d93474029bc01dc8b Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Wed, 21 Dec 2022 00:03:31 +0100
Subject: [PATCH] feat(tracker): added actions monitoring

---
 src/components/SearchBar.vue            |  1 +
 src/layouts/base.layout.vue             |  1 +
 src/modules/tracker/tracker.services.ts | 11 +++++++++++
 src/modules/tracker/tracker.types.ts    |  3 +++
 src/pages/About.vue                     |  1 +
 src/plugins/plausible.plugin.ts         |  3 ++-
 src/shims.d.ts                          |  7 +++++++
 7 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/tracker/tracker.services.ts
 create mode 100644 src/modules/tracker/tracker.types.ts

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 22842a42..a93f46a1 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 e2132185..5c050d3d 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 00000000..c05dccc5
--- /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 00000000..edf79208
--- /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 7817b508..ca717ff6 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 56a88699..04bb2a27 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 f8798e57..34ae7619 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;