Motomo Analytics (#42)

frequency-chain · Feb 29, 2024 · 2a07d26 · 2a07d26
1 parent 0dc4111
commit 2a07d26
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 0 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -9,6 +9,8 @@ node_modules
 
 /*.js
 
+static/*.js
+
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml
 package-lock.json

diff --git a/.prettierignore b/.prettierignore
@@ -2,3 +2,5 @@
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+static/*.js
diff --git a/src/app.html b/src/app.html
@@ -9,6 +9,31 @@
     <link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
+
+    <!-- Klaro - make sure the config gets loaded before Klaro -->
+    <script defer type="text/javascript" src="klaro-config.js"></script>
+    <script defer type="text/javascript" src="klaro.js"></script>
+    <!-- Matomo -->
+    <script>
+      var _paq = (window._paq = window._paq || []);
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(['requireCookieConsent']);
+      _paq.push(['requireConsent']);
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function () {
+        var u = 'https://dsnp.matomo.cloud/';
+        _paq.push(['setTrackerUrl', u + 'matomo.php']);
+        _paq.push(['setSiteId', '2']);
+        var d = document,
+          g = d.createElement('script'),
+          s = d.getElementsByTagName('script')[0];
+        g.async = true;
+        g.src = 'https://cdn.matomo.cloud/dsnp.matomo.cloud/matomo.js';
+        s.parentNode.insertBefore(g, s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
   </head>
 
   <body data-sveltekit-preload-data="hover">

diff --git a/static/klaro-config.js b/static/klaro-config.js
@@ -0,0 +1,141 @@
+// By default, Klaro will load the config from  a global "klaroConfig" variable.
+// You can change this by specifying the "data-config" attribute on your
+// script take, e.g. like this:
+// <script src="klaro.js" data-config="myConfigVariableName" />
+// You can also disable auto-loading of the consent notice by adding
+// data-no-auto-load=true to the script tag.
+var klaroConfig = {
+  // You can customize the ID of the DIV element that Klaro will create
+  // when starting up. If undefined, Klaro will use 'klaro'.
+  elementID: 'klaro',
+
+  // How Klaro should store the user's preferences. It can be either 'cookies'
+  // or 'localStorage'. If undefined, Klaro will use cookies.
+  klaroStorage: 'localStorage',
+
+  // You can customize the name of the cookie that Klaro uses for storing
+  // user consent decisions. If undefined, Klaro will use 'klaro'.
+  cookieName: 'frequencyCookieConsent',
+
+  // You can also set a custom expiration time for the Klaro cookie.
+  // By default, it will expire after 120 days.
+  cookieExpiresAfterDays: 120,
+
+  // You can customize the name of the cookie that Klaro will use to
+  // store user consent. If undefined, Klaro will use 'klaro'.
+
+  // Put a link to your privacy policy here (relative or absolute).
+  privacyPolicy: 'https://www.frequency.xyz/privacy.html',
+
+  // Defines the default state for applications (true=enabled by default).
+  default: true,
+
+  // If "mustConsent" is set to true, Klaro will directly display the consent
+  // manager modal and not allow the user to close it before having actively
+  // consented or declines the use of third-party apps.
+  mustConsent: false,
+  hideDeclineAll: false,
+  hideLearnMore: false,
+  acceptAll: true,
+
+  // You can define the UI language directly here. If undefined, Klaro will
+  // use the value given in the global "lang" variable. If that does
+  // not exist, it will use the value given in the "lang" attribute of your
+  // HTML tag. If that also doesn't exist, it will use 'en'.
+  //lang: 'en',
+
+  // You can overwrite existing translations and add translations for your
+  // app descriptions and purposes. See `src/translations.yml` for a full
+  // list of translations that can be overwritten:
+  // https://github.com/DPKit/klaro/blob/master/src/translations.yml
+
+  // Example config that shows how to overwrite translations:
+  // https://github.com/DPKit/klaro/blob/master/src/configs/i18n.js
+  translations: {
+    // If you erase the "consentModal" translations, Klaro will use the
+    // defaults as defined in translations.yml
+    en: {
+      consentNotice: {
+        description: 'By browsing this website, you are allowing cookies from third-party services.',
+        learnMore: 'Learn more',
+      },
+      acceptAll: 'Accept All',
+      acceptSelected: 'Accept Selected',
+      privacyPolicy: {
+        name: '',
+        text: '',
+      },
+
+      matomo: {
+        description: 'Privacy focused site analytics with no cross site tracking',
+      },
+      purposes: {
+        analytics: 'analytics and improvement of our site',
+      },
+    },
+  },
+
+  // This is a list of third-party apps that Klaro will manage for you.
+  apps: [
+    {
+      // Each app should have a unique (and short) name.
+      name: 'matomo',
+
+      // If "default" is set to true, the app will be enabled by default
+      // Overwrites global "default" setting.
+      // We recommend leaving this to "false" for apps that collect
+      // personal information.
+      default: true,
+
+      // The title of you app as listed in the consent modal.
+      title: 'Matomo Analytics',
+
+      // The purpose(s) of this app. Will be listed on the consent notice.
+      // Do not forget to add translations for all purposes you list here.
+      purposes: ['analytics'],
+
+      // A list of regex expressions or strings giving the names of
+      // cookies set by this app. If the user withdraws consent for a
+      // given app, Klaro will then automatically delete all matching
+      // cookies.
+      cookies: [
+        // you can also explicitly provide a path and a domain for
+        // a given cookie. This is necessary if you have apps that
+        // set cookies for a path that is not "/" or a domain that
+        // is not the current domain. If you do not set these values
+        // properly, the cookie can't be deleted by Klaro
+        // (there is no way to access the path or domain of a cookie in JS)
+        [/^_pk_.*$/, '/', '.frequency.xyz'], //for the production version
+        ['^_pk_.*$/', '/', 'localhost'], //for the local version
+        'piwik_ignore',
+      ],
+      callback: function (consent, _service) {
+        console.log('here we are');
+        if (_paq !== 'undefined') {
+          if (consent == true) {
+            _paq.push(['setConsentGiven']);
+            _paq.push(['setCookieConsentGiven']);
+          } else {
+            _paq.push(['forgetConsentGiven']);
+            _paq.push(['forgetCookieConsentGiven']);
+          }
+        }
+      },
+
+      // If "required" is set to true, Klaro will not allow this app to
+      // be disabled by the user.
+      required: false,
+
+      // If "optOut" is set to true, Klaro will load this app even before
+      // the user gave explicit consent.
+      // We recommend always leaving this "false".
+      optOut: false,
+
+      // If "onlyOnce" is set to true, the app will only be executed
+      // once regardless how often the user toggles it on and off.
+      onlyOnce: true,
+    },
+
+    // The apps will appear in the modal in the same order as defined here.
+  ],
+};
diff --git a/static/klaro.js b/static/klaro.js