diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js index e4eb5c65fd9ee0233955efc84df59be9f396a64f..60110ef6edb636f131c952a6e3673b55b82e941c 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 678e792936e1487433bdc172c845766d89d78071..f985efe3f5709c83282890bab1bef500c5167ec8 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 c4c469e559eb506b99e1784a3c9647fd4bde8ee3..ed41b5318cd381e557bcadd7b6ccf95fd485ef7a 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 e7fee8d8c35940bdbd4e27d4294b39a8cd7dd94a..bf07bd0fe1ffe33d694511ecad22db5da9979d1b 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 7fa44959854e81c153805afb9841a5cbfc8e0142..01567191892d02f013a5317158ba98bedc469217 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 6eaace94c742f5f0b4d4b6f00f0f967273b0b4a0..e9871011a2a275c75d4ff44c8a0ed606b49790ba 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') %>"}'