Merge branch 'feature/99-add-rudimentary-matomo-tracker-to-the-website' into 'main'

Resolve "Add rudimentary matomo tracker to the website"

Closes #99

See merge request !96

README.md

@@ -6,10 +6,10 @@ This is the Frontend to manage your S3 Buckets and start Workflows.
 
 ## Environment Variables
 
-The docker container replaces them in the `env.template.js` file and moves that file to the same location as the `index.html`.
+The docker container replaces them in the `env.template.js` file and moves that file to the same location as
+the `index.html`.
 When accessing the website, these variables will be loaded dynamically into the application.
 
-
 | Variable                | Default | Value    | Description                                      |
 |-------------------------|---------|----------|--------------------------------------------------|
 | `AUTH_API_BASE_URL`     | unset   | HTTP URL | Base URL for the Auth Service API                |
@@ -18,7 +18,10 @@ When accessing the website, these variables will be loaded dynamically into the
 | `S3PROXY_API_BASE_URL`  | unset   | HTTP URL | Base URL for the S3Proxy Service API             |
 | `S3_URL`                | unset   | HTTP URL | URL of the S3 storage to interact with           |
 | `DEV_SYSTEM`            | `false` | boolean  | Flag if the service is installed on a Dev system |
+| `MATOMO_HOST`           | unset   | HTTP URL | URL to a Matomo instance to enable tracking      |
+| `MATOMO_SITE_ID`        | unset   | integer  | Site id of the website on the Matomo instance    |
 
 ## License
 
-The API is licensed under the [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0) license. See the [License](LICENSE) file for more information
+The API is licensed under the [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0) license. See
+the [License](LICENSE) file for more information.

package.json

@@ -34,6 +34,7 @@
     "showdown": "~2.1.0",
     "sortablejs": "^1.15.2",
     "vue": "~3.4.0",
+    "vue-matomo": "^4.2.0",
     "vue-router": "~4.2.0",
     "vue3-cookies": "~1.0.0"
   },

src/App.vue

@@ -47,6 +47,18 @@ onBeforeMount(() => {
     },
   );
   store.setToken(cookies.get("bearer"));
+  router.afterEach((to, from) => {
+    window._paq.push(["setReferrerUrl", from.path]);
+    window._paq.push(["deleteCustomVariables", "page"]);
+    window._paq.push(["deleteCustomDimension", 1]);
+    window._paq.push(["setCustomUrl", to.path]);
+    window._paq.push(["setDocumentTitle", to.name]);
+    if (store.currentUID.length > 0) {
+      window._paq.push(["setUserId", store.currentUID]);
+    }
+    window._paq.push(["trackPageView"]);
+    window._paq.push(["enableLinkTracking"]);
+  });
   router.beforeEach(async (to) => {
     // make sure the user is authenticated
     if (

src/assets/env.template.js

@@ -8,4 +8,6 @@
   window["env"]["authApiUrl"] = "${AUTH_API_BASE_URL}";
   window["env"]["resourceApiUrl"] = "${RESOURCE_API_BASE_URL}";
   window["env"]["devSystem"] = "${DEV_SYSTEM}";
+  window["env"]["matomoHost"] = "${MATOMO_HOST}";
+  window["env"]["matomoSiteId"] = "${MATOMO_SITE_ID}";
 })(this);

src/components/FooterBottom.vue

@@ -4,9 +4,22 @@
   <footer
     class="navbar navbar-expand-lg bd-navbar w-100 border-top border-secondary mt-auto p-2"
   >
-    <nav
-      class="container-xxl bd-gutter flex-wrap flex-lg-nowrap text-light"
-    ></nav>
+    <nav class="container-xxl bd-gutter text-light justify-content-end">
+      <ul class="m-0 p-0">
+        <li>
+          <router-link :to="{ name: 'imprint' }">Imprint</router-link>
+        </li>
+        <li>
+          <router-link :to="{ name: 'privacy' }">Privacy</router-link>
+        </li>
+        <li>
+          <router-link :to="{ name: 'terms' }">Terms</router-link>
+        </li>
+        <li>
+          <a href="https://gitlab.ub.uni-bielefeld.de/cmg/clowm">GitLab</a>
+        </li>
+      </ul>
+    </nav>
   </footer>
 </template>
 
@@ -14,4 +27,25 @@
 footer {
   background: rgb(255, 177, 45);
 }
+
+li {
+  display: inline;
+  margin-right: 0.5rem !important;
+}
+
+li:not(:first-child):before {
+  content: "·";
+  margin-right: 0.5rem !important;
+  color: var(--bs-dark);
+}
+
+a {
+  text-decoration: none;
+  color: var(--bs-dark);
+}
+
+a:hover {
+  text-decoration: underline;
+  color: white;
+}
 </style>

src/components/modals/BootstrapModal.vue

@@ -17,6 +17,15 @@ const modalSizeClass = computed<string>(() => {
   }
   return "modal-" + props.sizeModifier;
 });
