Merged in feature/ms-628-metrics (pull request #126)

MS-628: First version of custom matomo integration

Approved-by: Ramon Wenger

client/src/components/LogoutWidget.vue

@@ -11,6 +11,7 @@
 
 <script>
 import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
+import { matomoTrackUser } from '@/helpers/matomo-client';
 
 export default {
   methods: {
@@ -21,6 +22,7 @@ export default {
         })
         .then(({ data }) => {
           if (data.logout.success) {
+            matomoTrackUser('');
             location.replace('/logout');
           }
         });

client/src/components/content-blocks/assignment/Assignment.vue

@@ -66,6 +66,7 @@ import debounce from 'lodash/debounce';
 import cloneDeep from 'lodash/cloneDeep';
 import { sanitize } from '@/helpers/text';
 import { defineAsyncComponent } from 'vue';
+import { matomoTrackEvent } from '@/helpers/matomo-client';
 
 const SubmissionForm = defineAsyncComponent(() =>
   import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/SubmissionForm.vue')
@@ -189,6 +190,10 @@ export default {
          */
       this.assignment.submission.text = answer;
       this._save(this.assignment.submission);
+
+      if (this.assignment.submission.text.length > 0) {
+        matomoTrackEvent('Auftrag', 'Text mit Eingabe gespeichert', this.assignment.id);
+      }
     },
     changeDocumentUrl(documentUrl) {
       this.assignment.submission.document = documentUrl;
@@ -210,6 +215,7 @@ export default {
           },
         },
       });
+      matomoTrackEvent('Auftrag', 'Ergebnis mit Lehrperson geteilt', this.assignment.id);
     },
     reopen() {
       this.$apollo.mutate({
@@ -259,6 +265,7 @@ export default {
         .then(() => {
           this.spellcheckLoading = false;
         });
+      matomoTrackEvent('Auftrag', 'Rechtschreibung geprüft', this.assignment.id);
     },
   },
 

client/src/components/modules/SnapshotHeader.vue

@@ -56,6 +56,7 @@ import me from '@/mixins/me';
 
 import APPLY_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/applySnapshot.gql';
 import { MODULE_PAGE } from '@/router/module.names';
+import { matomoTrackEvent } from '@/helpers/matomo-client';
 
 const _getChange = (snapshot, index) => {
   try {
@@ -131,6 +132,11 @@ export default {
               },
             },
           }) => {
+            if (this.snapshot.mine) {
+              matomoTrackEvent('Modul Snapshot', 'Snapshot angewendet', slug);
+            } else {
+              matomoTrackEvent('Modul Snapshot', 'Team Snapshot angewendet', slug);
+            }
             this.$router.push({
               name: MODULE_PAGE,
               params: {

client/src/components/modules/SnapshotListItem.vue

@@ -55,6 +55,7 @@ import gql from 'graphql-tag';
 import PenIcon from '@/components/icons/PenIcon';
 import TrashIcon from '@/components/icons/TrashIcon';
 import { removeAtIndex } from '@/graphql/immutable-operations';
+import { matomoTrackEvent } from '@/helpers/matomo-client';
 
 export default {
   props: {
@@ -134,49 +135,53 @@ export default {
           title: 'Snapshot löschen',
         })
         .then(() => {
-          this.$apollo.mutate({
+          this.$apollo
-            mutation: DELETE_SNAPSHOT_MUTATION,
+            .mutate({
-            variables: {
+              mutation: DELETE_SNAPSHOT_MUTATION,
-              input: {
+              variables: {
-                id: this.snapshot.id,
+                input: {
-              },
+                  id: this.snapshot.id,
-            },
-            update: (
-              store,
-              {
-                data: {
-                  deleteSnapshot: { result },
                 },
-              }
+              },
-            ) => {
+              update: (
-              if (result.__typename === 'Success') {
+                store,
-                const slug = this.$route.params.slug;
+                {
-                const query = SNAPSHOTS_QUERY;
+                  data: {
-                const variables = {
+                    deleteSnapshot: { result },
-                  slug,
-                };
-                const { module } = store.readQuery({
-                  query,
-                  variables,
-                });
-                const index = module.snapshots.findIndex((snapshot) => snapshot.id === this.snapshot.id);
-                const snapshots = removeAtIndex(module.snapshots, index);
-
-                const data = {
-                  module: {
-                    ...module,
-                    snapshots,
                   },
-                };
+                }
+              ) => {
+                if (result.__typename === 'Success') {
+                  const slug = this.$route.params.slug;
+                  const query = SNAPSHOTS_QUERY;
+                  const variables = {
+                    slug,
+                  };
+                  const { module } = store.readQuery({
+                    query,
+                    variables,
+                  });
+                  const index = module.snapshots.findIndex((snapshot) => snapshot.id === this.snapshot.id);
+                  const snapshots = removeAtIndex(module.snapshots, index);
 
-                store.writeQuery({
+                  const data = {
-                  query,
+                    module: {
-                  variables,
+                      ...module,
-                  data,
+                      snapshots,
-                });
+                    },
-              }
+                  };
-            },
+
-          });
+                  store.writeQuery({
+                    query,
+                    variables,
+                    data,
+                  });
+                }
+              },
+            })
+            .then(() => {
+              matomoTrackEvent('Modul Snapshot', 'Snapshot gelöscht', this.$route.params.slug);
+            });
         })
         .catch(() => {});
     },
@@ -213,6 +218,13 @@ export default {
           });
         },
       });
+
+      const slug = this.$route.params.slug;
+      if (this.snapshot.shared) {
+        matomoTrackEvent('Modul Snapshot', 'Snapshot mit Team geteilt', slug);
+      } else {
+        matomoTrackEvent('Modul Snapshot', 'Snapshot nicht mehr geteilt', slug);
+      }
     },
   },
 };

