From 8668103f1b05b3e92e478172857c7d818b0c5d00 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Wed, 21 Aug 2024 11:30:54 +0200
Subject: [PATCH] feat: track run/abort annotation event to Matomo

---
 CHANGELOG.md                          |  4 ++++
 index.d.ts                            | 34 ++++++++++++++++++++++++++-
 src/corpus/analysis/AnalysisPanel.vue |  3 +++
 src/corpus/job/JobStatus.vue          | 10 ++++++--
 src/matomo.ts                         | 19 +++++++++++++++
 5 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 src/matomo.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05f0a41..9da4f7f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,10 @@ As this project is a user-facing application, the places in the semantic version
 
 ## [Unreleased]
 
+### Added
+
+- Track some events to Matomo (run/abort annotation) [#166](https://github.com/spraakbanken/mink-frontend/issues/166)
+
 ### Fixed
 
 - Show loading spinners on the custom config page
diff --git a/index.d.ts b/index.d.ts
index d9f966a..1c3bdfd 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1 +1,33 @@
-declare module "vue-matomo";
+declare module "vue-matomo" {
+  // See https://github.com/AmazingDreams/vue-matomo/blob/master/src/utils.js
+
+  /**
+   * The default export is the Vue plugin.
+   * Usage:
+   *   import matomo from "vue-matomo";
+   *   app.use(matomo, {...})
+   */
+  export default import("vue").Plugin;
+
+  /**
+   * Inject `matomoKey` to use the Matomo object.
+   * Usage:
+   *   const matomo = inject<Matomo>(matomoKey);
+   *   matomo?.trackEvent("Vote", "Up")
+   */
+  export const matomoKey: string;
+
+  /**
+   * This thing is returned when injecting `matomoKey`.
+   * Extend as needed.
+   * Fully described on https://developer.matomo.org/api-reference/tracking-javascript
+   */
+  export type Matomo = {
+    trackEvent: (
+      category: string,
+      action: string,
+      name?: string,
+      value?: number,
+    ) => void;
+  };
+}
diff --git a/src/corpus/analysis/AnalysisPanel.vue b/src/corpus/analysis/AnalysisPanel.vue
index 45ded7e..df562ff 100644
--- a/src/corpus/analysis/AnalysisPanel.vue
+++ b/src/corpus/analysis/AnalysisPanel.vue
@@ -6,6 +6,7 @@ import useExports from "../exports/exports.composable";
 import useJob from "../job/job.composable";
 import ActionButton from "@/components/ActionButton.vue";
 import PendingContent from "@/spin/PendingContent.vue";
+import { useMatomo } from "@/matomo";
 
 const corpusId = useCorpusIdParam();
 const { runJob, jobState, isJobRunning } = useJob(corpusId);
@@ -13,6 +14,7 @@ const { canBeReady } = useCorpusState(corpusId);
 const { exports, loadExports, downloadResult, getDownloadFilename } =
   useExports(corpusId);
 const { isDone } = useCorpusState(corpusId);
+const matomo = useMatomo();
 
 const isPending = ref(false);
 const canRun = computed(
@@ -23,6 +25,7 @@ loadExports();
 
 async function doRunJob() {
   isPending.value = true;
+  matomo?.trackEvent("Corpus", "Run annotation", corpusId);
   await runJob();
   isPending.value = false;
 }
diff --git a/src/corpus/job/JobStatus.vue b/src/corpus/job/JobStatus.vue
index 649506a..65a28f8 100644
--- a/src/corpus/job/JobStatus.vue
+++ b/src/corpus/job/JobStatus.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useMatomo } from "@/matomo";
 import useJob from "@/corpus/job/job.composable";
 import JobStatusMessage from "@/corpus/job/JobStatusMessage.vue";
 import { formatDate } from "@/util";
@@ -7,13 +8,13 @@ import PendingContent from "@/spin/PendingContent.vue";
 import useCorpusIdParam from "@/corpus/corpusIdParam.composable";
 import { useCorpusState } from "@/corpus/corpusState.composable";
 import ActionButton from "@/components/ActionButton.vue";
-import TerminalOutput from "@/components/TerminalOutput.vue";
 import ProgressBar from "@/components/ProgressBar.vue";
 import TextData from "@/components/TextData.vue";
 
 const corpusId = useCorpusIdParam();
 const { abortJob, jobStatus, isJobRunning } = useJob(corpusId);
 const { isFailed } = useCorpusState(corpusId);
+const matomo = useMatomo();
 
 const hasStarted = computed(
   () =>
@@ -21,6 +22,11 @@ const hasStarted = computed(
       (status) => status != "none",
     ) || jobStatus.value?.priority,
 );
+
+async function doAbortJob() {
+  matomo?.trackEvent("Corpus", "Abort annotation", corpusId);
+  await abortJob();
+}
 </script>
 
 <template>
@@ -39,7 +45,7 @@ const hasStarted = computed(
       <ActionButton
         v-if="isJobRunning"
         class="button-danger ml-2"
-        @click="abortJob"
+        @click="doAbortJob"
       >
         {{ $t("job.abort") }}
       </ActionButton>
diff --git a/src/matomo.ts b/src/matomo.ts
new file mode 100644
index 0000000..7c7e06a
--- /dev/null
+++ b/src/matomo.ts
@@ -0,0 +1,19 @@
+import { inject } from "vue";
+import { matomoKey, type Matomo } from "vue-matomo";
+
+/** Use this to call Matomo methods in the context of a setup function. */
+export function useMatomo(): Matomo | undefined {
+  // Specifying the default value avoids console warnings, even if it's just `undefined`.
+  return inject<Matomo | undefined>(matomoKey, undefined);
+}
+
+/**
+ * Exposes supported Matomo commands as methods, which then use `window._paq`.
+ * If the queue is not loaded, nothing happens.
+ */
+export const MatomoProxy = new Proxy<Matomo>({} as Matomo, {
+  get:
+    <F extends keyof Matomo>(target: {}, prop: F) =>
+    (...args: Parameters<Matomo[F]>) =>
+      (window as any)._paq?.push([prop, ...args]),
+});