diff --git a/client/src/helpers/matomo-client.ts b/client/src/helpers/matomo-client.ts index b38d6f4e..8e1fa5a2 100644 --- a/client/src/helpers/matomo-client.ts +++ b/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'; -const matomoLastUserIdKey = 'matomoLastUserId'; -const matomoLastEventDataKey = 'matomoLastEventData'; +export type matomoUserRole = 'Student' | 'Teacher'; +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) { - log.debug('trackMatomoPageView', {url, lastUrl, title}); + if (matomoLastUrl !== url) { + // 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); - } else { - // do not track the same url twice + matomoLastUrl = url; } } - 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) { - log.debug('trackEvent', {category, action, name, value}); + if (matomoLastEventData !== dataJSON) { + 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: "Student" | "Teacher" = 'Student') { +export function matomoTrackUser(userId: string, role: matomoUserRole = 'Student') { // see https://developer.matomo.org/guides/tracking-javascript-guide#user-id for the process - const lastUserId = window.sessionStorage.getItem(matomoLastUserIdKey); - - if (lastUserId !== userId) { - log.debug('trackUser', {userId, lastUserId, role}); + if (matomoLastUserId !== userId) { + log.debug('matomoTrackUser', { userId, matomoLastUserId, 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; } } diff --git a/client/src/mixins/me.ts b/client/src/mixins/me.ts index f8307d4a..05c58cf7 100644 --- a/client/src/mixins/me.ts +++ b/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); }, diff --git a/client/src/router/index.js b/client/src/router/index.js index fb579a49..c98d6e81 100644 --- a/client/src/router/index.js +++ b/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); }