client/src/components/modules/SnapshotMenu.vue

@@ -42,6 +42,8 @@ import me from '@/mixins/me';
 
 import CREATE_SNAPSHOT_MUTATION from '@/graphql/gql/mutations/createSnapshot.gql';
 import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
+import log from 'loglevel';
+import { matomoTrackEvent } from '@/helpers/matomo-client';
 
 export default {
   mixins: [me],
@@ -109,12 +111,15 @@ export default {
               createSnapshot: { snapshot },
             },
           }) => {
+            log.debug('snapshot created', snapshot);
+
             this.showPopover = false;
             this.$modal.open('snapshot-created', {
               snapshot,
             });
           }
         );
+      matomoTrackEvent('Modul Snapshot', 'Snapshot erstellt', this.$route.params.slug);
     },
   },
 };

client/src/components/toggle-menu/ToggleEditing.vue

@@ -12,6 +12,7 @@ import Toggle from '@/components/ui/Toggle';
 // import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
 import { gql } from '@apollo/client/core';
 import { setModuleEditMode } from '@/graphql/cache-operations';
+import { matomoTrackEvent } from '@/helpers/matomo-client';
 
 const QUERY = gql`
   query ModuleEditModeQuery($slug: String) {
@@ -56,6 +57,11 @@ export default {
   methods: {
     toggle(newChecked) {
       setModuleEditMode(this.slug, newChecked);
+      if (newChecked) {
+        matomoTrackEvent('Modul Anpassen', 'Eingeschaltet', this.slug);
+      } else {
+        matomoTrackEvent('Modul Anpassen', 'Ausgeschaltet', this.slug);
+      }
     },
   },
 };

client/src/components/visibility/VisibilityAction.vue

@@ -20,10 +20,12 @@
 <script>
 import me from '@/mixins/me';
 
-import { TYPES, CONTENT_TYPE } from '@/consts/types';
+import { CONTENT_TYPE, TYPES } from '@/consts/types';
 import { createVisibilityMutation, hidden } from '@/helpers/visibility';
 
 import { defineAsyncComponent } from 'vue';
+import { matomoTrackModuleVisibilityEvent } from '@/helpers/matomo-client';
+
 const EyeIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon'));
 const ClosedEyeIcon = defineAsyncComponent(() =>
   import(/* webpackChunkName: "icons" */ '@/components/icons/ClosedEyeIcon')
@@ -76,6 +78,8 @@ export default {
         mutation,
         variables,
       });
+
+      matomoTrackModuleVisibilityEvent(this.type, this.block, hidden);
     },
   },
 };

client/src/graphql/gql/queries/roomEntryQuery.gql

@@ -2,6 +2,9 @@
 query RoomEntryQuery($slug: String!) {
   roomEntry(slug: $slug) {
     ...RoomEntryParts
+    room {
+      slug
+    }
     comments {
       text
       owner {

client/src/helpers/matomo-client.ts

@@ -0,0 +1,101 @@
+import log from 'loglevel';
+import {
+  CHAPTER_DESCRIPTION_TYPE,
+  CHAPTER_TITLE_TYPE,
+  CONTENT_TYPE,
+  OBJECTIVE_GROUP_TYPE,
+  OBJECTIVE_TYPE,
+} from '@/consts/types';
+
+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;
+
+  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]);
+    matomoLastUrl = url;
+  }
+}
+
+export function matomoTrackEvent(category: string, action: string, name?: string, value?: number) {
+  const data = { category, action, name, value };
+  const dataJSON = JSON.stringify(data);
+
+  if (matomoLastEventData !== dataJSON) {
+    log.debug('matomoTrackEvent', { category, action, name, value });
+    // @ts-ignore
+    window._paq.push(['trackEvent', category, action, name, value]);
+    matomoLastEventData = dataJSON;
+  }
+}
+
+export function matomoTrackModuleVisibilityEvent(blockType: string, block: any, hidden: boolean) {
+  let eventAction = '';
+  let eventName = undefined;
+
+  switch (blockType) {
+    case CONTENT_TYPE:
+      eventAction = hidden ? 'Inhalt ausgeblendet' : 'Inhalt eingeblendet';
+      eventName = block.title;
+      break;
+    case OBJECTIVE_TYPE:
+      eventAction = hidden ? 'Lernziel ausgeblendet' : 'Lernziel eingeblendet';
+      eventName = block.text;
+      break;
+    case OBJECTIVE_GROUP_TYPE:
+      eventAction = hidden ? 'Lernzielgruppe ausgeblendet' : 'Lernzielgruppe eingeblendet';
+      eventName = block.displayTitle;
+      break;
+    case CHAPTER_TITLE_TYPE:
+      eventAction = hidden ? 'Kapitelüberschrift ausgeblendet' : 'Kapitelüberschrift eingeblendet';
+      eventName = block.title;
+      break;
+    case CHAPTER_DESCRIPTION_TYPE:
+      eventAction = hidden ? 'Kapitelbeschreibung ausgeblendet' : 'Kapitelbeschreibung eingeblendet';
+      eventName = block.title;
+      break;
+  }
+
+  matomoTrackEvent('Modul Anpassen - Sichtbarkeit', eventAction, eventName);
+}
+
+export function matomoTrackUser(userId: string, role: matomoUserRole = 'Student') {
+  // see https://developer.matomo.org/guides/tracking-javascript-guide#user-id for the process
+  if (matomoLastUserId !== userId) {
+    log.debug('matomoTrackUser', { userId, matomoLastUserId, role });
+
+    if (userId) {
+      // @ts-ignore
+      window._paq.push(['setUserId', userId]);
+      // @ts-ignore
+      window._paq.push(['setCustomDimension', 1, role]);
+    } else {
+      // @ts-ignore
+      window._paq.push(['deleteCustomDimension', 1]);
+      // User has just logged out, we reset the User ID
+      // @ts-ignore
+      window._paq.push(['resetUserId']);
+      // we also force a new visit to be created for the pageviews after logout
+      // @ts-ignore
+      window._paq.push(['appendToTrackingUrl', 'new_visit=1']);
+      // @ts-ignore
+      window._paq.push(['trackPageView']);
+      // we finally make sure to not again create a new visit afterwards (important for Single Page Applications)
+      // @ts-ignore
+      window._paq.push(['appendToTrackingUrl', '']);
+    }
+
+    matomoLastUserId = userId;
+  }
+}

client/src/mixins/me.ts

@@ -1,6 +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';
 
 export interface Me {
   selectedClass: {
@@ -110,7 +111,6 @@ const meMixin = {
       return getTopicRoute(this.$data.me);
     },
     schoolClass(): any {
-      console.log('schoolClass legacy');
       // @ts-ignore
       return getSelectedClass(this.$data.me);
     },
@@ -137,6 +137,13 @@ const meMixin = {
         // @ts-ignore
         return this.$getRidOfEdges(data).me;
       },
+      // @ts-ignore
+      result({ data }) {
+        const me = data.me || defaultMe.me;
+        if (me.id) {
+          matomoTrackUser(me.id ?? '', me.isTeacher ? 'Teacher' : 'Student');
+        }
+      },
     },
   },
 };

client/src/pages/article.vue

@@ -39,6 +39,7 @@ import ADD_COMMENT_MUTATION from 'gql/mutations/addComment.gql';
 import CommentInput from '@/components/rooms/CommentInput';
 import Comment from '@/components/rooms/Comment';
 import { defineAsyncComponent } from 'vue';
+import { matomoTrackPageView } from '@/helpers/matomo-client';
 const TextBlock = defineAsyncComponent(() =>
   import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/TextBlock')
 );
@@ -148,6 +149,9 @@ export default {
         variables: {
           slug: this.$route.params.slug,
         },
+        result() {
+          matomoTrackPageView(`/room/${this.roomEntry.room.slug}/${this.roomEntry.slug}`);
+        },
       };
     },
   },

client/src/pages/module/module-base.vue

@@ -9,6 +9,9 @@
 <script>
 import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';
 import ModuleSubNavigation from '@/components/modules/ModuleSubNavigation.vue';
+import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+import { matomoTrackPageView } from '@/helpers/matomo-client';
+
 
 export default {
   components: {
@@ -16,6 +19,12 @@ export default {
     ModuleSubNavigation,
   },
 
+  data() {
+    return {
+      module: {},
+    };
+  },
+
   computed: {
     showNavigation() {
       return !this.$route.meta.hideNavigation && !this.$route.meta.showSubNavigation;
@@ -24,6 +33,21 @@ export default {
       return !!this.$route.meta.showSubNavigation;
     },
   },
+
+  apollo: {
+    module() {
+      return {
+        query: MODULE_DETAILS_QUERY,
+        variables: {
+          slug: this.$route.params.slug,
+        },
+        result() {
+          matomoTrackPageView(`/topic/${this.module.topic.slug}/${this.module.slug}`);
+        },
+        fetchPolicy: 'cache-first',
+      };
+    },
+  },
 };
 </script>
 

client/src/pages/survey.vue

@@ -36,6 +36,7 @@ import { isTeacher } from '@/helpers/is-teacher';
 import { meQuery } from '@/graphql/queries';
 
 import { defineAsyncComponent } from 'vue';
+import { matomoTrackEvent } from '@/helpers/matomo-client';
 const Solution = defineAsyncComponent(() =>
   import(
     /* webpackChunkName: "content-components"
@@ -120,6 +121,7 @@ export default {
   mounted() {
     if (this.surveyData) {
       this.loadSurveyFromServer(this.surveyData);
+      matomoTrackEvent('Übung', 'Übung angezeigt', this.id);
     }
   },
 
@@ -172,42 +174,42 @@ export default {
           data: JSON.stringify(data),
         };
 
-        this.$apollo
+        this.$apollo.mutate({
-          .mutate({
+          mutation: UPDATE_ANSWER,
-            mutation: UPDATE_ANSWER,
+          variables: {
-            variables: {
+            input: {
-              input: {
+              answer,
-                answer,
+            },
+          },
+          update: (
+            store,
+            {
+              data: {
+                updateAnswer: { answer },
               },
-            },
-            update: (
-              store,
-              {
-                data: {
-                  updateAnswer: { answer },
-                },
-              }
-            ) => {
-              const query = SURVEY_QUERY;
-              const variables = { id: this.id };
-              const { survey } = store.readQuery({ query, variables });
-              if (survey) {
-                const newData = {
-                  // data is already in use in parent scope
-                  survey: {
-                    ...survey,
-                    answer,
-                  },
-                };
-                store.writeQuery({ query, variables, data: newData });
-              }
-            },
-          })
-          .then(() => {
-            if (exit) {
-              this.$router.go(-1);
             }
-          });
+          ) => {
+            const query = SURVEY_QUERY;
+            const variables = { id: this.id };
+            const { survey } = store.readQuery({ query, variables });
+            if (survey) {
+              const newData = {
+                // data is already in use in parent scope
+                survey: {
+                  ...survey,
+                  answer,
+                },
+              };
+              store.writeQuery({ query, variables, data: newData });
+            }
+          },
+        });
+        if (exit) {
+          matomoTrackEvent('Übung', 'Übung erfolgreich abgeschlossen', this.id);
+          this.$router.go(-1);
+        } else {
+          matomoTrackEvent('Übung', 'Übungsschritt abgeschlossen', this.id);
+        }
       };
 
       survey.onComplete.add((sender, options) => {

client/src/pages/topic-page.vue

@@ -53,6 +53,7 @@ import TopicNavigation from '@/components/book-navigation/TopicNavigation';
 
 import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
 import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+
 const PlayIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Play'));
 const BulbIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/BulbIcon'));
 

client/src/router/auth.routes.js

@@ -15,6 +15,7 @@ export default [
       public: true,
       illustration: 'hello',
       illustrationAlign: 'top',
+      matomoUrl: '/auth/hello',
     },
   },
   {
@@ -24,6 +25,7 @@ export default [
     meta: {
       layout: 'public',
       public: true,
+      matomoUrl: '/auth/beta-login',
     },
   },
   {
@@ -45,6 +47,7 @@ export default [
     meta: {
       public: true,
       layout: 'public',
+      matomoUrl: '/auth/verify-email',
     },
   },
   {
@@ -59,6 +62,7 @@ export default [
     meta: {
       public: true,
       layout: 'public',
+      matomoUrl: '/auth/unknown-auth-error',
     },
   },
   {
@@ -67,6 +71,7 @@ export default [
     name: LICENSE_ACTIVATION,
     meta: {
       layout: 'public',
+      matomoUrl: '/auth/license-activation',
     },
   },
 ];

client/src/router/index.js

@@ -13,6 +13,7 @@ import { EMAIL_NOT_VERIFIED_STATE, NO_VALID_LICENSE_STATE, SUCCESS_STATE } from
 
 import start from '@/pages/start';
 import { PAGE_LOAD_TIMEOUT } from '@/consts/navigation.consts';
+import { matomoTrackPageView } from '@/helpers/matomo-client';
 
 const instrument = () => import(/* webpackChunkName: "instruments" */ '@/pages/instrument');
 const instrumentOverview = () => import(/* webpackChunkName: "instruments" */ '@/pages/instrumentOverview');
@@ -36,6 +37,7 @@ const notFoundRoute = {
   component: p404,
   meta: {
     layout: 'blank',
+    matomoUrl: '/not-found',
   },
 };
 
@@ -44,6 +46,7 @@ const routes = [
     path: '/',
     name: 'home',
     component: start,
+    meta: { matomoUrl: '/' },
   },
   ...moduleRoutes,
   ...authRoutes,
@@ -56,11 +59,28 @@ const routes = [
     path: '/instruments/',
     name: 'instrument-overview',
     component: instrumentOverview,
+    meta: { matomoUrl: '/instrument/' },
+  },
+  {
+    path: '/instrument/:slug',
+    name: 'instrument',
+    component: instrument,
+    meta: { layout: LAYOUT_SIMPLE, matomoUrlCallback: (to) => `/instrument/${to.params.slug}` },
   },
-  { path: '/instrument/:slug', name: 'instrument', component: instrument, meta: { layout: LAYOUT_SIMPLE } },
   { path: '/submission/:id', name: 'submission', component: submission, meta: { layout: LAYOUT_SIMPLE } },
-  { path: '/topic/:topicSlug', name: 'topic', component: topic, alias: '/book/topic/:topicSlug' },
+  {
-  { path: '/join-class', name: 'join-class', component: joinClass, meta: { layout: LAYOUT_SIMPLE } },
+    path: '/topic/:topicSlug',
+    name: 'topic',
+    component: topic,
+    alias: '/book/topic/:topicSlug',
+    meta: { matomoUrlCallback: (to) => `/topic/${to.params.topicSlug}/` },
+  },
+  {
+    path: '/join-class',
+    name: 'join-class',
+    component: joinClass,
+    meta: { layout: LAYOUT_SIMPLE, matomoUrl: '/join-class' },
+  },
   {
     path: '/survey/:id',
     component: surveyPage,
@@ -72,6 +92,7 @@ const routes = [
     path: '/news',
     component: news,
     name: 'news',
+    meta: { matomoUrl: '/news' },
   },
   {
     path: '/oauth-redirect',
@@ -126,4 +147,14 @@ router.afterEach(() => {
   store.dispatch('showMobileNavigation', false);
 });
 
+router.afterEach((to) => {
+  if (to.meta.matomoUrl) {
+    matomoTrackPageView(to.meta.matomoUrl);
+  }
+
+  if (to.meta.matomoUrlCallback) {
+    matomoTrackPageView(to.meta.matomoUrlCallback(to));
+  }
+});
+
 export { router, postLoginRedirectUrlKey };

client/src/router/me.routes.js

@@ -18,43 +18,48 @@ export default [
     path: '/me',
     component: profilePage,
     children: [
-      { path: 'profile', name: 'profile', component: profile, meta: { isProfile: true } },
+      { path: 'profile', name: 'profile', component: profile, meta: { isProfile: true, matomoUrl: '/me/profile' } },
-      { path: 'class', alias: 'my-class', name: 'my-class', component: myClass, meta: { isProfile: true } },
+      { path: 'class', alias: 'my-class', name: 'my-class', component: myClass, meta: { isProfile: true, matomoUrl: '/me/class' } },
-      { path: 'activity', name: 'activity', component: activity, meta: { isProfile: true } },
+      { path: 'activity', name: 'activity', component: activity, meta: { isProfile: true, matomoUrl: '/me/activity' } },
-      { path: '', name: 'profile-activity', component: activity, meta: { isProfile: true } },
+      { path: '', name: 'profile-activity', component: activity, meta: { isProfile: true, matomoUrl: '/me/activity'} },
       {
         path: 'old-classes',
         name: 'old-classes',
         component: oldClasses,
-        meta: { isProfile: true },
+        meta: { isProfile: true, matomoUrl: '/me/old-classes' },
       },
       {
         path: 'class/create',
         alias: 'create-class',
         name: 'create-class',
         component: createClass,
-        meta: { layout: LAYOUT_SIMPLE },
+        meta: { layout: LAYOUT_SIMPLE, matomoUrl: '/me/class/create' },
       },
       {
         path: 'class/code',
         alias: 'show-code',
         name: SHOW_SCHOOL_CLASS_CODE,
         component: showSchoolClassCode,
-        meta: { layout: LAYOUT_SIMPLE },
+        meta: { layout: LAYOUT_SIMPLE, matomoUrl: '/me/class/code' },
+      },
+      { path: 'team', name: MY_TEAM, component: myTeam, meta: { isProfile: true, matomoUrl: '/me/team' } },
+      {
+        path: 'team/join',
+        name: JOIN_TEAM,
+        component: joinTeam,
+        meta: { isProfile: true, layout: LAYOUT_SIMPLE, matomoUrl: '/me/team/join' }
       },
-      { path: 'team', name: MY_TEAM, component: myTeam, meta: { isProfile: true } },
-      { path: 'team/join', name: JOIN_TEAM, component: joinTeam, meta: { isProfile: true, layout: LAYOUT_SIMPLE } },
       {
         path: 'team/create',
         name: CREATE_TEAM,
         component: createTeam,
-        meta: { isProfile: true, layout: LAYOUT_SIMPLE },
+        meta: { isProfile: true, layout: LAYOUT_SIMPLE, matomoUrl: '/me/team/create' }
       },
       {
         path: 'team/code',
         name: SHOW_TEAM_CODE,
         component: showTeamCode,
-        meta: { layout: LAYOUT_SIMPLE },
+        meta: { layout: LAYOUT_SIMPLE, matomoUrl: '/me/team/code' }
       },
     ],
   },

client/src/router/onboarding.routes.js

@@ -18,6 +18,7 @@ export default [
         meta: {
           layout: 'split',
           next: ONBOARDING_STEP_1,
+          matomoUrl: '/onboarding/start',
         },
       },
       {
@@ -28,6 +29,7 @@ export default [
           layout: 'split',
           next: ONBOARDING_STEP_2,
           illustration: 'contents',
+          matomoUrl: '/onboarding/learning',
         },
       },
       {
@@ -38,6 +40,7 @@ export default [
           layout: 'split',
           next: ONBOARDING_STEP_3,
           illustration: 'rooms',
+          matomoUrl: '/onboarding/collaboration',
         },
       },
       {
@@ -48,6 +51,7 @@ export default [
           layout: 'split',
           next: 'home',
           illustration: 'portfolio',
+          matomoUrl: '/onboarding/portfolio',
         },
       },
     ],

client/src/router/portfolio.routes.js

@@ -7,10 +7,26 @@ const newProject = () => import(/* webpackChunkName: "portfolio" */ '@/pages/por
 const editProject = () => import(/* webpackChunkName: "portfolio" */ '@/pages/portfolio/editProject');
 
 const portfolioRoutes = [
-  { path: '/portfolio', name: PROJECTS_PAGE, component: portfolio, meta: { hideFooter: true } },
+  { path: '/portfolio', name: PROJECTS_PAGE, component: portfolio, meta: { hideFooter: true, matomoUrl: '/portfolio/' } },
-  { path: '/portfolio/:slug', name: 'project', component: project, props: true },
+  {
-  { path: '/new-project/', name: NEW_PROJECT_PAGE, component: newProject },
+    path: '/portfolio/:slug',
-  { path: '/edit-project/:slug', name: 'edit-project', component: editProject, props: true },
+    name: 'project',
+    component: project,
+    props: true ,
+    meta: {
+      matomoUrlCallback: (route) => `/portfolio/${route.params.slug}`,
+    }
+  },
+  { path: '/new-project/', name: NEW_PROJECT_PAGE, component: newProject, meta: { matomoUrl: '/portfolio/' } },
+  {
+    path: '/edit-project/:slug',
+    name: 'edit-project',
+    component: editProject,
+    props: true,
+    meta: {
+      matomoUrlCallback: (route) => `/portfolio/${route.params.slug}`,
+    }
+  },
 ];
 
 const routes = flavorValues.showPortfolio ? portfolioRoutes : [];

client/src/router/room.routes.js

@@ -16,24 +16,29 @@ const newRoomEntry = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms
 const editRoomEntry = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/editRoomEntry');
 const moduleRoom = () => import(/* webpackChunkName: "rooms" */ '@/pages/module/moduleRoom');
 
+function matomoRoomWithSlugCallback(route) {
+  return `/room/${route.params.slug}/`;
+}
+
 export default [
-  { path: '/rooms', name: ROOMS_PAGE, component: rooms, meta: { filter: true, hideFooter: true } },
+  { path: '/rooms', name: ROOMS_PAGE, component: rooms, meta: { filter: true, hideFooter: true, matomoUrl: '/room/' }},
   { path: '/new-room/', name: NEW_ROOM_PAGE, component: newRoom },
   { path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true },
-  { path: '/room/:slug', name: ROOM_PAGE, component: room, props: true },
+  { path: '/room/:slug', name: ROOM_PAGE, component: room, props: true, meta: { matomoUrlCallback: matomoRoomWithSlugCallback }},
-  { path: '/room/:slug/add', name: ADD_ROOM_ENTRY_PAGE, component: newRoomEntry, props: true },
+  { path: '/room/:slug/add', name: ADD_ROOM_ENTRY_PAGE, component: newRoomEntry, props: true, meta: { matomoUrlCallback: matomoRoomWithSlugCallback }},
-  { path: '/room/:slug/edit/:entrySlug', name: UPDATE_ROOM_ENTRY_PAGE, component: editRoomEntry, props: true },
+  { path: '/room/:slug/edit/:entrySlug', name: UPDATE_ROOM_ENTRY_PAGE, component: editRoomEntry, meta: { matomoUrlCallback: matomoRoomWithSlugCallback }},
   {
     path: '/module-room/:slug',
     name: MODULE_ROOM_PAGE,
     component: moduleRoom,
     props: true,
-    meta: { layout: 'fullScreen' },
+    meta: { layout: 'fullScreen', matomoUrlCallback: matomoRoomWithSlugCallback },
   },
   {
     path: '/module-room/:slug/add',
     name: ADD_MODULE_ROOM_ENTRY_PAGE,
     component: newRoomEntry,
     props: (route) => ({ slug: route.params.slug, isModule: true }),
+    meta: { matomoUrlCallback: matomoRoomWithSlugCallback },
   },
 ];

client/src/setup/plugins.ts

@@ -33,10 +33,14 @@ const registerPlugins = (app: any) => {
   app.use(router);
   app.use(flavorPlugin);
   if (process.env.MATOMO_HOST) {
+    // MS-628: we use VueMatomo "only" to setup the Matomo tracker
+    // we will not use any of the provided functions
     app.use(VueMatomo, {
       host: process.env.MATOMO_HOST,
       siteId: process.env.MATOMO_SITE_ID,
-      router: router,
+      enableHeartBeatTimer: true,
+      // we don't want the default vue-matomo router behaviour
+      router: null,
     });
   }
 };