From 972e2543b23f838668e6975302ff680668d714a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Thu, 3 Oct 2019 17:04:53 +0200
Subject: [PATCH 01/17] TrackingConsent component base / style

---
 src/components/TrackingConsent.vue | 107 +++++++++++++++++++++++++++++
 src/main.ts                        |   1 +
 src/stories/index.stories.js       |  20 ++++++
 tsconfig.json                      |   2 +-
 4 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100644 src/components/TrackingConsent.vue

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
new file mode 100644
index 00000000..d41ab7a2
--- /dev/null
+++ b/src/components/TrackingConsent.vue
@@ -0,0 +1,107 @@
+<template>
+    <div
+        id="tracking-consent"
+        class="tracking-consent-banner nq-shadow"
+        :class="theme"
+    >
+        {{ text.main }} ❤️
+        <div class="button-group">
+            <button
+                class="nq-button-s"
+                :class="{ inverse: theme === 'dark' }"
+            >{{ text.no }}</button>
+            <button
+                class="nq-button-pill light-blue"
+            >{{ text.yes }}</button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+const STORAGE_KEYS = ['tracking-consent', 'tracking-consensus'];
+
+@Component
+export default class TrackingConsent extends Vue {
+    @Prop({
+        type: Object,
+        default:  () => ({
+            main: 'Help Nimiq improve by sharing anonymized usage data. Thank you!',
+            yes: 'Yes',
+            no: 'No',
+        }),
+        validator: (value) => (
+            value && typeof value === 'object' &&
+            value.main && typeof value.main === 'string' && value.main.length &&
+            value.yes && typeof value.yes === 'string' && value.yes.length &&
+            value.no && typeof value.no === 'string' && value.no.length
+        ),
+    })
+    private text!: {
+        main: string,
+        yes: string,
+        no: string,
+    };
+
+    @Prop({
+        type: String,
+        default: 'light',
+        validator: (theme) => ['dark', 'light'].includes(theme),
+    })
+    public theme!: string;
+}
+</script>
+
+<style scoped>
+    .tracking-consent-banner {
+        position: fixed;
+        bottom: 2rem;
+        z-index: 900;
+
+        padding: 1.5rem;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        border-radius: 1rem;
+        font-size: 2rem;
+    }
+
+    .tracking-consent-banner.light {
+        background: white;
+        color: var(--nimiq-blue);
+    }
+
+    .tracking-consent-banner.dark {
+        background: var(--nimiq-blue);
+        color: white;
+    }
+
+    .button-group {
+        margin-left: 3rem;
+        display: flex;
+    }
+
+    .button-group button:nth-child(2) {
+        margin-left: 1rem;
+    }
+
+    @media (max-width: 860px) {
+        .tracking-consent-banner {
+            flex-direction: column;
+            align-items: flex-start;
+            width: 100%;
+            bottom: 0;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            padding: 2.5rem;
+        }
+
+        .button-group {
+            margin-left: 0;
+            margin-top: 16px;
+        }
+    }
+</style>
diff --git a/src/main.ts b/src/main.ts
index c8ff1bbf..b77efa63 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -28,6 +28,7 @@ export { default as QrScanner } from './components/QrScanner.vue';
 export { default as SelectBar } from './components/SelectBar.vue';
 export { default as SmallPage } from './components/SmallPage.vue';
 export { default as Timer } from './components/Timer.vue';
+export { default as TrackingConsent } from './components/TrackingConsent.vue';
 export { default as Tooltip } from './components/Tooltip.vue';
 export { default as Wallet } from './components/Wallet.vue';
 
diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js
index f35931a7..9f480bcd 100644
--- a/src/stories/index.stories.js
+++ b/src/stories/index.stories.js
@@ -33,6 +33,7 @@ import PageHeader from '../components/PageHeader.vue';
 import PageBody from '../components/PageBody.vue';
 import PageFooter from '../components/PageFooter.vue';
 import LoadingSpinner from '../components/LoadingSpinner.vue';
+import TrackingConsent from '../components/TrackingConsent.vue';
 import * as Icons from '../components/Icons';
 
 import '@nimiq/style/nimiq-style.min.css';