+
+function trackModalShow() {
+  window._paq.push([
+    "trackEvent",
+    "Modal",
+    "Show " + props.modalLabel,
+    props.trackModalValue,
+  ]);
+}
 </script>
 
 <template>
@@ -27,6 +36,7 @@ const modalSizeClass = computed<string>(() => {
     :aria-labelledby="modalLabel"
     aria-hidden="true"
     :data-bs-backdrop="staticBackdrop ? 'static' : null"
+    v-on="{ 'show.bs.modal': trackModalShow }"
   >
     <div
       class="modal-dialog modal-dialog-centered modal-dialog-scrollable"

src/environment.ts

@@ -7,6 +7,8 @@ export const environment: env = {
   AUTH_API_BASE_URL: windowEnv["authApiUrl"],
   WORKFLOW_API_BASE_URL: windowEnv["workflowApiUrl"],
   RESOURCE_API_BASE_URL: windowEnv["resourceApiUrl"],
+  MATOMO_SITE_ID: parseInt(windowEnv["matomoSiteId"]),
+  MATOMO_HOST: windowEnv["matomoHost"],
   DEV_SYSTEM: windowEnv["devSystem"].toLowerCase() === "true",
 };
 
@@ -15,6 +17,8 @@ type env = {
   S3PROXY_API_BASE_URL: string;
   AUTH_API_BASE_URL: string;
   WORKFLOW_API_BASE_URL: string;
+  MATOMO_SITE_ID: number;
+  MATOMO_HOST: string;
   RESOURCE_API_BASE_URL: string;
   DEV_SYSTEM: boolean;
 };

src/main.ts

@@ -5,6 +5,8 @@ import App from "./App.vue";
 import router from "./router";
 import { Chart, Colors } from "chart.js";
 import zoomPlugin from "chartjs-plugin-zoom";
+import VueMatomo from "vue-matomo";
+import { environment } from "@/environment";
 
 Chart.register(zoomPlugin, Colors);
 
@@ -37,6 +39,22 @@ globalCookiesConfig({
 
 const app = createApp(App);
 
+declare global {
+  // tslint:disable-next-line:interface-name
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _paq: any[];
+  }
+}
+
+if (environment.MATOMO_HOST && environment.MATOMO_SITE_ID) {
+  app.use(VueMatomo, {
+    host: environment.MATOMO_HOST,
+    siteId: environment.MATOMO_SITE_ID,
+    disableCookies: true,
+  });
+}
+
 app.use(createPinia());
 app.use(router);
 

src/router/index.ts

@@ -38,6 +38,30 @@ const router = createRouter({
         name: "buckets",
       },
     },
+    {
+      path: "/privacy",
+      name: "privacy",
+      meta: {
+        title: "Privacy Policy",
+      },
+      component: import("../views/PrivacyPolicyView.vue"),
+    },
+    {
+      path: "/terms",
+      name: "terms",
+      meta: {
+        title: "Terms of Usage",
+      },
+      component: import("../views/TermsOfUsageView.vue"),
+    },
+    {
+      path: "/imprint",
+      name: "imprint",
+      meta: {
+        title: "Imprint",
+      },
+      component: import("../views/ImprintView.vue"),
+    },
     {
       path: "/:pathMatch(.*)",
       meta: {

src/stores/users.ts

@@ -112,6 +112,7 @@ export const useAuthStore = defineStore({
       useNameStore().addNameToMapping(user.uid, user.display_name);
     },
     logout() {
+      window._paq.push(["resetUserId"]);
       S3ProxyOpenAPI.TOKEN = undefined;
       AuthOpenAPI.TOKEN = undefined;
       WorkflowOpenAPI.TOKEN = undefined;

src/types/vue-matomo.d.ts

+declare module "vue-matomo";

src/views/ImprintView.vue

+<script setup lang="ts"></script>
+
+<template>
+  <h2>Impressum</h2>
+  <p>TBD</p>
+</template>
+
+<style scoped></style>

src/views/PrivacyPolicyView.vue

+<script setup lang="ts"></script>
+
+<template>
+  <h2>Privacy Policy</h2>
+  <p>TBD</p>
+</template>
+
+<style scoped></style>

src/views/TermsOfUsageView.vue

+<script setup lang="ts"></script>
+
+<template>
+  <h2>Terms of Usage</h2>
+  <p>TBD</p>
+</template>
+
+<style scoped></style>