Remove usage of sessionStorage in matomoClient

client/src/helpers/matomo-client.ts

@@ -4,46 +4,42 @@ import {
   CHAPTER_TITLE_TYPE,
   CONTENT_TYPE,
   OBJECTIVE_GROUP_TYPE,
-  OBJECTIVE_TYPE
+  OBJECTIVE_TYPE,
 } from '@/consts/types';
 
-const matomoLastUrlKey = 'matomoLastUrl';
+export type matomoUserRole = 'Student' | 'Teacher';
-const matomoLastUserIdKey = 'matomoLastUserId';
-const matomoLastEventDataKey = 'matomoLastEventData';
 
+let matomoLastUrl = '';
+let matomoLastUserId = '';
+let matomoLastEventData = '';
 
 export function matomoTrackPageView(absolutePath: string = '/', title?: string) {
   // see https://developer.matomo.org/guides/spa-tracking for details
   const url = window.location.origin + absolutePath;
-  const lastUrl = window.sessionStorage.getItem(matomoLastUrlKey);
 
-  if (lastUrl !== url) {
+  if (matomoLastUrl !== url) {
-    log.debug('trackMatomoPageView', {url, lastUrl, title});
+    // do not track the same url twice
+    log.debug('trackMatomoPageView', { url, matomoLastUrl, title });
     // @ts-ignore
     window._paq.push(['setCustomUrl', url]);
     // @ts-ignore
     window._paq.push(['trackPageView', title]);
-    window.sessionStorage.setItem(matomoLastUrlKey, url);
+    matomoLastUrl = url;
-  } else {
-    // do not track the same url twice
   }
 }
 
-
 export function matomoTrackEvent(category: string, action: string, name?: string, value?: number) {
-  const data = {category, action, name, value};
+  const data = { category, action, name, value };
   const dataJSON = JSON.stringify(data);
-  const lastEventData = window.sessionStorage.getItem(matomoLastEventDataKey);
 
-  if (lastEventData !== dataJSON) {
+  if (matomoLastEventData !== dataJSON) {
-    log.debug('trackEvent', {category, action, name, value});
+    log.debug('matomoTrackEvent', { category, action, name, value });
     // @ts-ignore
     window._paq.push(['trackEvent', category, action, name, value]);
-    window.sessionStorage.setItem(matomoLastEventDataKey, dataJSON);
+    matomoLastEventData = dataJSON;
   }
 }
 
-
 export function matomoTrackModuleVisibilityEvent(blockType: string, block: any, hidden: boolean) {
   let eventAction = '';
   let eventName = undefined;
@@ -74,13 +70,10 @@ export function matomoTrackModuleVisibilityEvent(blockType: string, block: any,
   matomoTrackEvent('Modul Anpassen - Sichtbarkeit', eventAction, eventName);
 }
 
-
+export function matomoTrackUser(userId: string, role: matomoUserRole = 'Student') {
-export function matomoTrackUser(userId: string, role: "Student" | "Teacher" = 'Student') {
   // see https://developer.matomo.org/guides/tracking-javascript-guide#user-id for the process
-  const lastUserId = window.sessionStorage.getItem(matomoLastUserIdKey);
+  if (matomoLastUserId !== userId) {
-
+    log.debug('matomoTrackUser', { userId, matomoLastUserId, role });
-  if (lastUserId !== userId) {
-    log.debug('trackUser', {userId, lastUserId, role});
 
     if (userId) {
       // @ts-ignore
@@ -89,7 +82,7 @@ export function matomoTrackUser(userId: string, role: "Student" | "Teacher" = 'S
       window._paq.push(['setCustomDimension', 1, role]);
     } else {
       // @ts-ignore
-      window._paq.push(['deleteCustomDimension', 1])
+      window._paq.push(['deleteCustomDimension', 1]);
       // User has just logged out, we reset the User ID
       // @ts-ignore
       window._paq.push(['resetUserId']);
@@ -103,6 +96,6 @@ export function matomoTrackUser(userId: string, role: "Student" | "Teacher" = 'S
       window._paq.push(['appendToTrackingUrl', '']);
     }
 
-    window.sessionStorage.setItem(matomoLastUserIdKey, userId || '');
+    matomoLastUserId = userId;
   }
 }

client/src/mixins/me.ts

@@ -1,7 +1,7 @@
 import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 import { computed } from 'vue';
 import { useQuery } from '@vue/apollo-composable';
-import {matomoTrackPageView, matomoTrackUser} from '@/helpers/matomo-client';
+import { matomoTrackPageView, matomoTrackUser } from '@/helpers/matomo-client';
 
 export interface Me {
   selectedClass: {
@@ -111,7 +111,6 @@ const meMixin = {
       return getTopicRoute(this.$data.me);
     },
     schoolClass(): any {
-      // console.log('schoolClass legacy');
       // @ts-ignore
       return getSelectedClass(this.$data.me);
     },

client/src/router/index.js

@@ -1,5 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import log from 'loglevel';
 
 import moduleRoutes from './module.routes';
 import portfolioRoutes from './portfolio.routes';
@@ -66,7 +65,7 @@ const routes = [
     path: '/instrument/:slug',
     name: 'instrument',
     component: instrument,
-    meta: { layout: LAYOUT_SIMPLE, matomoUrlCallback: (to) => `/instrument/${to.params.slug}` }
+    meta: { layout: LAYOUT_SIMPLE, matomoUrlCallback: (to) => `/instrument/${to.params.slug}` },
   },
   { path: '/submission/:id', name: 'submission', component: submission, meta: { layout: LAYOUT_SIMPLE } },
   {
@@ -80,7 +79,8 @@ const routes = [
     path: '/join-class',
     name: 'join-class',
     component: joinClass,
-    meta: { layout: LAYOUT_SIMPLE, matomoUrl: '/join-class' } },
+    meta: { layout: LAYOUT_SIMPLE, matomoUrl: '/join-class' },
+  },
   {
     path: '/survey/:id',
     component: surveyPage,
@@ -148,8 +148,6 @@ router.afterEach(() => {
 });
 
 router.afterEach((to) => {
-  log.debug('matomo router.afterEach', to);
-
   if (to.meta.matomoUrl) {
     matomoTrackPageView(to.meta.matomoUrl);
   }