@@ -826,6 +827,25 @@ storiesOf('Components', module)
 `),
         };
     })
+    .add('TrackingConsent', () => {
+        return {
+            components: { TrackingConsent },
+            data: () => ({
+                theme: 'dark'
+            }),
+            template: windowTemplate(`
+                <label>
+                    Dark theme
+                    <input type="radio" v-model="theme" value="dark"/>
+                </label>
+                <label>
+                    Light theme
+                    <input type="radio" v-model="theme" value="light"/>
+                </label>
+                <TrackingConsent :theme="theme"/>
+            `)
+        };
+    })
     .add('Timer', () => ({
         components: {Timer},
         data: () => ({
diff --git a/tsconfig.json b/tsconfig.json
index a1791dd6..d8a45cf5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,7 +29,7 @@
     },
     "include": [
         "types/svg.d.ts",
-        "src/main.ts" // Must be included for TSLint to work
+        "src/main.ts", // Must be included for TSLint to work
         // "src/**/*.ts",
         // "src/**/*.tsx",
         // "src/**/*.vue",

From 9d0297120c72a92d15c062f2739cdd61a8dda939 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Fri, 4 Oct 2019 16:18:03 +0200
Subject: [PATCH 02/17] TrackingConsent: basic version / untested

---
 src/components/TrackingConsent.vue | 224 +++++++++++++++++++++++++++--
 1 file changed, 215 insertions(+), 9 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index d41ab7a2..0b488827 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -3,16 +3,24 @@
         id="tracking-consent"
         class="tracking-consent-banner nq-shadow"
         :class="theme"
+        v-if="!consentKnown"
     >
         {{ text.main }} ❤️
         <div class="button-group">
+            <button
+                class="nq-button-pill light-blue"
+                @click="allowsConsent"
+            >{{ text.yes }}</button>
             <button
                 class="nq-button-s"
+                @click="denyConsent"
                 :class="{ inverse: theme === 'dark' }"
             >{{ text.no }}</button>
             <button
-                class="nq-button-pill light-blue"
-            >{{ text.yes }}</button>
+                class="nq-button-s"
+                @click="allowsBrowserData"
+                :class="{ inverse: theme === 'dark' }"
+            >{{ text.browserOnly }}</button>
         </div>
     </div>
 </template>
@@ -20,28 +28,34 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-const STORAGE_KEYS = ['tracking-consent', 'tracking-consensus'];
+interface Consents {
+    allowsBrowserData?: boolean;
+    allowsUsageData?: boolean;
+}
 
 @Component
-export default class TrackingConsent extends Vue {
+class TrackingConsent extends Vue {
     @Prop({
         type: Object,
         default:  () => ({
             main: 'Help Nimiq improve by sharing anonymized usage data. Thank you!',
             yes: 'Yes',
             no: 'No',
+            browserOnly: 'Browser-info only',
         }),
         validator: (value) => (
             value && typeof value === 'object' &&
-            value.main && typeof value.main === 'string' && value.main.length &&
+            value.no && typeof value.no === 'string' && value.no.length &&
             value.yes && typeof value.yes === 'string' && value.yes.length &&
-            value.no && typeof value.no === 'string' && value.no.length
+            value.main && typeof value.main === 'string' && value.main.length &&
+            value.browserOnly && typeof value.browserOnly === 'string' && value.browserOnly.length
         ),
     })
-    private text!: {
+    private text: {
         main: string,
         yes: string,
         no: string,
+        browserOnly: string,
     };
 
     @Prop({
@@ -49,8 +63,200 @@ export default class TrackingConsent extends Vue {
         default: 'light',
         validator: (theme) => ['dark', 'light'].includes(theme),
     })
-    public theme!: string;
+    private theme: string;
+
+    @Prop({
+        type: String,
+        default: 'nimiq.com',
+    })
+    private domain: string;
+
+    @Prop({
+        type: Object,
+        default: () => ({
+            setTrackerUrl: TrackingConsent.MATOMO_URL + 'nimiq.php',
+        }),
+    })
+    private options: {
+        setSiteId: string, // 3 for safe.nimiq.com ?
+        setTrackerUrl: string
+        addDownloadExtensions?: string,
+        trackPageView?: boolean,
+        enableLinkTracking?: boolean,
+        [k: string]: string | boolean,
+    };
+
+    @Prop({
+        type: String,
+        default: 'nimiq.js',
+    })
+    private tagManagerScript: string;
+
+    private consentKnown: boolean = false;
+    private _storage: Consents;
+
+    private async mounted() {
+        if (!window.startTime) {
+            window.startTime = (new Date().getTime());
+        }
+
+        if (this.consents.allowsBrowserData || this.consents.allowsUsageData) {
+            this._initMatomo();
+        }
+
+        const geoIpResponse = await fetch(TrackingConsent.GEOIP_SERVER);
+        if (geoIpResponse.status !== 200) {
+            throw new Error('Failed to contact geoip server');
+        }
+        const geoIpInfo = await geoIpResponse.json();
+        if (geoIpInfo.continent !== 'EU') {
+            this.allowsConsent();
+        }
+    }
+
+    public get consents(): Consents {
+        if (this._storage) {
+            return this._storage;
+        }
+
+        const cookie = this._getCookie(TrackingConsent.STORAGE_KEYS.MAIN);
+        if (cookie) {
+            this._storage = JSON.parse(cookie);
+            return this._storage;
+        }
+
+        const localStoredConsent =
+            localStorage.getItem(TrackingConsent.STORAGE_KEYS.MAIN) ||
+            localStorage.getItem(TrackingConsent.STORAGE_KEYS.SECOND);
+
+        if (localStoredConsent) {
+            this._storage = JSON.parse(localStoredConsent);
+            this._setCookie(TrackingConsent.STORAGE_KEYS.MAIN, localStoredConsent);
+            localStorage.removeItem(TrackingConsent.STORAGE_KEYS.MAIN);
+            localStorage.removeItem(TrackingConsent.STORAGE_KEYS.SECOND);
+            return this._storage;
+        }
+
+        return {};
+    }
+
+    public trackEvent(
+        category: string,
+        action: string,
+        name?: string,
+        value?: string | number,
+    ): void {
+        const _paq = window.paq || [];
+        const obj: Array<string | number> = [category, action];
+
+        if (name) {
+            obj.push(name);
+        }
+        if (value) {
+            obj.push(value);
+        }
+
+        _paq.push(obj);
+    }
+
+    private denyConsent(): void {
+        this._setConsent({ allowsUsageData: false, allowsBrowserData: false });
+    }
+
+    private allowsConsent(): void {
+        this._setConsent({ allowsUsageData: true, allowsBrowserData: true });
+        this._initMatomo();
+    }
+
+    private allowsBrowserData(): void {
+        this._setConsent({ allowsBrowserData: true });
+        this._initMatomo();
+    }
+
+    private _setConsent(consent: Consents): void {
+        this._setCookie(TrackingConsent.STORAGE_KEYS.MAIN, JSON.stringify(consent));
+        this.consentKnown = true;
+    }
+
+    private _initMatomo() {
+        // initialize matomo
+        const _paq = window._paq || [];
+        const _mtm = window._mtm || [];
+
+        // set mtm start
+        _mtm.push({
+            'mtm.startTime': window.startTime,
+            'event': 'mtm.Start',
+        });
+
+        // Get referrer from localstorage
+        const referrer = localStorage.getItem('referrer');
+        if (referrer) {
+            _paq.push(['setReferrerUrl', decodeURIComponent(referrer)]);
+            localStorage.removeItem('referrer');
+        }
+
+        // Cycle through options and set them
+        Object.keys(this.options).forEach((k) => {
+            const option = this.options[k];
+
+            if (option) {
+                _paq.push(typeof option === 'boolean' ? [k] : [k, option]);
+            }
+        });
+
+        // append script
+        (function() {
+            const g = document.createElement('script');
+            const s = document.getElementsByTagName('script')[0];
+            g.type = 'text/javascript'; g.async = true; g.defer = true;
+            g.src = TrackingConsent.MATOMO_URL + this.tagManagerScript;
+            s.parentNode.insertBefore(g, s);
+        })();
+    }
+
+    private _setCookie(
+        cookieName: string,
+        cookieValue: string,
+        expirationDays?: number,
+    ): void {
+        const cookie = [cookieName + '=' + cookieValue];
+
+        if (expirationDays) {
+            const date = new Date();
+            date.setTime(date.getTime() + (expirationDays * 24 * 60 * 60 * 1000));
+
+            cookie.push(';expires=' + date.toUTCString());
+        }
+
+        cookie.push('path=/');
+        cookie.push('domain=' + this.domain);
+
+        document.cookie = cookie.join(';');
+    }
+
+    private _getCookie(cookieName: string): string {
+        return document.cookie.split('; ').map((c) => {
+            const i = c.indexOf('=');
+            const key = c.substring(0, i);
+            const value = c.substring(i);
+
+            return [key, value];
+        }).reduce((acc, cur) => (acc[cur[0]] = cur[1], acc), {})[cookieName] || '';
+    }
 }
+
+namespace TrackingConsent { // tslint:disable-line:no-namespace
+    export enum STORAGE_KEYS {
+        MAIN = 'tracking-consent',
+        SECOND = 'tracking-consensus',
+    }
+
+    export const GEOIP_SERVER = 'https://geoip.nimiq-network.com:8443/v1/locate';
+    export const MATOMO_URL = '//stats.nimiq-network.com/';
+}
+
+export default TrackingConsent;
 </script>
 
 <style scoped>
@@ -84,7 +290,7 @@ export default class TrackingConsent extends Vue {
         display: flex;
     }
 
-    .button-group button:nth-child(2) {
+    .button-group button:not(:first-child) {
         margin-left: 1rem;
     }
 

From 319669d5c41466b96bbe86bce4d486463443ed3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Fri, 4 Oct 2019 18:15:15 +0200
Subject: [PATCH 03/17] TrackingConsent: turn public into static

- turn public methods into static ones
- turn "domain" prop into static const
---
 src/components/TrackingConsent.vue | 112 ++++++++++++++---------------
 1 file changed, 54 insertions(+), 58 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index 0b488827..63b5bd8e 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -65,12 +65,6 @@ class TrackingConsent extends Vue {
     })
     private theme: string;
 
-    @Prop({
-        type: String,
-        default: 'nimiq.com',
-    })
-    private domain: string;
-
     @Prop({
         type: Object,
         default: () => ({
@@ -93,17 +87,18 @@ class TrackingConsent extends Vue {
     private tagManagerScript: string;
 
     private consentKnown: boolean = false;
-    private _storage: Consents;
+    public static _storage: Consents;
 
     private async mounted() {
         if (!window.startTime) {
             window.startTime = (new Date().getTime());
         }
 
-        if (this.consents.allowsBrowserData || this.consents.allowsUsageData) {
+        if (TrackingConsent.consents.allowsBrowserData || TrackingConsent.consents.allowsUsageData) {
             this._initMatomo();
         }
 
+        /* Automatically track stats if user is not in the EU continent  */
         const geoIpResponse = await fetch(TrackingConsent.GEOIP_SERVER);
         if (geoIpResponse.status !== 200) {
             throw new Error('Failed to contact geoip server');
@@ -114,51 +109,6 @@ class TrackingConsent extends Vue {
         }
     }
 
-    public get consents(): Consents {
-        if (this._storage) {
-            return this._storage;
-        }
-
-        const cookie = this._getCookie(TrackingConsent.STORAGE_KEYS.MAIN);
-        if (cookie) {
-            this._storage = JSON.parse(cookie);
-            return this._storage;
-        }
-
-        const localStoredConsent =
-            localStorage.getItem(TrackingConsent.STORAGE_KEYS.MAIN) ||
-            localStorage.getItem(TrackingConsent.STORAGE_KEYS.SECOND);
-
-        if (localStoredConsent) {
-            this._storage = JSON.parse(localStoredConsent);
-            this._setCookie(TrackingConsent.STORAGE_KEYS.MAIN, localStoredConsent);
-            localStorage.removeItem(TrackingConsent.STORAGE_KEYS.MAIN);
-            localStorage.removeItem(TrackingConsent.STORAGE_KEYS.SECOND);
-            return this._storage;
-        }
-
-        return {};
-    }
-
-    public trackEvent(
-        category: string,
-        action: string,
-        name?: string,
-        value?: string | number,
-    ): void {
-        const _paq = window.paq || [];
-        const obj: Array<string | number> = [category, action];
-
-        if (name) {
-            obj.push(name);
-        }
-        if (value) {
-            obj.push(value);
-        }
-
-        _paq.push(obj);
-    }
-
     private denyConsent(): void {
         this._setConsent({ allowsUsageData: false, allowsBrowserData: false });
     }
@@ -174,7 +124,7 @@ class TrackingConsent extends Vue {
     }
 
     private _setConsent(consent: Consents): void {
-        this._setCookie(TrackingConsent.STORAGE_KEYS.MAIN, JSON.stringify(consent));
+        TrackingConsent._setCookie(TrackingConsent.STORAGE_KEYS.MAIN, JSON.stringify(consent));
         this.consentKnown = true;
     }
 
@@ -215,7 +165,7 @@ class TrackingConsent extends Vue {
         })();
     }
 
-    private _setCookie(
+    private static _setCookie(
         cookieName: string,
         cookieValue: string,
         expirationDays?: number,
@@ -230,19 +180,64 @@ class TrackingConsent extends Vue {
         }
 
         cookie.push('path=/');
-        cookie.push('domain=' + this.domain);
+        cookie.push('domain=' + TrackingConsent.COOKIE_DOMAIN);
 
         document.cookie = cookie.join(';');
     }
 
-    private _getCookie(cookieName: string): string {
+    private static _getCookie(cookieName: string): string | null {
         return document.cookie.split('; ').map((c) => {
             const i = c.indexOf('=');
             const key = c.substring(0, i);
             const value = c.substring(i);
 
             return [key, value];
-        }).reduce((acc, cur) => (acc[cur[0]] = cur[1], acc), {})[cookieName] || '';
+        }).reduce((acc, cur) => (acc[cur[0]] = cur[1], acc), {})[cookieName];
+    }
+
+    public static get consents(): Consents {
+        if (TrackingConsent._storage) {
+            return TrackingConsent._storage;
+        }
+
+        const cookie = TrackingConsent._getCookie(TrackingConsent.STORAGE_KEYS.MAIN);
+        if (cookie) {
+            TrackingConsent._storage = JSON.parse(cookie);
+            return TrackingConsent._storage;
+        }
+
+        const localStoredConsent =
+            localStorage.getItem(TrackingConsent.STORAGE_KEYS.MAIN) ||
+            localStorage.getItem(TrackingConsent.STORAGE_KEYS.SECOND);
+
+        if (localStoredConsent) {
+            TrackingConsent._storage = JSON.parse(localStoredConsent);
+            TrackingConsent._setCookie(TrackingConsent.STORAGE_KEYS.MAIN, localStoredConsent);
+            localStorage.removeItem(TrackingConsent.STORAGE_KEYS.MAIN);
+            localStorage.removeItem(TrackingConsent.STORAGE_KEYS.SECOND);
+            return TrackingConsent._storage;
+        }
+
+        return {};
+    }
+
+    public static trackEvent(
+        category: string,
+        action: string,
+        name?: string,
+        value?: string | number,
+    ): void {
+        const _paq = window._paq || [];
+        const obj: Array<string | number> = ['trackEvent', category, action];
+
+        if (name) {
+            obj.push(name);
+        }
+        if (value) {
+            obj.push(value);
+        }
+
+        _paq.push(obj);
     }
 }
 
@@ -254,6 +249,7 @@ namespace TrackingConsent { // tslint:disable-line:no-namespace
 
     export const GEOIP_SERVER = 'https://geoip.nimiq-network.com:8443/v1/locate';
     export const MATOMO_URL = '//stats.nimiq-network.com/';
+    export const COOKIE_DOMAIN = 'nimiq.com';
 }
 
 export default TrackingConsent;

From b376b8156556a415d415ef7d8261c6d322fdb29d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Mon, 4 Nov 2019 17:51:13 +0100
Subject: [PATCH 04/17] TrackingConsent: PR requested changes - Multiple fix
 and improvements

- PR requested changes
- Listening for tab / window focus in case the user allows tracking on another tab / window or change browser settings / vpn

ToDo:
- Should use BottomOverlay
- Component doc comment
---
 src/components/TrackingConsent.vue | 372 +++++++++++++++++++----------
 src/stories/index.stories.js       |  14 +-
 tsconfig.json                      |   1 +
 types/TrackingConsent.d.ts         |   5 +
 4 files changed, 260 insertions(+), 132 deletions(-)
 create mode 100644 types/TrackingConsent.d.ts

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index 63b5bd8e..7faa6c3c 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -1,34 +1,33 @@
 <template>
     <div
-        id="tracking-consent"
-        class="tracking-consent-banner nq-shadow"
+        class="tracking-consent nq-shadow"
         :class="theme"
-        v-if="!consentKnown"
+        v-if="uiRequired && uiAllowed"
     >
         {{ text.main }} ❤️
         <div class="button-group">
             <button
                 class="nq-button-pill light-blue"
-                @click="allowsConsent"
+                @click="allowUsageData"
             >{{ text.yes }}</button>
             <button
                 class="nq-button-s"
                 @click="denyConsent"
-                :class="{ inverse: theme === 'dark' }"
+                :class="{ inverse: theme === constructor.Themes.DARK }"
             >{{ text.no }}</button>
             <button
                 class="nq-button-s"
-                @click="allowsBrowserData"
-                :class="{ inverse: theme === 'dark' }"
+                @click="allowBrowserData"
+                :class="{ inverse: theme === constructor.Themes.DARK }"
             >{{ text.browserOnly }}</button>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 
-interface Consents {
+interface Consent {
     allowsBrowserData?: boolean;
     allowsUsageData?: boolean;
 }
@@ -51,7 +50,7 @@ class TrackingConsent extends Vue {
             value.browserOnly && typeof value.browserOnly === 'string' && value.browserOnly.length
         ),
     })
-    private text: {
+    public text: {
         main: string,
         yes: string,
         no: string,
@@ -61,18 +60,18 @@ class TrackingConsent extends Vue {
     @Prop({
         type: String,
         default: 'light',
-        validator: (theme) => ['dark', 'light'].includes(theme),
+        validator: (theme) => Object.values(TrackingConsent.Themes).includes(theme),
     })
-    private theme: string;
+    public theme: string;
 
     @Prop({
         type: Object,
         default: () => ({
-            setTrackerUrl: TrackingConsent.MATOMO_URL + 'nimiq.php',
+            setTrackerUrl: TrackingConsent.DEFAULT_MATOMO_URL + 'nimiq.php',
         }),
     })
-    private options: {
-        setSiteId: string, // 3 for safe.nimiq.com ?
+    public options: {
+        setSiteId: string, /* 3 for safe.nimiq.com ? */
         setTrackerUrl: string
         addDownloadExtensions?: string,
         trackPageView?: boolean,
@@ -82,181 +81,294 @@ class TrackingConsent extends Vue {
 
     @Prop({
         type: String,
-        default: 'nimiq.js',
+        default: () => TrackingConsent.DEFAULT_MATOMO_URL + 'nimiq.js',
     })
-    private tagManagerScript: string;
+    public trackingScriptUrl: string;
 
-    private consentKnown: boolean = false;
-    public static _storage: Consents;
+    @Prop({
+        type: Boolean,
+        default: true,
+    })
+    public uiAllowed: boolean;
 
-    private async mounted() {
-        if (!window.startTime) {
-            window.startTime = (new Date().getTime());
-        }
+    @Prop({
+        type: Boolean,
+        default: false,
+    })
+    public ignoreDoNotTrack: boolean;
 
-        if (TrackingConsent.consents.allowsBrowserData || TrackingConsent.consents.allowsUsageData) {
-            this._initMatomo();
-        }
+    @Prop({
+        type: Object,
+        default: () => ({
+            domain: document.location.hostname,
+            expirationDays: 365 * 20,
+        }),
+        validator: ({ expirationDays }) => expirationDays >= 0,
+    })
+    public cookieOptions: {
+        domain: string,
+        expirationDays: number,
+    };
 
-        /* Automatically track stats if user is not in the EU continent  */
-        const geoIpResponse = await fetch(TrackingConsent.GEOIP_SERVER);
-        if (geoIpResponse.status !== 200) {
-            throw new Error('Failed to contact geoip server');
-        }
-        const geoIpInfo = await geoIpResponse.json();
-        if (geoIpInfo.continent !== 'EU') {
-            this.allowsConsent();
+    @Prop({
+        type: String,
+        default: 'https://geoip.nimiq-network.com:8443/v1/locate',
+    })
+    private geoIpServer: string;
+
+    private static _instances: Set<TrackingConsent> = new Set();
+    private uiRequired: boolean = false;
+
+    public static get _paq() {
+        if (!window._paq || !Array.isArray(window._paq)) {
+            window._paq = [];
         }
+        return window._paq;
     }
 
-    private denyConsent(): void {
-        this._setConsent({ allowsUsageData: false, allowsBrowserData: false });
+    public static get _mtm() {
+        if (!window._mtm || !Array.isArray(window._mtm)) {
+            window._mtm = [];
+        }
+        return window._mtm;
     }
 
-    private allowsConsent(): void {
-        this._setConsent({ allowsUsageData: true, allowsBrowserData: true });
-        this._initMatomo();
+    public static get consent(): Consent {
+        const cookie = TrackingConsent._getCookie(TrackingConsent.COOKIE_STORAGE_KEY);
+        if (cookie) {
+            return JSON.parse(cookie);
+        }
+
+        return {};
     }
 
-    private allowsBrowserData(): void {
-        this._setConsent({ allowsBrowserData: true });
-        this._initMatomo();
+    public static get allowsUsageData() {
+        return TrackingConsent.consent.allowsUsageData;
     }
 
-    private _setConsent(consent: Consents): void {
-        TrackingConsent._setCookie(TrackingConsent.STORAGE_KEYS.MAIN, JSON.stringify(consent));
-        this.consentKnown = true;
+    public static get allowsBrowserData() {
+        return TrackingConsent.consent.allowsBrowserData;
     }
 
-    private _initMatomo() {
-        // initialize matomo
-        const _paq = window._paq || [];
-        const _mtm = window._mtm || [];
+    public static trackEvent(
+        category: string,
+        action: string,
+        name?: string,
+        value?: string | number,
+    ) {
+        if (!TrackingConsent.allowsUsageData) return;
 
-        // set mtm start
-        _mtm.push({
-            'mtm.startTime': window.startTime,
-            'event': 'mtm.Start',
-        });
+        const obj: Array<string | number> = ['trackEvent', category, action];
 
-        // Get referrer from localstorage
-        const referrer = localStorage.getItem('referrer');
-        if (referrer) {
-            _paq.push(['setReferrerUrl', decodeURIComponent(referrer)]);
-            localStorage.removeItem('referrer');
+        if (name) {
+            obj.push(name);
+        }
+        if (value) {
+            obj.push(value);
         }
 
-        // Cycle through options and set them
-        Object.keys(this.options).forEach((k) => {
-            const option = this.options[k];
-
-            if (option) {
-                _paq.push(typeof option === 'boolean' ? [k] : [k, option]);
-            }
-        });
-
-        // append script
-        (function() {
-            const g = document.createElement('script');
-            const s = document.getElementsByTagName('script')[0];
-            g.type = 'text/javascript'; g.async = true; g.defer = true;
-            g.src = TrackingConsent.MATOMO_URL + this.tagManagerScript;
-            s.parentNode.insertBefore(g, s);
-        })();
+        TrackingConsent._paq.push(obj);
     }
 
     private static _setCookie(
         cookieName: string,
         cookieValue: string,
-        expirationDays?: number,
-    ): void {
+        options: {
+            expirationDays: number,
+            domain: string,
+        },
+    ) {
         const cookie = [cookieName + '=' + cookieValue];
 
-        if (expirationDays) {
-            const date = new Date();
-            date.setTime(date.getTime() + (expirationDays * 24 * 60 * 60 * 1000));
-
-            cookie.push(';expires=' + date.toUTCString());
+        if (options) {
+            if (options.expirationDays) {
+                cookie.push('max-age=' + options.expirationDays * 24 * 60 * 60);
+            }
+            if (options.domain) {
+                cookie.push('domain=' + options.domain);
+            }
         }
 
         cookie.push('path=/');
-        cookie.push('domain=' + TrackingConsent.COOKIE_DOMAIN);
-
         document.cookie = cookie.join(';');
     }
 
     private static _getCookie(cookieName: string): string | null {
-        return document.cookie.split('; ').map((c) => {
-            const i = c.indexOf('=');
-            const key = c.substring(0, i);
-            const value = c.substring(i);
+        const match = document.cookie.match(new RegExp(`(^| )${cookieName}=([^;]+)`));
+        return match && match[2];
+    }
+
+    public denyConsent() {
+        TrackingConsent._paq.push(['optUserOut']);
+        this._setConsent({ allowsUsageData: false, allowsBrowserData: false });
+    }
 
-            return [key, value];
-        }).reduce((acc, cur) => (acc[cur[0]] = cur[1], acc), {})[cookieName];
+    public allowUsageData() {
+        TrackingConsent._paq.push(['forgetUserOptOut']);
+        this._setConsent({ allowsUsageData: true, allowsBrowserData: true });
+        this._initMatomo();
     }
 
-    public static get consents(): Consents {
-        if (TrackingConsent._storage) {
-            return TrackingConsent._storage;
-        }
+    public allowBrowserData() {
+        TrackingConsent._paq.push(['forgetUserOptOut']);
+        this._setConsent({ allowsBrowserData: true, allowsUsageData: false });
+        this._initMatomo();
+    }
 
-        const cookie = TrackingConsent._getCookie(TrackingConsent.STORAGE_KEYS.MAIN);
-        if (cookie) {
-            TrackingConsent._storage = JSON.parse(cookie);
-            return TrackingConsent._storage;
+    private created() {
+        /* initialize startTime for the tracking script */
+        if (!window.startTime) {
+            window.startTime = (new Date().getTime());
         }
 
+        /* Check for consent changes on tab / window focus */
+        document.addEventListener('visibilitychange', this._onVisibilityChange);
+
+        /* Add to the TrackingConsent instances list */
+        TrackingConsent._instances.add(this);
+
+        /* Check old consent preferences if there's any */
         const localStoredConsent =
-            localStorage.getItem(TrackingConsent.STORAGE_KEYS.MAIN) ||
-            localStorage.getItem(TrackingConsent.STORAGE_KEYS.SECOND);
+            localStorage.getItem(TrackingConsent.localstorageKeys[0]) ||
+            localStorage.getItem(TrackingConsent.localstorageKeys[1]);
 
         if (localStoredConsent) {
-            TrackingConsent._storage = JSON.parse(localStoredConsent);
-            TrackingConsent._setCookie(TrackingConsent.STORAGE_KEYS.MAIN, localStoredConsent);
-            localStorage.removeItem(TrackingConsent.STORAGE_KEYS.MAIN);
-            localStorage.removeItem(TrackingConsent.STORAGE_KEYS.SECOND);
-            return TrackingConsent._storage;
+            localStorage.removeItem(TrackingConsent.localstorageKeys[0]);
+            localStorage.removeItem(TrackingConsent.localstorageKeys[1]);
+
+            this._setConsent(JSON.parse(localStoredConsent));
         }
 
-        return {};
+        /* check if the UI is required */
+        this._checkUiRequired();
     }
 
-    public static trackEvent(
-        category: string,
-        action: string,
-        name?: string,
-        value?: string | number,
-    ): void {
-        const _paq = window._paq || [];
-        const obj: Array<string | number> = ['trackEvent', category, action];
+    private destroyed() {
+        /* Remove the event watching for consent changes on tab / window focus */
+        document.removeEventListener('visibilitychange', this._onVisibilityChange);
 
-        if (name) {
-            obj.push(name);
+        /* Remove from the TrackingConsent instances list */
+        TrackingConsent._instances.delete(this);
+    }
+
+    private async _checkUiRequired() {
+        /* check whether the user has the "do not track" browser option enabled or not  */
+        if (navigator.doNotTrack === '1' && !this.ignoreDoNotTrack) {
+            this.uiRequired = false;
+            return;
         }
-        if (value) {
-            obj.push(value);
+
+        /* Check consent preferences if there's any */
+        if (TrackingConsent.allowsBrowserData || TrackingConsent.allowsUsageData) {
+            this.uiRequired = false;
+            this._initMatomo();
+            return;
+        } else if (
+            TrackingConsent.allowsBrowserData === false &&
+            TrackingConsent.allowsUsageData === false
+        ) {
+            this.uiRequired = false;
+            return;
+        }
+
+        /* Automatically track stats if user is not in the EU continent  */
+        const geoIpResponse = await fetch(this.geoIpServer);
+        if (geoIpResponse.status !== 200) {
+            console.warn('TrackingConsent: Failed to contact geoip server');
+            return;
         }
+        const geoIpInfo = await geoIpResponse.json();
+        if (geoIpInfo.continent !== 'EU' && !['NO', 'LI', 'IS'].includes(geoIpInfo.country)) { /* EU / EEA */
+            this.uiRequired = false;
+            this._initMatomo();
+            return;
+        }
+
+        this.uiRequired = true;
+    }
+
+    private _onVisibilityChange() {
+        if (document.visibilityState === 'visible') {
+            this._checkUiRequired();
+        }
+    }
+
+    private _setConsent(consent: Consent) {
+        TrackingConsent._setCookie(
+            TrackingConsent.COOKIE_STORAGE_KEY,
+            JSON.stringify(consent),
+            this.cookieOptions,
+        );
+        this.uiRequired = false;
+
+        /* update other TrackingConsent instances */
+        TrackingConsent._instances.forEach((instance) => {
+            instance.uiRequired = false;
+        });
+    }
+
+    private _initMatomo() {
+        /* Check whether matomo is already initialized */
+        if (document.querySelector('script[matomo]')) {
+            console.warn('TrackingConsent: Matomo already initialized.');
+            return;
+        }
+
+        /* set mtm startTime */
+        TrackingConsent._mtm.push({
+            'mtm.startTime': window.startTime,
+            'event': 'mtm.Start',
+        });
+
+        /* Get referrer from localstorage */
+        const referrer = localStorage.getItem('referrer');
+        if (referrer) {
+            TrackingConsent._paq.push(['setReferrerUrl', decodeURIComponent(referrer)]);
+            localStorage.removeItem('referrer');
+        }
+
+        /* Cycle through options and set them */
+        Object.keys(this.options).forEach((k) => {
+            const option = this.options[k];
+
+            if (option) {
+                TrackingConsent._paq.push(typeof option === 'boolean' ? [k] : [k, option]);
+            }
+        });
 
-        _paq.push(obj);
+        /* append script */
+        const script = document.createElement('script');
+        const nextScript = document.getElementsByTagName('script')[0];
+        script.type = 'text/javascript';
+        script.async = script.defer = true;
+        script.src = this.trackingScriptUrl;
+        script.setAttribute('matomo', '');
+        nextScript.parentNode.insertBefore(script, nextScript);
+
+        console.log('TrackingConsent: Matomo initialized and script added');
     }
 }
 
 namespace TrackingConsent { // tslint:disable-line:no-namespace
-    export enum STORAGE_KEYS {
-        MAIN = 'tracking-consent',
-        SECOND = 'tracking-consensus',
+    export enum Themes {
+        LIGHT = 'light',
+        DARK = 'dark',
     }
 
-    export const GEOIP_SERVER = 'https://geoip.nimiq-network.com:8443/v1/locate';
-    export const MATOMO_URL = '//stats.nimiq-network.com/';
-    export const COOKIE_DOMAIN = 'nimiq.com';
+    export const localstorageKeys = [
+        'tracking-consent',
+        'tracking-consensus',
+    ];
+
+    export const COOKIE_STORAGE_KEY = 'tracking-consent';
+    export const DEFAULT_MATOMO_URL = '//stats.nimiq-network.com/';
 }
 
 export default TrackingConsent;
 </script>
 
 <style scoped>
-    .tracking-consent-banner {
+    .tracking-consent {
         position: fixed;
         bottom: 2rem;
         z-index: 900;
@@ -271,12 +383,12 @@ export default TrackingConsent;
         font-size: 2rem;
     }
 
-    .tracking-consent-banner.light {
+    .tracking-consent.light {
         background: white;
         color: var(--nimiq-blue);
     }
 
-    .tracking-consent-banner.dark {
+    .tracking-consent.dark {
         background: var(--nimiq-blue);
         color: white;
     }
@@ -291,7 +403,7 @@ export default TrackingConsent;
     }
 
     @media (max-width: 860px) {
-        .tracking-consent-banner {
+        .tracking-consent {
             flex-direction: column;
             align-items: flex-start;
             width: 100%;
diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js
index 9f480bcd..fcb1c67d 100644
--- a/src/stories/index.stories.js
+++ b/src/stories/index.stories.js
@@ -831,7 +831,8 @@ storiesOf('Components', module)
         return {
             components: { TrackingConsent },
             data: () => ({
-                theme: 'dark'
+                theme: 'dark',
+                uiallowed: true
             }),
             template: windowTemplate(`
                 <label>
