Matomo web component

Move Matomo related initialization to its own web component. Use this web component in App-shell.

App-shell has two new parameters: matomo-url and matomo-site-id. These are required for tracking, but tracking is still optional.

packages/matomo/src/dbp-matomo-demo.js

@@ -4,37 +4,46 @@ import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {AuthKeycloak, LoginButton} from 'dbp-auth';
 import * as commonUtils from 'dbp-common/utils';
 import * as commonStyles from 'dbp-common/styles';
+import {MatomoElement} from './matomo';
 
 
-class MatomoDemo extends LitElement {
+class MatomoDemo extends ScopedElementsMixin(LitElement) {
 
     constructor() {
         super();
         this.lang = 'de';
-        this.noAuth = false;
     }
 
     static get scopedElements() {
         return {
             'dbp-auth-keycloak': AuthKeycloak,
             'dbp-login-button': LoginButton,
-            // 'dbp-person-select': PersonSelect,
+            'dbp-matomo': MatomoElement,
         };
     }
 
     static get properties() {
         return {
             lang: { type: String },
-            noAuth: { type: Boolean, attribute: 'no-auth' },
         };
     }
 
     connectedCallback() {
         super.connectedCallback();
         i18n.changeLanguage(this.lang);
+    }
+
+    track(action, message) {
+        const matomo = this.shadowRoot.querySelector(this.constructor.getScopedTagName('dbp-matomo'));
+        if (matomo !== null) {
+            matomo.track(action, message);
+        }
+    }
+
+    clickMe() {
+        this.track('button clicked', 'alert()');
 
-        this.updateComplete.then(()=>{
-        });
+        alert('button clicked!');
     }
 
     static get styles() {
@@ -44,20 +53,11 @@ class MatomoDemo extends LitElement {
             commonStyles.getGeneralCSS(),
             css`
             h1.title {margin-bottom: 1em;}
-            div.container {margin-bottom: 1.5em;}
+            div.container {margin-bottom: 1.5em; padding-left:20px;}
             `
         ];
     }
 
-    getAuthComponentHtml() {
-        return this.noAuth ? html`` : html`
-            <div class="container">
-                <dbp-auth-keycloak lang="${this.lang}" url="https://auth-dev.tugraz.at/auth" realm="tugraz" client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
-                <dbp-login-button lang="${this.lang}" show-image></dbp-login-button>
-            </div>
-        `;
-    }
-
     render() {
         return html`
             <section class="section">
@@ -71,7 +71,7 @@ class MatomoDemo extends LitElement {
                 </div>
                 <div class="container">
                     <p>Click this button (and watch the network traffic) ...</p>
-                    <p><input type="button" value="Fetch userinfo (see console)" @click="${this._onUserInfoClick}"></p>
+                    <p><input type="button" value="click me" @click="${this.clickMe}"></p>
                </div>
             </section>
         `;