Skip to content
Snippets Groups Projects
Commit 630c35d4 authored by Neuber, Eugen Ramon's avatar Neuber, Eugen Ramon :speech_balloon:
Browse files

Add Matomo web component - WIP 

Activate Matomo logging only after user logged in successfully. Deactivate if user logs out.
parent 917300fa
No related branches found
No related tags found
1 merge request!2Matomo web component
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 911 additions and 0 deletions
packages/matomo/.gitignore 0 → 100644
+ 5
− 0
View file @ 630c35d4
dist
node_modules
.idea
npm-debug.log
package-lock.json
packages/matomo/.gitmodules 0 → 100644
+ 6
− 0
View file @ 630c35d4
[submodule "vendor/auth"]
path = vendor/auth
url = git@gitlab.tugraz.at:dbp/web-components/Auth.git
[submodule "vendor/common"]
path = vendor/common
url = git@gitlab.tugraz.at:dbp/web-components/Common.git
packages/matomo/LICENSE 0 → 100644
+ 502
− 0
View file @ 630c35d4
This diff is collapsed.
packages/matomo/README.md 0 → 100644
+ 47
− 0
View file @ 630c35d4
# Matomo Web Component
[GitLab Repository](https://gitlab.tugraz.at/dbp/web-components/Matomo)
## Usage
```html
<dbp-matomo></dbp-matomo>
```
## Attributes
- `lang` (optional, default: `de`): set to `de` or `en` for German or English
- example `<dbp-notification lang="de" client-id="my-client-id"></dbp-notification>`
## Sending notifications
```javascript
import { send } from './notification';
send({
"summary": "Item deleted",
"body": "Item foo was deleted!",
"type": "info",
"timeout": 5,
});
```
## Local development
```bash
# get the source
git clone git@gitlab.tugraz.at:dbp/
cd toolkit/packages/matomo
git submodule update --init
# install dependencies (make sure you have npm version 4+ installed, so symlinks to the git submodules are created automatically)
yarn install
# constantly build dist/bundle.js and run a local web-server on port 8002
yarn run watch
# run tests
yarn test
```
Jump to <http://localhost:8002> and you should get a demo page.
packages/matomo/assets/favicon.ico 0 → 100644
+ 0
− 0
View file @ 630c35d4
packages/matomo/assets/favicon.ico

2.49 KiB

packages/matomo/assets/index.html 0 → 100644
+ 13
− 0
View file @ 630c35d4
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="module" src="dbp-matomo-demo.js"></script>
</head>
<body>
<dbp-matomo-demo lang="de"></dbp-matomo-demo>
</body>
</html>
packages/matomo/i18next-scanner.config.js 0 → 100644
+ 15
− 0
View file @ 630c35d4
module.exports = {
input: [
'src/*.js',
],
output: './',
options: {
debug: false,
removeUnusedKeys: true,
lngs: ['en','de'],
resource: {
loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
savePath: 'src/i18n/{{lng}}/{{ns}}.json'
},
},
}
packages/matomo/karma.conf.js 0 → 100644
+ 23
− 0
View file @ 630c35d4
// Trick to use the auto-downloaded puppeteer chrome binary
process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function(config) {
config.set({
basePath: 'dist',
frameworks: ['mocha', 'chai'],
files: [
{pattern: './*.js', included: true, watched: true, served: true, type: 'module'},
{pattern: './**/*', included: false, watched: true, served: true},
],
autoWatch: true,
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
singleRun: false,
logLevel: config.LOG_ERROR
});
}
packages/matomo/package.json 0 → 100644
+ 47
− 0
View file @ 630c35d4
{
"name": "dbp-matomo",
"version": "1.0.0",
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"private": true,
"devDependencies": {
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^8.4.0",
"@rollup/plugin-url": "^5.0.1",
"chai": "^4.2.0",
"i18next-scanner": "^2.10.2",
"karma": "^5.1.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^3.0.0",
"karma-mocha": "^2.0.1",
"mocha": "^8.0.1",
"puppeteer": "^2.1.1",
"rollup": "^2.19.0",
"rollup-plugin-consts": "^1.0.1",
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^6.1.0"
},
"dependencies": {
"@open-wc/scoped-elements": "^1.1.1",
"lit-element": "^2.3.1",
"dbp-auth": "^1.0.0",
"dbp-common": "^1.0.0"
},
"scripts": {
"clean": "rm dist/*",
"build": "npm run build-local",
"build-local": "rollup -c",
"build-dev": "rollup -c --environment BUILD:development",
"build-prod": "rollup -c --environment BUILD:production",
"build-demo": "rollup -c --environment BUILD:demo",
"build-test": "rollup -c --environment BUILD:test",
"i18next": "i18next-scanner",
"watch": "yarn run watch-local",
"watch-local": "rollup -c --watch",
"watch-dev": "rollup -c --watch --environment BUILD:development",
"test": "rollup -c --environment BUILD:test && karma start --singleRun"
}
}
packages/matomo/rollup.config.js 0 → 100644
+ 48
− 0
View file @ 630c35d4
import glob from 'glob';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import copy from 'rollup-plugin-copy';
import {terser} from "rollup-plugin-terser";
import json from '@rollup/plugin-json';
import serve from 'rollup-plugin-serve';
import url from "@rollup/plugin-url";
import consts from 'rollup-plugin-consts';
import del from 'rollup-plugin-delete';
const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
console.log("build: " + build);
export default {
input: (build != 'test') ? ['src/dbp-matomo.js', 'src/dbp-matomo-demo.js'] : glob.sync('test/**/*.js'),
output: {
dir: 'dist',
entryFileNames: '[name].js',
chunkFileNames: 'shared/[name].[hash].[format].js',
format: 'esm',
sourcemap: true
},
plugins: [
del({
targets: 'dist/*'
}),
consts({
environment: build,
}),
resolve(),
commonjs(),
json(),
url({
limit: 0,
emitFiles: true,
fileName: 'shared/[name].[hash][extname]'
}),
(build !== 'local' && build !== 'test') ? terser() : false,
copy({
targets: [
{src: 'assets/index.html', dest: 'dist'},
{src: 'assets/favicon.ico', dest: 'dist'},
]
}),
(process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
]
};
packages/matomo/src/dbp-matomo-demo.js 0 → 100644
+ 81
− 0
View file @ 630c35d4
import {i18n} from './i18n.js';
import {css, html, LitElement} from 'lit-element';
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';
class MatomoDemo extends 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,
};
}
static get properties() {
return {
lang: { type: String },
noAuth: { type: Boolean, attribute: 'no-auth' },
};
}
connectedCallback() {
super.connectedCallback();
i18n.changeLanguage(this.lang);
this.updateComplete.then(()=>{
});
}
static get styles() {
// language=css
return [
commonStyles.getThemeCSS(),
commonStyles.getGeneralCSS(),
css`
h1.title {margin-bottom: 1em;}
div.container {margin-bottom: 1.5em;}
`
];
}
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">
<div class="container">
<h1 class="title">Matomo-Demo</h1>
</div>
<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>
<dbp-matomo endpoint="https://analytics.tugraz.at/" site-id="131"></dbp-matomo>
</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>
</div>
</section>
`;
}
}
commonUtils.defineCustomElement('dbp-matomo-demo', MatomoDemo);
packages/matomo/src/dbp-matomo.js 0 → 100644
+ 4
− 0
View file @ 630c35d4
import * as commonUtils from 'dbp-common/utils';
import {Matomo} from './matomo.js';
commonUtils.defineCustomElement('dbp-matomo', Matomo);
packages/matomo/src/demo.js 0 → 100644
+ 1
− 0
View file @ 630c35d4
import './dbp-matomo-demo.js';
\ No newline at end of file
packages/matomo/src/i18n.js 0 → 100644
+ 6
− 0
View file @ 630c35d4
import {createInstance} from 'dbp-common/i18next.js';
import de from './i18n/de/translation.json';
import en from './i18n/en/translation.json';
export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
packages/matomo/src/i18n/de/translation.json 0 → 100644
+ 5
− 0
View file @ 630c35d4
{
"matomo": {
}
}
\ No newline at end of file
packages/matomo/src/i18n/en/translation.json 0 → 100644
+ 5
− 0
View file @ 630c35d4
{
"matomo": {
}
}
\ No newline at end of file
packages/matomo/src/matomo.js 0 → 100644
+ 103
− 0
View file @ 630c35d4
import {i18n} from './i18n.js';
import {html, css} from 'lit-element';
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonStyles from 'dbp-common/styles';
import {LitElement} from "lit-element";
import {EventBus} from 'dbp-common';
// import {LoginStatus} from './util.js';
export class Matomo extends ScopedElementsMixin(LitElement) {
constructor() {
super();
this.lang = 'de';
// this._loginData = {};
this.endpoint = '';
this.siteId = -1;
}
static get scopedElements() {
return {
};
}
static get properties() {
return {
lang: { type: String },
// _loginData: { type: Object, attribute: false },
endpoint: { type: String },
siteId: { type: Number, attribute: 'site-id' },
};
}
connectedCallback() {
super.connectedCallback();
this._bus = new EventBus();
this._bus.subscribe('auth-update', (data) => {
// this._loginData = data;
this.setupMatomo(data.status === LoginStatus.LOGGED_IN);
});
}
disconnectedCallback() {
this._bus.close();
super.disconnectedCallback();
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
}
});
super.update(changedProperties);
}
render() {}
setupMatomo(loggedIn) {
if (loggedIn) {
var _paq = window._paq || [];
_paq.push(['setCustomVariable', 1, "GitCommit", "<%= buildInfo.info %>", "visit"]);
_paq.push(['enableHeartBeatTimer']);
_paq.push(['disableCookies']);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u = this.endpoint;
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', this.siteId]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
// track changed locations
window.addEventListener('locationchanged', function(e) {
_paq.push(['setReferrerUrl', e.detail.referrerUrl]);
_paq.push(['setCustomUrl', location.href]);
// _paq.push(['setDocumentTitle', '']);
_paq.push(['trackPageView']);
// make Matomo aware of newly added content
var content = document.getElementById('content');
_paq.push(['MediaAnalytics::scanForMedia', content]);
_paq.push(['FormAnalytics::scanForForms', content]);
_paq.push(['trackContentImpressionsWithinNode', content]);
});
// track errors
window.addEventListener('error', function(e) {
_paq.push(['trackEvent', 'Error', e.error.message + '\n' + e.error.stack]);
});
} else {
// TODO: reomve those event listeners
}
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment