ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Remove usage of sessionStorage in matomoClient

This commit is contained in:
Daniel Egger 2023-04-05 12:28:30 +02:00
parent b27e13fa12
commit be432bb70f
3 changed files with 22 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/helpers/matomo-client.ts
View File

@ -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;
}
}

3
client/src/mixins/me.ts
View File

@ -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);
},

8
client/src/router/index.js
View File

@ -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);
}