From b3df81640e50a346448d936362ce85f27c3e9e08 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio@bekerle.com>
Date: Mon, 15 Feb 2021 08:07:39 +0100
Subject: [PATCH] Migrate global Matomo track calls to provider
---
packages/app-shell/src/app-shell.js | 11 ++------
packages/matomo/README.md | 22 +++++++---------
packages/matomo/assets/index.html.ejs | 2 +-
packages/matomo/src/dbp-matomo-demo.js | 5 +---
packages/matomo/src/matomo.js | 26 ++++++++++++-------
.../assets/dbp-toolkit-showcase.html.ejs | 1 +
6 files changed, 30 insertions(+), 37 deletions(-)
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index e4eb5c65..60110ef6 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -64,7 +64,6 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
this.matomoUrl = '';
this.matomoSiteId = -1;
- this.matomo = null;
this._attrObserver = new MutationObserver(this.onAttributeObserved);
@@ -259,10 +258,6 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
if (this.src)
this.fetchMetadata(this.src);
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) {
}
track(action, message) {
- if (this.matomo !== null) {
- this.matomo.track(action, message);
- }
+ this.sendSetPropertyEvent('analytics-event', {'category': action, 'action': message});
}
_renderActivity() {
@@ -812,7 +805,7 @@ export class AppShell extends ScopedElementsMixin(AdapterLitElement) {
return html`
<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-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 id="main">
<dbp-notification lang="${this.lang}"></dbp-notification>
diff --git a/packages/matomo/README.md b/packages/matomo/README.md
index 678e7929..f985efe3 100644
--- a/packages/matomo/README.md
+++ b/packages/matomo/README.md
@@ -25,21 +25,17 @@ npm i @dbp-toolkit/matomo
## Tracking actions
-```javascript
-class Demo {
-
- track(action, message) {
- const matomo = this.shadowRoot.querySelector(this.constructor.getScopedTagName('dbp-matomo'));
- if (matomo !== null) {
- matomo.track(action, message);
- }
- }
+```html
+<dbp-provider analytics-event>
+ <dbp-matomo subscribe="analytics-event"></dbp-matomo>
+ <your-dbp-adapter-limt-element-component></your-dbp-adapter-limt-element-component>
+</dbp-provider>
+```
- clickMe() {
- this.track('button clicked', 'alert()');
- }
+In your AdapterLitElement component:
-}
+```javascript
+this.sendSetPropertyEvent('analytics-event', {'category': 'my category', 'action': 'my action'});
```
## Local development
diff --git a/packages/matomo/assets/index.html.ejs b/packages/matomo/assets/index.html.ejs
index c4c469e5..ed41b531 100644
--- a/packages/matomo/assets/index.html.ejs
+++ b/packages/matomo/assets/index.html.ejs
@@ -7,7 +7,7 @@
<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>Matomo: url: <%= matomoUrl %>, site-id: <%= matomoSiteId %></p>
diff --git a/packages/matomo/src/dbp-matomo-demo.js b/packages/matomo/src/dbp-matomo-demo.js
index e7fee8d8..bf07bd0f 100644
--- a/packages/matomo/src/dbp-matomo-demo.js
+++ b/packages/matomo/src/dbp-matomo-demo.js
@@ -44,10 +44,7 @@ export class MatomoDemo extends ScopedElementsMixin(DBPLitElement) {
}
track(action, message) {
- const matomo = this.shadowRoot.querySelector(this.constructor.getScopedTagName('dbp-matomo'));
- if (matomo !== null) {
- matomo.track(action, message);
- }
+ this.sendSetPropertyEvent('analytics-event', {'category': action, 'action': message});
}
clickMe() {
diff --git a/packages/matomo/src/matomo.js b/packages/matomo/src/matomo.js
index 7fa44959..01567191 100644
--- a/packages/matomo/src/matomo.js
+++ b/packages/matomo/src/matomo.js
@@ -16,6 +16,7 @@ export class MatomoElement extends DBPLitElement {
this.lastEvent = [];
this.gitInfo = '';
this.auth = {};
+ this.analyticsEvent = {};
this.loginStatus = '';
}
@@ -27,6 +28,7 @@ export class MatomoElement extends DBPLitElement {
siteId: { type: Number, attribute: 'site-id' },
gitInfo: { type: Number, attribute: 'git-info' },
auth: { type: Object },
+ analyticsEvent: { type: Object, attribute: 'analytics-event' },
};
}
@@ -43,6 +45,20 @@ export class MatomoElement extends DBPLitElement {
}
}
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 {
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;
- }
- }
}
diff --git a/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs b/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
index 6eaace94..e9871011 100644
--- a/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
+++ b/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
@@ -63,6 +63,7 @@
src="<%= getUrl(name + '.topic.metadata.json') %>"
auth
requested-login-status
+ analytics-event
lang="en"
base-path="<%= getUrl('') %>"
keycloak-config='{"url": "<%= keyCloakBaseURL %>", "realm": "tugraz", "clientId": "<%= keyCloakClientId %>", "silentCheckSsoRedirectUri": "<%= getUrl('silent-check-sso.html') %>"}'
--
GitLab