@@ -842,7 +843,16 @@ storiesOf('Components', module)
                     Light theme
                     <input type="radio" v-model="theme" value="light"/>
                 </label>
-                <TrackingConsent :theme="theme"/>
+                <br />
+                <label>
+                    Ui Allowed
+                    <input type="radio" v-model="uiallowed" :value="true"/>
+                </label>
+                <label>
+                    Ui Not Allowed
+                    <input type="radio" v-model="uiallowed" :value="false"/>
+                </label>
+                <TrackingConsent :theme="theme" :uiAllowed="uiallowed"/>
             `)
         };
     })
diff --git a/tsconfig.json b/tsconfig.json
index d8a45cf5..54db6514 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,6 +30,7 @@
     "include": [
         "types/svg.d.ts",
         "src/main.ts", // Must be included for TSLint to work
+        "types/TrackingConsent.d.ts",
         // "src/**/*.ts",
         // "src/**/*.tsx",
         // "src/**/*.vue",
diff --git a/types/TrackingConsent.d.ts b/types/TrackingConsent.d.ts
new file mode 100644
index 00000000..8fa9f841
--- /dev/null
+++ b/types/TrackingConsent.d.ts
@@ -0,0 +1,5 @@
+declare interface Window {
+    startTime: number,
+    _mtm: any[],
+    _paq: any[],
+}

From 758053ee4b375deadd1ff7a254e10cd51c730464 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Mon, 4 Nov 2019 17:21:22 +0100
Subject: [PATCH 05/17] TrackingConsent: safari hacks for browser bottom bar

---
 src/components/TrackingConsent.vue | 34 +++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index 7faa6c3c..db3ded78 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         class="tracking-consent nq-shadow"
-        :class="theme"
+        :class="[ theme, safariFix ]"
         v-if="uiRequired && uiAllowed"
     >
         {{ text.main }} ❤️
@@ -118,6 +118,7 @@ class TrackingConsent extends Vue {
 
     private static _instances: Set<TrackingConsent> = new Set();
     private uiRequired: boolean = false;
+    private safariFix: string = '';
 
     public static get _paq() {
         if (!window._paq || !Array.isArray(window._paq)) {
@@ -243,6 +244,29 @@ class TrackingConsent extends Vue {
         this._checkUiRequired();
     }
 
+    private mounted() {
+        /* Safari IOS style fix */
+        const ua = window.navigator.userAgent;
+        const iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
+        const webkit = !!ua.match(/WebKit/i);
+        const iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
+
+        if (iOSSafari) {
+            let majorVersion = null;
+
+            if (/iP(hone|od|ad)/.test(navigator.platform)) {
+                const match = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
+                majorVersion = parseInt(match[1], 10);
+            }
+
+            if (majorVersion >= 13) {
+                this.safariFix = 'ios-safari-13-fix';
+            } else if (majorVersion >= 12) {
+                this.safariFix = 'ios-safari-12-fix';
+            }
+        }
+    }
+
     private destroyed() {
         /* Remove the event watching for consent changes on tab / window focus */
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
@@ -413,6 +437,14 @@ export default TrackingConsent;
             padding: 2.5rem;
         }
 
+        .tracking-consent.ios-safari-13-fix {
+            bottom: 74px;
+        }
+
+        .tracking-consent.ios-safari-12-fix {
+            bottom: 34px;
+        }
+
         .button-group {
             margin-left: 0;
             margin-top: 16px;

From f2216e665faf2b6233d4a81d370cdea1fbe34530 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Wed, 1 Jul 2020 18:54:55 +0200
Subject: [PATCH 06/17] TrackingConsent: Add i18n

---
 src/components/TrackingConsent.vue | 26 ++++++++++++++++----------
 src/i18n/en.po                     | 12 ++++++++++++
 src/i18n/fr.po                     | 12 ++++++++++++
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index db3ded78..0ef433c1 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -4,7 +4,7 @@
         :class="[ theme, safariFix ]"
         v-if="uiRequired && uiAllowed"
     >
-        {{ text.main }} ❤️
+        {{ text.main }}
         <div class="button-group">
             <button
                 class="nq-button-pill light-blue"
@@ -26,6 +26,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import I18nMixin from '../i18n/I18nMixin';
 
 interface Consent {
     allowsBrowserData?: boolean;
@@ -37,17 +38,22 @@ class TrackingConsent extends Vue {
     @Prop({
         type: Object,
         default:  () => ({
-            main: 'Help Nimiq improve by sharing anonymized usage data. Thank you!',
-            yes: 'Yes',
-            no: 'No',
+            get main() {
+                return I18nMixin.$t(
+                    'TrackingConsent',
+                    'Help Nimiq improve by sharing anonymized usage data. Thank you! ❤️',
+                );
+            },
+            get yes() { return I18nMixin.$t('TrackingConsent', 'Yes'); },
+            get no() { return I18nMixin.$t('TrackingConsent', 'No'); },
             browserOnly: 'Browser-info only',
         }),
-        validator: (value) => (
-            value && typeof value === 'object' &&
-            value.no && typeof value.no === 'string' && value.no.length &&
-            value.yes && typeof value.yes === 'string' && value.yes.length &&
-            value.main && typeof value.main === 'string' && value.main.length &&
-            value.browserOnly && typeof value.browserOnly === 'string' && value.browserOnly.length
+        validator: (text) => (
+            text && typeof text === 'object' &&
+            text.no && typeof text.no === 'string' && text.no.length &&
+            text.yes && typeof text.yes === 'string' && text.yes.length &&
+            text.main && typeof text.main === 'string' && text.main.length &&
+            text.browserOnly && typeof text.browserOnly === 'string' && text.browserOnly.length
         ),
     })
     public text: {
diff --git a/src/i18n/en.po b/src/i18n/en.po
index 875b750f..3269398a 100644
--- a/src/i18n/en.po
+++ b/src/i18n/en.po
@@ -103,6 +103,10 @@ msgstr ""
 msgid "Grant camera access when asked."
 msgstr ""
 
+#: src/components/TrackingConsent.vue:42
+msgid "Help Nimiq improve by sharing anonymized usage data. Thank you! ❤️"
+msgstr ""
+
 #: src/components/Timer.vue:93
 msgid "hour"
 msgstr ""
@@ -157,6 +161,10 @@ msgstr ""
 msgid "Nimiq provides this service free of charge."
 msgstr ""
 
+#: src/components/TrackingConsent.vue:48
+msgid "No"
+msgstr ""
+
 #: src/components/SendTx.vue:108
 msgid "Open settings"
 msgstr ""
@@ -254,6 +262,10 @@ msgstr ""
 msgid "Vendor crypto markup"
 msgstr ""
 
+#: src/components/TrackingConsent.vue:47
+msgid "Yes"
+msgstr ""
+
 #: src/components/PaymentInfoLine.vue:281
 msgid "You are paying approx. {formattedRateDeviation} less than at the current market rate (coingecko.com)."
 msgstr ""
diff --git a/src/i18n/fr.po b/src/i18n/fr.po
index 4b64efe1..2ac2fc3c 100644
--- a/src/i18n/fr.po
+++ b/src/i18n/fr.po
@@ -120,6 +120,10 @@ msgstr "Retour"
 msgid "Grant camera access when asked."
 msgstr "Accordez l'accès à la caméra lorsque cela vous est demandé."
 
+#: src/components/TrackingConsent.vue:42
+msgid "Help Nimiq improve by sharing anonymized usage data. Thank you! ❤️"
+msgstr ""
+
 #: src/components/Timer.vue:93
 msgid "hour"
 msgstr "heure"
@@ -172,6 +176,10 @@ msgstr "frais de réseau"
 msgid "Nimiq provides this service free of charge."
 msgstr "Nimiq fournit ce service gratuitement."
 
+#: src/components/TrackingConsent.vue:48
+msgid "No"
+msgstr ""
+
 #: src/components/SendTx.vue:108
 msgid "Open settings"
 msgstr "Ouvrir les réglages"
@@ -268,6 +276,10 @@ msgstr "Crypto-remise"
 msgid "Vendor crypto markup"
 msgstr "Crypto-premium"
 
+#: src/components/TrackingConsent.vue:47
+msgid "Yes"
+msgstr ""
+
 #: src/components/PaymentInfoLine.vue:281
 msgid ""
 "You are paying approx. {formattedRateDeviation} less than at the current "

From 3c78e70089ae157fb3baf47eb8abc26e4cd7fe72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Wed, 1 Jul 2020 19:37:35 +0200
Subject: [PATCH 07/17] TrackingConsent: now centered on the bottom of the page

---
 src/components/TrackingConsent.vue | 58 +++++++++++++++++-------------
 src/i18n/en.po                     |  6 ++--
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index 0ef433c1..62f30016 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -1,25 +1,26 @@
 <template>
-    <div
-        class="tracking-consent nq-shadow"
+    <div class="tracking-consent"
         :class="[ theme, safariFix ]"
         v-if="uiRequired && uiAllowed"
     >
-        {{ text.main }}
-        <div class="button-group">
-            <button
-                class="nq-button-pill light-blue"
-                @click="allowUsageData"
-            >{{ text.yes }}</button>
-            <button
-                class="nq-button-s"
-                @click="denyConsent"
-                :class="{ inverse: theme === constructor.Themes.DARK }"
-            >{{ text.no }}</button>
-            <button
-                class="nq-button-s"
-                @click="allowBrowserData"
-                :class="{ inverse: theme === constructor.Themes.DARK }"
-            >{{ text.browserOnly }}</button>
+        <div class="content nq-shadow">
+            {{ text.main }}
+            <div class="button-group">
+                <button
+                    class="nq-button-pill light-blue"
+                    @click="allowUsageData"
+                >{{ text.yes }}</button>
+                <button
+                    class="nq-button-s"
+                    @click="denyConsent"
+                    :class="{ inverse: theme === constructor.Themes.DARK }"
+                >{{ text.no }}</button>
+                <button
+                    class="nq-button-s"
+                    @click="allowBrowserData"
+                    :class="{ inverse: theme === constructor.Themes.DARK }"
+                >{{ text.browserOnly }}</button>
+            </div>
         </div>
     </div>
 </template>
@@ -402,23 +403,28 @@ export default TrackingConsent;
         position: fixed;
         bottom: 2rem;
         z-index: 900;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
 
-        padding: 1.5rem;
-
+    .content {
         display: flex;
         align-items: center;
         justify-content: space-between;
 
+        padding: 1.5rem;
+
         border-radius: 1rem;
         font-size: 2rem;
     }
 
-    .tracking-consent.light {
+    .light .content {
         background: white;
         color: var(--nimiq-blue);
     }
 
-    .tracking-consent.dark {
+    .dark .content {
         background: var(--nimiq-blue);
         color: white;
     }
@@ -433,16 +439,18 @@ export default TrackingConsent;
     }
 
     @media (max-width: 860px) {
-        .tracking-consent {
+        .content {
             flex-direction: column;
             align-items: flex-start;
-            width: 100%;
-            bottom: 0;
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
             padding: 2.5rem;
         }
 
+        .tracking-consent {
+            bottom: 0;
+        }
+
         .tracking-consent.ios-safari-13-fix {
             bottom: 74px;
         }
diff --git a/src/i18n/en.po b/src/i18n/en.po
index 3269398a..b9608160 100644
--- a/src/i18n/en.po
+++ b/src/i18n/en.po
@@ -103,7 +103,7 @@ msgstr ""
 msgid "Grant camera access when asked."
 msgstr ""
 
-#: src/components/TrackingConsent.vue:42
+#: src/components/TrackingConsent.vue:43
 msgid "Help Nimiq improve by sharing anonymized usage data. Thank you! ❤️"
 msgstr ""
 
@@ -161,7 +161,7 @@ msgstr ""
 msgid "Nimiq provides this service free of charge."
 msgstr ""
 
-#: src/components/TrackingConsent.vue:48
+#: src/components/TrackingConsent.vue:49
 msgid "No"
 msgstr ""
 
@@ -262,7 +262,7 @@ msgstr ""
 msgid "Vendor crypto markup"
 msgstr ""
 
-#: src/components/TrackingConsent.vue:47
+#: src/components/TrackingConsent.vue:48
 msgid "Yes"
 msgstr ""
 

From cb85d5a2553fb36bd06c3dd1e87ec71b31f849c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Wed, 1 Jul 2020 21:23:38 +0200
Subject: [PATCH 08/17] TrackingConsent: remove unnecessary ios fixes

---
 src/components/TrackingConsent.vue | 33 +-----------------------------
 1 file changed, 1 insertion(+), 32 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index 62f30016..3c0fd67b 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="tracking-consent"
-        :class="[ theme, safariFix ]"
+        :class="[ theme ]"
         v-if="uiRequired && uiAllowed"
     >
         <div class="content nq-shadow">
@@ -251,29 +251,6 @@ class TrackingConsent extends Vue {
         this._checkUiRequired();
     }
 
-    private mounted() {
-        /* Safari IOS style fix */
-        const ua = window.navigator.userAgent;
-        const iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
-        const webkit = !!ua.match(/WebKit/i);
-        const iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
-
-        if (iOSSafari) {
-            let majorVersion = null;
-
-            if (/iP(hone|od|ad)/.test(navigator.platform)) {
-                const match = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
-                majorVersion = parseInt(match[1], 10);
-            }
-
-            if (majorVersion >= 13) {
-                this.safariFix = 'ios-safari-13-fix';
-            } else if (majorVersion >= 12) {
-                this.safariFix = 'ios-safari-12-fix';
-            }
-        }
-    }
-
     private destroyed() {
         /* Remove the event watching for consent changes on tab / window focus */
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
@@ -451,14 +428,6 @@ export default TrackingConsent;
             bottom: 0;
         }
 
-        .tracking-consent.ios-safari-13-fix {
-            bottom: 74px;
-        }
-
-        .tracking-consent.ios-safari-12-fix {
-            bottom: 34px;
-        }
-
         .button-group {
             margin-left: 0;
             margin-top: 16px;

From 47c5a24b2e55021d86e97e6e85466d5e0edf392b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Tue, 21 Jul 2020 14:57:17 +0200
Subject: [PATCH 09/17] TrackingConsent: debug with dashboard & fixes

- types fix
- setTrackerUrl & trackingScriptUrl urls fix
- add default setTrackerUrl value
- now using a window `focus` listener instead of document `visibilitychange` one
---
 src/components/TrackingConsent.vue | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index 3c0fd67b..c0a15bf8 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -33,7 +33,9 @@ interface Consent {
     allowsBrowserData?: boolean;
     allowsUsageData?: boolean;
 }
-
+/**
+ * TrackinConsent Component - used to setup Matomo tracking in a vue-based project
+ */
 @Component
 class TrackingConsent extends Vue {
     @Prop({
@@ -74,21 +76,21 @@ class TrackingConsent extends Vue {
     @Prop({
         type: Object,
         default: () => ({
-            setTrackerUrl: TrackingConsent.DEFAULT_MATOMO_URL + 'nimiq.php',
+            setTrackerUrl: TrackingConsent.DEFAULT_TRACKER_URL,
         }),
     })
     public options: {
-        setSiteId: string, /* 3 for safe.nimiq.com ? */
+        setSiteId: number, /* 3 for safe.nimiq.com ? */
         setTrackerUrl: string
         addDownloadExtensions?: string,
         trackPageView?: boolean,
         enableLinkTracking?: boolean,
-        [k: string]: string | boolean,
+        [k: string]: number | string | boolean,
     };
 
     @Prop({
         type: String,
-        default: () => TrackingConsent.DEFAULT_MATOMO_URL + 'nimiq.js',
+        default: () => TrackingConsent.DEFAULT_TRACKING_URL,
     })
     public trackingScriptUrl: string;
 
@@ -230,7 +232,7 @@ class TrackingConsent extends Vue {
         }
 
         /* Check for consent changes on tab / window focus */
-        document.addEventListener('visibilitychange', this._onVisibilityChange);
+        window.addEventListener('focus', this._onVisibilityChange);
 
         /* Add to the TrackingConsent instances list */
         TrackingConsent._instances.add(this);
@@ -253,7 +255,7 @@ class TrackingConsent extends Vue {
 
     private destroyed() {
         /* Remove the event watching for consent changes on tab / window focus */
-        document.removeEventListener('visibilitychange', this._onVisibilityChange);
+        window.removeEventListener('focus', this._onVisibilityChange);
 
         /* Remove from the TrackingConsent instances list */
         TrackingConsent._instances.delete(this);
@@ -335,6 +337,11 @@ class TrackingConsent extends Vue {
             localStorage.removeItem('referrer');
         }
 
+        /* set setTrackerUrl to default value if not set */
+        if (!this.options.setTrackerUrl) {
+            this.options.setTrackerUrl = TrackingConsent.DEFAULT_TRACKER_URL;
+        }
+
         /* Cycle through options and set them */
         Object.keys(this.options).forEach((k) => {
             const option = this.options[k];
@@ -352,8 +359,6 @@ class TrackingConsent extends Vue {
         script.src = this.trackingScriptUrl;
         script.setAttribute('matomo', '');
         nextScript.parentNode.insertBefore(script, nextScript);
-
-        console.log('TrackingConsent: Matomo initialized and script added');
     }
 }
 
@@ -370,6 +375,9 @@ namespace TrackingConsent { // tslint:disable-line:no-namespace
 
     export const COOKIE_STORAGE_KEY = 'tracking-consent';
     export const DEFAULT_MATOMO_URL = '//stats.nimiq-network.com/';
+
+    export const DEFAULT_TRACKER_URL = DEFAULT_MATOMO_URL + 'matomo.php';
+    export const DEFAULT_TRACKING_URL = DEFAULT_MATOMO_URL + 'matomo.js';
 }
 
 export default TrackingConsent;

From 2cd5ef46af3b7f0147c7b3f3646208aaf77c8789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Tue, 21 Jul 2020 18:28:51 +0200
Subject: [PATCH 10/17] TrackingConsent: add some comments & multiple minor
 fixes

---
 src/components/TrackingConsent.vue | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index c0a15bf8..fdd6b0b4 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -38,6 +38,8 @@ interface Consent {
  */
 @Component
 class TrackingConsent extends Vue {
+    private static _instances: Set<TrackingConsent> = new Set();
+
     @Prop({
         type: Object,
         default:  () => ({
@@ -76,12 +78,13 @@ class TrackingConsent extends Vue {
     @Prop({
         type: Object,
         default: () => ({
+            setSiteId: 1,
             setTrackerUrl: TrackingConsent.DEFAULT_TRACKER_URL,
         }),
     })
     public options: {
-        setSiteId: number, /* 3 for safe.nimiq.com ? */
-        setTrackerUrl: string
+        setSiteId: number,
+        setTrackerUrl?: string
         addDownloadExtensions?: string,
         trackPageView?: boolean,
         enableLinkTracking?: boolean,
@@ -123,11 +126,9 @@ class TrackingConsent extends Vue {
         type: String,
         default: 'https://geoip.nimiq-network.com:8443/v1/locate',
     })
-    private geoIpServer: string;
+    public geoIpServer: string;
 
-    private static _instances: Set<TrackingConsent> = new Set();
     private uiRequired: boolean = false;
-    private safariFix: string = '';
 
     public static get _paq() {
         if (!window._paq || !Array.isArray(window._paq)) {
@@ -143,8 +144,13 @@ class TrackingConsent extends Vue {
         return window._mtm;
     }
 
+    /**
+     * consent getter - return the parsed content of the consent cookie that store the user's choice about data sharing
+     * @return {Consent} An object containing two boolean properties: allowsBrowserData & allowsUsageData
+     */
     public static get consent(): Consent {
         const cookie = TrackingConsent._getCookie(TrackingConsent.COOKIE_STORAGE_KEY);
+
         if (cookie) {
             return JSON.parse(cookie);
         }
@@ -152,14 +158,19 @@ class TrackingConsent extends Vue {
         return {};
     }
 
-    public static get allowsUsageData() {
+    public static get allowsUsageData(): boolean {
         return TrackingConsent.consent.allowsUsageData;
     }
 
-    public static get allowsBrowserData() {
+    public static get allowsBrowserData(): boolean {
         return TrackingConsent.consent.allowsBrowserData;
     }
 
+    /**
+     * trackEvent - allow you to track custom interaction on the website/webapp.
+     *
+     * Docs: https://matomo.org/docs/event-tracking/
+     */
     public static trackEvent(
         category: string,
         action: string,
@@ -208,17 +219,20 @@ class TrackingConsent extends Vue {
         return match && match[2];
     }
 
+    /** denyConsent - deny sharing usage & browser data and opt out of matomo tracking */
     public denyConsent() {
         TrackingConsent._paq.push(['optUserOut']);
         this._setConsent({ allowsUsageData: false, allowsBrowserData: false });
     }
 
+    /** allowUsageData - allow sharing usage & browser data */
     public allowUsageData() {
         TrackingConsent._paq.push(['forgetUserOptOut']);
         this._setConsent({ allowsUsageData: true, allowsBrowserData: true });
         this._initMatomo();
     }
 
+    /** allowBrowserData - allow sharing browser data, but not usage data */
     public allowBrowserData() {
         TrackingConsent._paq.push(['forgetUserOptOut']);
         this._setConsent({ allowsBrowserData: true, allowsUsageData: false });

From ad9ea69e2e2fa1e29e895b9dc2f10fbfc48c4f7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Wed, 22 Jul 2020 14:00:48 +0200
Subject: [PATCH 11/17] TrackingConsent: add execFunction method

---
 src/components/TrackingConsent.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index fdd6b0b4..7b349345 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -191,6 +191,16 @@ class TrackingConsent extends Vue {
         TrackingConsent._paq.push(obj);
     }
 
+    /**
+     * execFunction - allow you to execute a function in matomo's scope, where `this` is Matomo's tracker object
+     *
+     * Docs: https://developer.matomo.org/guides/tracking-javascript-guide
+     * API ref: https://developer.matomo.org/guides/tracking-javascript
+     */
+    public static execFunction(fn: () => void) {
+        TrackingConsent._paq.push([fn]);
+    }
+
     private static _setCookie(
         cookieName: string,
         cookieValue: string,

From 0679b74ab14cdcc9ae4412c5fe2eedb7971b5d67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Wed, 22 Jul 2020 14:02:37 +0200
Subject: [PATCH 12/17] =?UTF-8?q?TrackingConsent:=20add=20api=20reference?=
 =?UTF-8?q?=20link=20for=20options=20/=20now=20supporting=20null=20and=20s?=
 =?UTF-8?q?tring[]=20as=20options=20value=E2=80=99s=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrackingConsent.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index 7b349345..e4ef916d 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -75,6 +75,7 @@ class TrackingConsent extends Vue {
     })
     public theme: string;
 
+    /** API reference: https://developer.matomo.org/guides/tracking-javascript#configuration-of-the-tracker-object */
     @Prop({
         type: Object,
         default: () => ({
@@ -85,10 +86,7 @@ class TrackingConsent extends Vue {
     public options: {
         setSiteId: number,
         setTrackerUrl?: string
-        addDownloadExtensions?: string,
-        trackPageView?: boolean,
-        enableLinkTracking?: boolean,
-        [k: string]: number | string | boolean,
+        [k: string]: null | boolean | number | string | string[],
     };
 
     @Prop({
@@ -370,9 +368,7 @@ class TrackingConsent extends Vue {
         Object.keys(this.options).forEach((k) => {
             const option = this.options[k];
 
-            if (option) {
-                TrackingConsent._paq.push(typeof option === 'boolean' ? [k] : [k, option]);
-            }
+            TrackingConsent._paq.push(option === null ? [k] : [k, option]);
         });
 
         /* append script */

From ff10c36ee566ae87ae646f8d8558a95540cffb9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Wed, 22 Jul 2020 15:37:56 +0200
Subject: [PATCH 13/17] TrackingConsent: some code cleaning

---
 src/components/TrackingConsent.vue | 35 ++++++++++++++++--------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index e4ef916d..a4e9fb49 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -110,8 +110,8 @@ class TrackingConsent extends Vue {
     @Prop({
         type: Object,
         default: () => ({
-            domain: document.location.hostname,
-            expirationDays: 365 * 20,
+            domain: TrackingConsent.DEFAULT_COOKIE_DOMAIN,
+            expirationDays: TrackingConsent.DEFAULT_COOKIE_EXPIRATION_DAYS,
         }),
         validator: ({ expirationDays }) => expirationDays >= 0,
     })
@@ -167,6 +167,8 @@ class TrackingConsent extends Vue {
     /**
      * trackEvent - allow you to track custom interaction on the website/webapp.
      *
+     * This method won't do anything if the user denied to share usage data.
+     *
      * Docs: https://matomo.org/docs/event-tracking/
      */
     public static trackEvent(
@@ -203,19 +205,18 @@ class TrackingConsent extends Vue {
         cookieName: string,
         cookieValue: string,
         options: {
-            expirationDays: number,
             domain: string,
+            expirationDays: number,
         },
     ) {
         const cookie = [cookieName + '=' + cookieValue];
 
         if (options) {
-            if (options.expirationDays) {
-                cookie.push('max-age=' + options.expirationDays * 24 * 60 * 60);
-            }
-            if (options.domain) {
-                cookie.push('domain=' + options.domain);
-            }
+            if (!options.domain) options.domain = TrackingConsent.DEFAULT_COOKIE_DOMAIN;
+            if (!options.expirationDays) options.expirationDays = TrackingConsent.DEFAULT_COOKIE_EXPIRATION_DAYS;
+
+            cookie.push('domain=' + options.domain);
+            cookie.push('max-age=' + options.expirationDays * 24 * 60 * 60);
         }
 
         cookie.push('path=/');
@@ -261,12 +262,12 @@ class TrackingConsent extends Vue {
 
         /* Check old consent preferences if there's any */
         const localStoredConsent =
-            localStorage.getItem(TrackingConsent.localstorageKeys[0]) ||
-            localStorage.getItem(TrackingConsent.localstorageKeys[1]);
+            localStorage.getItem(TrackingConsent.LOCALSTORAGE_KEYS[0]) ||
+            localStorage.getItem(TrackingConsent.LOCALSTORAGE_KEYS[1]);
 
         if (localStoredConsent) {
-            localStorage.removeItem(TrackingConsent.localstorageKeys[0]);
-            localStorage.removeItem(TrackingConsent.localstorageKeys[1]);
+            localStorage.removeItem(TrackingConsent.LOCALSTORAGE_KEYS[0]);
+            localStorage.removeItem(TrackingConsent.LOCALSTORAGE_KEYS[1]);
 
             this._setConsent(JSON.parse(localStoredConsent));
         }
@@ -388,14 +389,16 @@ namespace TrackingConsent { // tslint:disable-line:no-namespace
         DARK = 'dark',
     }
 
-    export const localstorageKeys = [
+    export const LOCALSTORAGE_KEYS = [
         'tracking-consent',
         'tracking-consensus',
     ];
-
     export const COOKIE_STORAGE_KEY = 'tracking-consent';
-    export const DEFAULT_MATOMO_URL = '//stats.nimiq-network.com/';
 
+    export const DEFAULT_COOKIE_DOMAIN = document.location.hostname;
+    export const DEFAULT_COOKIE_EXPIRATION_DAYS = 365 * 20;
+
+    export const DEFAULT_MATOMO_URL = '//stats.nimiq-network.com/';
     export const DEFAULT_TRACKER_URL = DEFAULT_MATOMO_URL + 'matomo.php';
     export const DEFAULT_TRACKING_URL = DEFAULT_MATOMO_URL + 'matomo.js';
 }

From 05cefe2415094b7aad0d55073ca93cc9d0fd7ae3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Tue, 28 Jul 2020 20:58:35 +0200
Subject: [PATCH 14/17] TrackingConsent: Requested Changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PR #56
Requested changes by Sisou
https://github.com/nimiq/vue-components/pull/56#pullrequestreview-455568171

- `options.setSiteId` doesn’t have a default value anymore, and is now required
- Renamed `DEFAULT_TRACKING_URL` to `DEFAULT_TRACKING_SCRIPT_URL`
- Moved the default `geoIpServer` value to a constant named `DEFAULT_GEOIP_SERVER_URL`
- Added possibility to set the cookie's attributes `secure` and `sameSite`
- Added a comment explaining the two `localStorage` keys
- Changed default lifetime of the cookie from 20 years to 10 years since 20 years would not work on 32bits systems. (the cookie would just disappear instantly)
---
 src/components/TrackingConsent.vue | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index a4e9fb49..3aaaebbc 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -78,8 +78,9 @@ class TrackingConsent extends Vue {
     /** API reference: https://developer.matomo.org/guides/tracking-javascript#configuration-of-the-tracker-object */
     @Prop({
         type: Object,
+        required: true,
+        validator: (options) => 'setSiteId' in options,
         default: () => ({
-            setSiteId: 1,
             setTrackerUrl: TrackingConsent.DEFAULT_TRACKER_URL,
         }),
     })
@@ -91,7 +92,7 @@ class TrackingConsent extends Vue {
 
     @Prop({
         type: String,
-        default: () => TrackingConsent.DEFAULT_TRACKING_URL,
+        default: () => TrackingConsent.DEFAULT_TRACKING_SCRIPT_URL,
     })
     public trackingScriptUrl: string;
 
@@ -118,11 +119,13 @@ class TrackingConsent extends Vue {
     public cookieOptions: {
         domain: string,
         expirationDays: number,
+        secure?: boolean,
+        sameSite?: 'lax'|'strict'|'none',
     };
 
     @Prop({
         type: String,
-        default: 'https://geoip.nimiq-network.com:8443/v1/locate',
+        default: TrackingConsent.DEFAULT_GEOIP_SERVER_URL,
     })
     public geoIpServer: string;
 
@@ -207,6 +210,8 @@ class TrackingConsent extends Vue {
         options: {
             domain: string,
             expirationDays: number,
+            secure?: boolean,
+            sameSite?: 'lax'|'strict'|'none',
         },
     ) {
         const cookie = [cookieName + '=' + cookieValue];
@@ -217,6 +222,8 @@ class TrackingConsent extends Vue {
 
             cookie.push('domain=' + options.domain);
             cookie.push('max-age=' + options.expirationDays * 24 * 60 * 60);
+            if (options.secure) cookie.push('Secure');
+            if (options.sameSite) cookie.push('SameSite=' + options.sameSite);
         }
 
         cookie.push('path=/');
@@ -389,6 +396,11 @@ namespace TrackingConsent { // tslint:disable-line:no-namespace
         DARK = 'dark',
     }
 
+    /**
+     * Old matomo tracking implementations were using localStorage instead of cookies to store consent.
+     * But unfortunately, some implementations were using the first key, and some the second one.
+     * So we're checking both keys for existing consent for the sake of backward compatibility.
+     */
     export const LOCALSTORAGE_KEYS = [
         'tracking-consent',
         'tracking-consensus',
@@ -396,11 +408,13 @@ namespace TrackingConsent { // tslint:disable-line:no-namespace
     export const COOKIE_STORAGE_KEY = 'tracking-consent';
 
     export const DEFAULT_COOKIE_DOMAIN = document.location.hostname;
-    export const DEFAULT_COOKIE_EXPIRATION_DAYS = 365 * 20;
+    export const DEFAULT_COOKIE_EXPIRATION_DAYS = 365 * 10;
 
     export const DEFAULT_MATOMO_URL = '//stats.nimiq-network.com/';
     export const DEFAULT_TRACKER_URL = DEFAULT_MATOMO_URL + 'matomo.php';
-    export const DEFAULT_TRACKING_URL = DEFAULT_MATOMO_URL + 'matomo.js';
+    export const DEFAULT_TRACKING_SCRIPT_URL = DEFAULT_MATOMO_URL + 'matomo.js';
+
+    export const DEFAULT_GEOIP_SERVER_URL = 'https://geoip.nimiq-network.com:8443/v1/locate';
 }
 
 export default TrackingConsent;

From 1980f33355708e399a47530438e5d34556275c55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Sat, 1 Aug 2020 16:45:33 +0200
Subject: [PATCH 15/17] TrackingConsent: Multiple changes & fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- now loading Matomo tracking script before checking for UI requirement, but disable cookie usage before user give consent (if in EEA)
- removed `allowBrowserData` since we’re tracking browser data by default, without asking for consent
- fixed `geoIpServer` @Prop default value
- now checking if `_paq` & `_mtm` are objects that have a `push` method, instead of checking if they’re Arrays (since they’re not Arrays, but objects with a single `push` method)
- removed the public static getter `allowsBrowserData` and the public static method `allowBrowserData `
- added a static public getter `isOutsideEEA`, since we can enable Cookies without consent for countries outside the EEA
- turned the `execFunction` method into a async one, allowing to `await` for the function result
---
 src/components/TrackingConsent.vue | 68 ++++++++++++++++--------------
 src/stories/index.stories.js       | 14 +++++-
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index 3aaaebbc..4ce690a1 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -15,11 +15,6 @@
                     @click="denyConsent"
                     :class="{ inverse: theme === constructor.Themes.DARK }"
                 >{{ text.no }}</button>
-                <button
-                    class="nq-button-s"
-                    @click="allowBrowserData"
-                    :class="{ inverse: theme === constructor.Themes.DARK }"
-                >{{ text.browserOnly }}</button>
             </div>
         </div>
     </div>
@@ -30,7 +25,6 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import I18nMixin from '../i18n/I18nMixin';
 
 interface Consent {
-    allowsBrowserData?: boolean;
     allowsUsageData?: boolean;
 }
 /**
@@ -125,21 +119,22 @@ class TrackingConsent extends Vue {
 
     @Prop({
         type: String,
-        default: TrackingConsent.DEFAULT_GEOIP_SERVER_URL,
+        default: () => TrackingConsent.DEFAULT_GEOIP_SERVER_URL,
     })
     public geoIpServer: string;
 
     private uiRequired: boolean = false;
+    private isOutsideEEA: boolean = false;
 
     public static get _paq() {
-        if (!window._paq || !Array.isArray(window._paq)) {
+        if (!window._paq || !('push' in window._paq)) {
             window._paq = [];
         }
         return window._paq;
     }
 
     public static get _mtm() {
-        if (!window._mtm || !Array.isArray(window._mtm)) {
+        if (!window._mtm || !('push' in window._mtm)) {
             window._mtm = [];
         }
         return window._mtm;
@@ -147,7 +142,7 @@ class TrackingConsent extends Vue {
 
     /**
      * consent getter - return the parsed content of the consent cookie that store the user's choice about data sharing
-     * @return {Consent} An object containing two boolean properties: allowsBrowserData & allowsUsageData
+     * @return {Consent} An object containing one boolean property: allowsUsageData
      */
     public static get consent(): Consent {
         const cookie = TrackingConsent._getCookie(TrackingConsent.COOKIE_STORAGE_KEY);
@@ -163,8 +158,8 @@ class TrackingConsent extends Vue {
         return TrackingConsent.consent.allowsUsageData;
     }
 
-    public static get allowsBrowserData(): boolean {
-        return TrackingConsent.consent.allowsBrowserData;
+    public static get isOutsideEEA(): boolean {
+        return Array.from(TrackingConsent._instances).every((instance) => instance.isOutsideEEA);
     }
 
     /**
@@ -180,7 +175,7 @@ class TrackingConsent extends Vue {
         name?: string,
         value?: string | number,
     ) {
-        if (!TrackingConsent.allowsUsageData) return;
+        if (!TrackingConsent.allowsUsageData || !TrackingConsent.isOutsideEEA) return;
 
         const obj: Array<string | number> = ['trackEvent', category, action];
 
@@ -200,8 +195,17 @@ class TrackingConsent extends Vue {
      * Docs: https://developer.matomo.org/guides/tracking-javascript-guide
      * API ref: https://developer.matomo.org/guides/tracking-javascript
      */
-    public static execFunction(fn: () => void) {
-        TrackingConsent._paq.push([fn]);
+    public static async execFunction(fn: (self: any) => any) {
+        return new Promise((resolve, reject) => {
+            TrackingConsent._paq.push([function() {
+                try {
+                    const ret = fn(this);
+                    resolve(ret);
+                } catch (e) {
+                    reject(e);
+                }
+            }]);
+        });
     }
 
     private static _setCookie(
@@ -238,21 +242,15 @@ class TrackingConsent extends Vue {
     /** denyConsent - deny sharing usage & browser data and opt out of matomo tracking */
     public denyConsent() {
         TrackingConsent._paq.push(['optUserOut']);
-        this._setConsent({ allowsUsageData: false, allowsBrowserData: false });
+        TrackingConsent._paq.push(['forgetCookieConsentGiven']);
+        this._setConsent({ allowsUsageData: false });
     }
 
     /** allowUsageData - allow sharing usage & browser data */
     public allowUsageData() {
         TrackingConsent._paq.push(['forgetUserOptOut']);
-        this._setConsent({ allowsUsageData: true, allowsBrowserData: true });
-        this._initMatomo();
-    }
-
-    /** allowBrowserData - allow sharing browser data, but not usage data */
-    public allowBrowserData() {
-        TrackingConsent._paq.push(['forgetUserOptOut']);
-        this._setConsent({ allowsBrowserData: true, allowsUsageData: false });
-        this._initMatomo();
+        TrackingConsent._paq.push(['setCookieConsentGiven']);
+        this._setConsent({ allowsUsageData: true });
     }
 
     private created() {
@@ -279,6 +277,9 @@ class TrackingConsent extends Vue {
             this._setConsent(JSON.parse(localStoredConsent));
         }
 
+        /* Initialise matomo */
+        this._initMatomo();
+
         /* check if the UI is required */
         this._checkUiRequired();
     }
@@ -299,14 +300,11 @@ class TrackingConsent extends Vue {
         }
 
         /* Check consent preferences if there's any */
-        if (TrackingConsent.allowsBrowserData || TrackingConsent.allowsUsageData) {
+        if (TrackingConsent.allowsUsageData) {
             this.uiRequired = false;
-            this._initMatomo();
+            TrackingConsent._paq.push(['setCookieConsentGiven']);
             return;
-        } else if (
-            TrackingConsent.allowsBrowserData === false &&
-            TrackingConsent.allowsUsageData === false
-        ) {
+        } else if (TrackingConsent.allowsUsageData === false) {
             this.uiRequired = false;
             return;
         }
@@ -320,7 +318,8 @@ class TrackingConsent extends Vue {
         const geoIpInfo = await geoIpResponse.json();
         if (geoIpInfo.continent !== 'EU' && !['NO', 'LI', 'IS'].includes(geoIpInfo.country)) { /* EU / EEA */
             this.uiRequired = false;
-            this._initMatomo();
+            this.isOutsideEEA = true;
+            TrackingConsent._paq.push(['setCookieConsentGiven']);
             return;
         }
 
@@ -348,6 +347,11 @@ class TrackingConsent extends Vue {
     }
 
     private _initMatomo() {
+        /* Prevent matomo to set a cookie before user gave consent */
+        if (TrackingConsent.allowsUsageData !== true) {
+            TrackingConsent._paq.push(['requireCookieConsent']);
+        }
+
         /* Check whether matomo is already initialized */
         if (document.querySelector('script[matomo]')) {
             console.warn('TrackingConsent: Matomo already initialized.');
diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js
index fcb1c67d..6e9a97ec 100644
--- a/src/stories/index.stories.js
+++ b/src/stories/index.stories.js
@@ -832,7 +832,8 @@ storiesOf('Components', module)
             components: { TrackingConsent },
             data: () => ({
                 theme: 'dark',
-                uiallowed: true
+                uiallowed: true,
+                setSiteId: 68,
             }),
             template: windowTemplate(`
                 <label>
