Feature/setup matomo analytics

idkbse/nuxt.config.js

@@ -1,5 +1,7 @@
 const { gitDescribeSync } = require('git-describe');
 
+import { hostPath } from './src/plugins/env';
+
 process.env.APP_VERSION = require('./package.json').version;
 process.env.GIT_DESCRIBE = JSON.stringify(gitDescribeSync({
   longSemver: true,
@@ -8,32 +10,44 @@ process.env.GIT_DESCRIBE = JSON.stringify(gitDescribeSync({
   match: '*',
 }));
 
+const publicRuntimeConfig = {
+  siteName: 'id.kb.se',
+  environment: process.env.ENV || 'local',
+  defaultSite: process.env.DEFAULT_SITE || 'id.kb.se',
+  siteAlias: JSON.parse(process.env.XL_SITE_ALIAS || '{}'),
+  siteConfig: JSON.parse(process.env.XL_SITE_CONFIG || '{}'),
+  vocab: process.env.XL_VOCAB || 'https://id.kb.se/vocab/data.jsonld',
+  context: process.env.XL_CONTEXT || 'https://id.kb.se/context.jsonld',
+  display: process.env.XL_DISPLAY || 'https://id.kb.se/vocab/display/data.jsonld'
+};
+
+const defaultHostPath = hostPath(publicRuntimeConfig.defaultSite, publicRuntimeConfig.siteAlias, publicRuntimeConfig.siteConfig);
+
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
-  head() {
-    return {
-      title: 'id.kb.se',
-      htmlAttrs: {
-        lang: 'sv'
-      },
-      meta: [
-        { charset: 'utf-8' },
-        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-        { hid: 'description', name: 'description', content: 'Grundstenar för länkade data hos Kungliga biblioteket.' },
-        { hid:'og:title', property:'og:title', content:'id.kb.se' },
-        { hid:'og:site_name', property:'og:site_name', content:'id.kb.se' },
-        { hid:'og:description', property:'og:description', content:'Grundstenar för länkade data hos Kungliga biblioteket.' },
-        { hid:'og:image', property:'og:image', content:`${this.$defaultHostPath()}/opengraph_id.png` },
-        { hid:'og:image:width', property:'og:image:width', content:'1200' },
-        { hid:'og:image:height', property:'og:image:height', content:'600' },
-        { hid:'twitter:image', property:'twitter:image', content:`${this.$defaultHostPath()}/opengraph_id.png` },
-        { hid:'twitter:card', name:'twitter:card', content:'summary_large_image' },
-      ],
-      link: [
-        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
-        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
-      ]
-    }
+  head: {
+    title: 'id.kb.se',
+    htmlAttrs: {
+      lang: 'sv'
+    },
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: 'Grundstenar för länkade data hos Kungliga biblioteket.' },
+      { hid:'og:title', property:'og:title', content:'id.kb.se' },
+      { hid:'og:site_name', property:'og:site_name', content:'id.kb.se' },
+      { hid:'og:description', property:'og:description', content:'Grundstenar för länkade data hos Kungliga biblioteket.' },
+      { hid:'og:image', property:'og:image', content: defaultHostPath + '/opengraph_id.png' },
+      { hid:'og:image:width', property:'og:image:width', content:'1200' },
+      { hid:'og:image:height', property:'og:image:height', content:'600' },
+      { hid:'twitter:image', property:'twitter:image', content: defaultHostPath + '/opengraph_id.png' },
+      { hid:'twitter:card', name:'twitter:card', content:'summary_large_image' },
+    ],
+    link: [
+      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ],
+    script: []
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
@@ -46,6 +60,7 @@ export default {
     '~plugins/filters.js',
     '~mixins/lxl.js',
     '~plugins/envInjects.js',
+    { src: '~/plugins/cookieConsent.js', mode: 'client' }
   ],
 
   router: {
@@ -74,6 +89,12 @@ export default {
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
+      ['nuxt-matomo', {
+      matomoUrl: process.env.PUBLIC_MATOMO_URL,
+      siteId: process.env.PUBLIC_MATOMO_ID,
+      debug: process.env.NODE_ENV === 'development' ? true : false ,
+      consentRequired: true
+    }],
     '@nuxtjs/style-resources',
     '@nuxt/http',
     '~/modules/vocab-cache'
@@ -93,16 +114,7 @@ export default {
     ],
   },
 
-  publicRuntimeConfig: {
-    siteName: 'id.kb.se',
-    environment: process.env.ENV || 'local',
-    defaultSite: process.env.DEFAULT_SITE || 'id.kb.se',
-    siteAlias: JSON.parse(process.env.XL_SITE_ALIAS || '{}'),
-    siteConfig: JSON.parse(process.env.XL_SITE_CONFIG || '{}'),
-    vocab: process.env.XL_VOCAB || 'https://id.kb.se/vocab/data.jsonld',
-    context: process.env.XL_CONTEXT || 'https://id.kb.se/context.jsonld',
-    display: process.env.XL_DISPLAY || 'https://id.kb.se/vocab/display/data.jsonld'
-  },
+  publicRuntimeConfig,
 
   privateRuntimeConfig: {
   },
@@ -121,4 +133,4 @@ export default {
     }
   },
   srcDir: 'src/'
-}
+}

idkbse/package.json

@@ -12,6 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@kungbib/cookie-consent": "^0.9.1",
     "@nuxt/http": "^0.6.4",
     "@nuxtjs/style-resources": "^1.2.1",
     "bootstrap": "https://github.com/twbs/bootstrap/archive/v5.2.3.tar.gz",
@@ -23,6 +24,7 @@
     "lodash-es": "^4.17.21",
     "lxljs": "file:../lxljs",
     "nuxt": "^2.17.1",
+    "nuxt-matomo": "^1.2.4",
     "sass": "^1.35.1",
     "sass-loader": "^10"
   },

