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
This commit is part of merge request !2. Comments created here will be created in the context of that merge request.
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