@@ -852,7 +853,16 @@ storiesOf('Components', module)
                     Ui Not Allowed
                     <input type="radio" v-model="uiallowed" :value="false"/>
                 </label>
-                <TrackingConsent :theme="theme" :uiAllowed="uiallowed"/>
+                <br />
+                <label>
+                    Matomo Site ID (required, 68 is demo)
+                    <input type="number" v-model="setSiteId" />
+                </label>
+                <TrackingConsent
+                    :theme="theme"
+                    :uiAllowed="uiallowed"
+                    :options="{ setSiteId, trackPageView: null }"
+                />
             `)
         };
     })

From 05af0f1770071b3671a70c7636b36a5b73a9c3db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Sat, 1 Aug 2020 17:58:36 +0200
Subject: [PATCH 16/17] TrackingConsent: trackPageView changes

- add a `trackPageView` public static method for easy page tracking on single-page apps
- set trackPageView by default to track first page view
---
 src/components/TrackingConsent.vue | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index 4ce690a1..f7c0ef58 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -76,6 +76,7 @@ class TrackingConsent extends Vue {
         validator: (options) => 'setSiteId' in options,
         default: () => ({
             setTrackerUrl: TrackingConsent.DEFAULT_TRACKER_URL,
+            trackPageView: null,
         }),
     })
     public options: {
@@ -208,6 +209,24 @@ class TrackingConsent extends Vue {
         });
     }
 
+    /**
+     * trackPageView - allow you to track a new page view. Usefull for single-page apps that use history manipulation
+     *
+     * @param {number} generationTimeMs - Time that took the new route to load. Usefull if lazy-loading routes
+     */
+    public static trackPageView(
+        options?: {
+            generationTimeMs?: number,
+            customUrl?: string,
+        },
+    ) {
+        if (options.customUrl) TrackingConsent._paq.push(['setCustomUrl', options.customUrl]);
+
+        TrackingConsent._paq.push(['deleteCustomVariables', 'page']);
+        TrackingConsent._paq.push(['setGenerationTimeMs', options.generationTimeMs || 0]);
+        TrackingConsent._paq.push(['trackPageView']);
+    }
+
     private static _setCookie(
         cookieName: string,
         cookieValue: string,
@@ -372,9 +391,10 @@ class TrackingConsent extends Vue {
         }
 
         /* set setTrackerUrl to default value if not set */
-        if (!this.options.setTrackerUrl) {
-            this.options.setTrackerUrl = TrackingConsent.DEFAULT_TRACKER_URL;
-        }
+        if (!this.options.setTrackerUrl) this.options.setTrackerUrl = TrackingConsent.DEFAULT_TRACKER_URL;
+
+        /* set trackPageView if not set, to track the first page view */
+        if (!this.options.trackPageView) this.options.trackPageView = null;
 
         /* Cycle through options and set them */
         Object.keys(this.options).forEach((k) => {

From f841c329fb29d76055b7be4bb5cf7ea8888e1405 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Sat, 1 Aug 2020 22:56:25 +0200
Subject: [PATCH 17/17] TrackingConsent: if `geoIpServer` is set to `null`, the
 geoIp detection is disabled

---
 src/components/TrackingConsent.vue | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/TrackingConsent.vue b/src/components/TrackingConsent.vue
index f7c0ef58..47f69f68 100644
--- a/src/components/TrackingConsent.vue
+++ b/src/components/TrackingConsent.vue
@@ -122,7 +122,7 @@ class TrackingConsent extends Vue {
         type: String,
         default: () => TrackingConsent.DEFAULT_GEOIP_SERVER_URL,
     })
-    public geoIpServer: string;
+    public geoIpServer: string | null;
 
     private uiRequired: boolean = false;
     private isOutsideEEA: boolean = false;
@@ -328,18 +328,20 @@ class TrackingConsent extends Vue {
             return;
         }
 
-        /* Automatically track stats if user is not in the EU continent  */
-        const geoIpResponse = await fetch(this.geoIpServer);
-        if (geoIpResponse.status !== 200) {
-            console.warn('TrackingConsent: Failed to contact geoip server');
-            return;
-        }
-        const geoIpInfo = await geoIpResponse.json();
-        if (geoIpInfo.continent !== 'EU' && !['NO', 'LI', 'IS'].includes(geoIpInfo.country)) { /* EU / EEA */
-            this.uiRequired = false;
-            this.isOutsideEEA = true;
-            TrackingConsent._paq.push(['setCookieConsentGiven']);
-            return;
+        if (this.geoIpServer) {
+            /* Automatically track stats if user is not in the EU continent  */
+            const geoIpResponse = await fetch(this.geoIpServer);
+            if (geoIpResponse.status !== 200) {
+                console.warn('TrackingConsent: Failed to contact geoip server');
+                return;
+            }
+            const geoIpInfo = await geoIpResponse.json();
+            if (geoIpInfo.continent !== 'EU' && !['NO', 'LI', 'IS'].includes(geoIpInfo.country)) { /* EU / EEA */
+                this.uiRequired = false;
+                this.isOutsideEEA = true;
+                TrackingConsent._paq.push(['setCookieConsentGiven']);
+                return;
+            }
         }
 
         this.uiRequired = true;