idkbse/src/components/Footer.vue

@@ -12,6 +12,7 @@
           <h4>{{ translateUi('Information') }}</h4>
           <ul class="bd-footer-links ps-0 mb-3 text-light">
             <li class="d-block"><a class="text-light" href="https://www.kb.se/digital-tillganglighet">{{ translateUi('Accessibility statement') }}</a></li>
+            <li class="d-block"><a class="text-light" data-cc="show-preferencesModal" href="#" aria-haspopup="dialog">{{ translateUi('Manage cookies') }}</a></li>
           </ul>
         </div>
         <div class="col-md-5 d-flex flex-column">

idkbse/src/plugins/cookieConsent.js

@@ -0,0 +1,90 @@
+import KbCookieConsent from '@kungbib/cookie-consent'
+
+const cookieConsentConfig = {
+  categories: {
+    necessary: {
+      readOnly: true,
+      enabled: true
+    },
+    analytics: {
+      autoClear: {
+        cookies: [
+          { name: /^_pk.*/ } // Matomo cookies
+        ]
+      }
+    }
+  },
+  language: {
+    translations: {
+      sv: {
+        consentModal: {
+          title: 'Om användning av kakor',
+          description:
+            'Den här tjänsten använder kakor (cookies). Du kan välja vilka kakor som får användas.',
+          acceptAllBtn: 'Tillåt alla',
+          acceptNecessaryBtn: 'Tillåt endast nödvändiga',
+          showPreferencesBtn: 'Inställningar'
+        },
+        preferencesModal: {
+          title: 'Inställningar för kakor',
+          acceptAllBtn: 'Tillåt alla',
+          acceptNecessaryBtn: 'Tillåt endast nödvändiga',
+          savePreferencesBtn: 'Spara och godkänn',
+          sections: [
+            {
+              title: 'Om användning av kakor',
+              description:
+                'Kakor används för att tjänsten ska fungera och för att förbättra upplevelsen.'
+            },
+            {
+              title: 'Nödvändiga kakor',
+              description:
+                'Dessa krävs för att tjänsten ska vara säker och fungera som den ska.',
+              linkedCategory: 'necessary'
+            },
+            {
+              title: 'Analytiska kakor',
+              description:
+                'Ger oss information om hur webbplatsen används så att vi kan förbättra den.',
+              linkedCategory: 'analytics'
+            },
+            {
+              title: 'Mer information',
+              description:
+                'Du kan alltid ändra dina val genom att klicka på “Hantera cookies” längst ner på sidan.'
+            }
+          ]
+        }
+      }
+    }
+  }
+}
+
+export default (context, inject) => {
+  if (process.client) {
+    // Initialize _paq queue before Matomo loads
+    window._paq = window._paq || []
+
+    // Store consent callbacks to use Matomo's setConsent method when available
+    const matomoCallbacks = {
+      onConsent: ({ cookie }) => {
+        if (window.$nuxt && window.$nuxt.$matomo) {
+          const hasAnalytics = cookie.categories.includes('analytics')
+          window.$nuxt.$matomo.setConsent(hasAnalytics)
+        }
+      },
+      onChange: ({ cookie }) => {
+        if (window.$nuxt && window.$nuxt.$matomo) {
+          const hasAnalytics = cookie.categories.includes('analytics')
+          window.$nuxt.$matomo.setConsent(hasAnalytics)
+        }
+      }
+    }
+
+    // Merge callbacks into the config
+    cookieConsentConfig.onConsent = matomoCallbacks.onConsent
+    cookieConsentConfig.onChange = matomoCallbacks.onChange
+
+    KbCookieConsent.run(cookieConsentConfig)
+  }
+}