Skip to content
Snippets Groups Projects
Unverified Commit b3df8164 authored by Bekerle, Patrizio's avatar Bekerle, Patrizio :fire:
Browse files

Migrate global Matomo track calls to provider

parent 4a11d805
No related branches found
No related tags found
No related merge requests found
Pipeline #16861 passed
...@@ -64,7 +64,6 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) { ...@@ -64,7 +64,6 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
this.matomoUrl = ''; this.matomoUrl = '';
this.matomoSiteId = -1; this.matomoSiteId = -1;
this.matomo = null;
this._attrObserver = new MutationObserver(this.onAttributeObserved); this._attrObserver = new MutationObserver(this.onAttributeObserved);
...@@ -259,10 +258,6 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) { ...@@ -259,10 +258,6 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
if (this.src) if (this.src)
this.fetchMetadata(this.src); this.fetchMetadata(this.src);
this.initRouter(); this.initRouter();
this.updateComplete.then(()=> {
this.matomo = this.shadowRoot.querySelector(this.constructor.getScopedTagName('dbp-matomo'));
});
} }
/** /**
...@@ -738,9 +733,7 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) { ...@@ -738,9 +733,7 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
} }
track(action, message) { track(action, message) {
if (this.matomo !== null) { this.sendSetPropertyEvent('analytics-event', {'category': action, 'action': message});
this.matomo.track(action, message);
}
} }
_renderActivity() { _renderActivity() {
...@@ -812,7 +805,7 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) { ...@@ -812,7 +805,7 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
return html` return html`
<slot class="${slotClassMap}"></slot> <slot class="${slotClassMap}"></slot>
<dbp-auth-keycloak subscribe="requested-login-status" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" url="${kc.url}" realm="${kc.realm}" client-id="${kc.clientId}" silent-check-sso-redirect-uri="${kc.silentCheckSsoRedirectUri || ''}" scope="${kc.scope || ''}" idp-hint="${kc.idpHint || ''}" load-person ?force-login="${kc.forceLogin}" ?try-login="${!kc.forceLogin}"></dbp-auth-keycloak> <dbp-auth-keycloak subscribe="requested-login-status" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" url="${kc.url}" realm="${kc.realm}" client-id="${kc.clientId}" silent-check-sso-redirect-uri="${kc.silentCheckSsoRedirectUri || ''}" scope="${kc.scope || ''}" idp-hint="${kc.idpHint || ''}" load-person ?force-login="${kc.forceLogin}" ?try-login="${!kc.forceLogin}"></dbp-auth-keycloak>
<dbp-matomo subscribe="auth" endpoint="${this.matomoUrl}" site-id="${this.matomoSiteId}" git-info="${this.gitInfo}"></dbp-matomo> <dbp-matomo subscribe="auth,analytics-event" endpoint="${this.matomoUrl}" site-id="${this.matomoSiteId}" git-info="${this.gitInfo}"></dbp-matomo>
<div class="${mainClassMap}"> <div class="${mainClassMap}">
<div id="main"> <div id="main">
<dbp-notification lang="${this.lang}"></dbp-notification> <dbp-notification lang="${this.lang}"></dbp-notification>
......
...@@ -25,21 +25,17 @@ npm i @dbp-toolkit/matomo ...@@ -25,21 +25,17 @@ npm i @dbp-toolkit/matomo
## Tracking actions ## Tracking actions
```javascript ```html
class Demo { <dbp-provider analytics-event>
<dbp-matomo subscribe="analytics-event"></dbp-matomo>
track(action, message) { <your-dbp-adapter-limt-element-component></your-dbp-adapter-limt-element-component>
const matomo = this.shadowRoot.querySelector(this.constructor.getScopedTagName('dbp-matomo')); </dbp-provider>
if (matomo !== null) { ```
matomo.track(action, message);
}
}
clickMe() { In your AdapterLitElement component:
this.track('button clicked', 'alert()');
}
} ```javascript
this.sendSetPropertyEvent('analytics-event', {'category': 'my category', 'action': 'my action'});
``` ```
## Local development ## Local development
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<body> <body>
<dbp-matomo-demo lang="de" auth requested-login-status entry-point-url="http://127.0.0.1:8000" matomo-url="<%= matomoUrl %>" matomo-site-id="<%= matomoSiteId %>"></dbp-matomo-demo> <dbp-matomo-demo lang="de" auth requested-login-status analytics-event entry-point-url="http://127.0.0.1:8000" matomo-url="<%= matomoUrl %>" matomo-site-id="<%= matomoSiteId %>"></dbp-matomo-demo>
<p>version: <span style="color: white; background-color: black;"><%= buildInfo.info %></span></p> <p>version: <span style="color: white; background-color: black;"><%= buildInfo.info %></span></p>
<p>Matomo: url: <%= matomoUrl %>, site-id: <%= matomoSiteId %></p> <p>Matomo: url: <%= matomoUrl %>, site-id: <%= matomoSiteId %></p>
......
...@@ -44,10 +44,7 @@ export class MatomoDemo extends ScopedElementsMixin(DBPLitElement) { ...@@ -44,10 +44,7 @@ export class MatomoDemo extends ScopedElementsMixin(DBPLitElement) {
} }
track(action, message) { track(action, message) {
const matomo = this.shadowRoot.querySelector(this.constructor.getScopedTagName('dbp-matomo')); this.sendSetPropertyEvent('analytics-event', {'category': action, 'action': message});
if (matomo !== null) {
matomo.track(action, message);
}
} }
clickMe() { clickMe() {
......
...@@ -16,6 +16,7 @@ export class MatomoElement extends DBPLitElement { ...@@ -16,6 +16,7 @@ export class MatomoElement extends DBPLitElement {
this.lastEvent = []; this.lastEvent = [];
this.gitInfo = ''; this.gitInfo = '';
this.auth = {}; this.auth = {};
this.analyticsEvent = {};
this.loginStatus = ''; this.loginStatus = '';
} }
...@@ -27,6 +28,7 @@ export class MatomoElement extends DBPLitElement { ...@@ -27,6 +28,7 @@ export class MatomoElement extends DBPLitElement {
siteId: { type: Number, attribute: 'site-id' }, siteId: { type: Number, attribute: 'site-id' },
gitInfo: { type: Number, attribute: 'git-info' }, gitInfo: { type: Number, attribute: 'git-info' },
auth: { type: Object }, auth: { type: Object },
analyticsEvent: { type: Object, attribute: 'analytics-event' },
}; };
} }
...@@ -43,6 +45,20 @@ export class MatomoElement extends DBPLitElement { ...@@ -43,6 +45,20 @@ export class MatomoElement extends DBPLitElement {
} }
} }
break; break;
case 'analyticsEvent':
{
console.log('MatomoElement(' + this.isRunning + ') analyticsEvent: ' +
this.analyticsEvent.action + ', ' + this.analyticsEvent.message);
const event = ['trackEvent', this.analyticsEvent.category, this.analyticsEvent.action,
this.analyticsEvent.name, this.analyticsEvent.value];
if (this.isRunning) {
pushEvent(event);
} else {
this.lastEvent = event;
}
}
break;
} }
}); });
...@@ -121,14 +137,4 @@ export class MatomoElement extends DBPLitElement { ...@@ -121,14 +137,4 @@ export class MatomoElement extends DBPLitElement {
this.isRunning = false; this.isRunning = false;
} }
} }
track (action, message) {
console.log('MatomoElement (' + this.isRunning + '): ' + action + ', ' + message);
const event = ['trackEvent', action, message];
if (this.isRunning) {
pushEvent(event);
} else {
this.lastEvent = event;
}
}
} }
...@@ -63,6 +63,7 @@ ...@@ -63,6 +63,7 @@
src="<%= getUrl(name + '.topic.metadata.json') %>" src="<%= getUrl(name + '.topic.metadata.json') %>"
auth auth
requested-login-status requested-login-status
analytics-event
lang="en" lang="en"
base-path="<%= getUrl('') %>" base-path="<%= getUrl('') %>"
keycloak-config='{"url": "<%= keyCloakBaseURL %>", "realm": "tugraz", "clientId": "<%= keyCloakClientId %>", "silentCheckSsoRedirectUri": "<%= getUrl('silent-check-sso.html') %>"}' keycloak-config='{"url": "<%= keyCloakBaseURL %>", "realm": "tugraz", "clientId": "<%= keyCloakClientId %>", "silentCheckSsoRedirectUri": "<%= getUrl('silent-check-sso.html') %>"}'
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment