Skip to content

Commit 5d3ed59

Browse files
branchedelacjohanbissemattsson
branchedelac
and
johanbissemattsson
authored
feat(idkbse): setup matomo analytics (#1507)
* Add and configure Matomo module * Add and confiigure cookie consent plugin --------- Co-authored-by: Johan Bisse Mattsson <bisse.mattsson@kb.se>
1 parent c20af52 commit 5d3ed59

5 files changed

Lines changed: 1105 additions & 537 deletions

File tree

‎idkbse/nuxt.config.js‎

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
const { gitDescribeSync } = require('git-describe');
22

3+
import { hostPath } from './src/plugins/env';
4+
35
process.env.APP_VERSION = require('./package.json').version;
46
process.env.GIT_DESCRIBE = JSON.stringify(gitDescribeSync({
57
longSemver: true,
@@ -8,32 +10,44 @@ process.env.GIT_DESCRIBE = JSON.stringify(gitDescribeSync({
810
match: '*',
911
}));
1012

13+
const publicRuntimeConfig = {
14+
siteName: 'id.kb.se',
15+
environment: process.env.ENV || 'local',
16+
defaultSite: process.env.DEFAULT_SITE || 'id.kb.se',
17+
siteAlias: JSON.parse(process.env.XL_SITE_ALIAS || '{}'),
18+
siteConfig: JSON.parse(process.env.XL_SITE_CONFIG || '{}'),
19+
vocab: process.env.XL_VOCAB || 'https://id.kb.se/vocab/data.jsonld',
20+
context: process.env.XL_CONTEXT || 'https://id.kb.se/context.jsonld',
21+
display: process.env.XL_DISPLAY || 'https://id.kb.se/vocab/display/data.jsonld'
22+
};
23+
24+
const defaultHostPath = hostPath(publicRuntimeConfig.defaultSite, publicRuntimeConfig.siteAlias, publicRuntimeConfig.siteConfig);
25+
1126
export default {
1227
// Global page headers: https://go.nuxtjs.dev/config-head
13-
head() {
14-
return {
15-
title: 'id.kb.se',
16-
htmlAttrs: {
17-
lang: 'sv'
18-
},
19-
meta: [
20-
{ charset: 'utf-8' },
21-
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
22-
{ hid: 'description', name: 'description', content: 'Grundstenar för länkade data hos Kungliga biblioteket.' },
23-
{ hid:'og:title', property:'og:title', content:'id.kb.se' },
24-
{ hid:'og:site_name', property:'og:site_name', content:'id.kb.se' },
25-
{ hid:'og:description', property:'og:description', content:'Grundstenar för länkade data hos Kungliga biblioteket.' },
26-
{ hid:'og:image', property:'og:image', content:`${this.$defaultHostPath()}/opengraph_id.png` },
27-
{ hid:'og:image:width', property:'og:image:width', content:'1200' },
28-
{ hid:'og:image:height', property:'og:image:height', content:'600' },
29-
{ hid:'twitter:image', property:'twitter:image', content:`${this.$defaultHostPath()}/opengraph_id.png` },
30-
{ hid:'twitter:card', name:'twitter:card', content:'summary_large_image' },
31-
],
32-
link: [
33-
{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
34-
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
35-
]
36-
}
28+
head: {
29+
title: 'id.kb.se',
30+
htmlAttrs: {
31+
lang: 'sv'
32+
},
33+
meta: [
34+
{ charset: 'utf-8' },
35+
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
36+
{ hid: 'description', name: 'description', content: 'Grundstenar för länkade data hos Kungliga biblioteket.' },
37+
{ hid:'og:title', property:'og:title', content:'id.kb.se' },
38+
{ hid:'og:site_name', property:'og:site_name', content:'id.kb.se' },
39+
{ hid:'og:description', property:'og:description', content:'Grundstenar för länkade data hos Kungliga biblioteket.' },
40+
{ hid:'og:image', property:'og:image', content: defaultHostPath + '/opengraph_id.png' },
41+
{ hid:'og:image:width', property:'og:image:width', content:'1200' },
42+
{ hid:'og:image:height', property:'og:image:height', content:'600' },
43+
{ hid:'twitter:image', property:'twitter:image', content: defaultHostPath + '/opengraph_id.png' },
44+
{ hid:'twitter:card', name:'twitter:card', content:'summary_large_image' },
45+
],
46+
link: [
47+
{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
48+
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
49+
],
50+
script: []
3751
},
3852

3953
// Global CSS: https://go.nuxtjs.dev/config-css
@@ -46,6 +60,7 @@ export default {
4660
'~plugins/filters.js',
4761
'~mixins/lxl.js',
4862
'~plugins/envInjects.js',
63+
{ src: '~/plugins/cookieConsent.js', mode: 'client' }
4964
],
5065

5166
router: {
@@ -74,6 +89,12 @@ export default {
7489

7590
// Modules: https://go.nuxtjs.dev/config-modules
7691
modules: [
92+
['nuxt-matomo', {
93+
matomoUrl: process.env.PUBLIC_MATOMO_URL,
94+
siteId: process.env.PUBLIC_MATOMO_ID,
95+
debug: process.env.NODE_ENV === 'development' ? true : false ,
96+
consentRequired: true
97+
}],
7798
'@nuxtjs/style-resources',
7899
'@nuxt/http',
79100
'~/modules/vocab-cache'
@@ -93,16 +114,7 @@ export default {
93114
],
94115
},
95116

96-
publicRuntimeConfig: {
97-
siteName: 'id.kb.se',
98-
environment: process.env.ENV || 'local',
99-
defaultSite: process.env.DEFAULT_SITE || 'id.kb.se',
100-
siteAlias: JSON.parse(process.env.XL_SITE_ALIAS || '{}'),
101-
siteConfig: JSON.parse(process.env.XL_SITE_CONFIG || '{}'),
102-
vocab: process.env.XL_VOCAB || 'https://id.kb.se/vocab/data.jsonld',
103-
context: process.env.XL_CONTEXT || 'https://id.kb.se/context.jsonld',
104-
display: process.env.XL_DISPLAY || 'https://id.kb.se/vocab/display/data.jsonld'
105-
},
117+
publicRuntimeConfig,
106118

107119
privateRuntimeConfig: {
108120
},
@@ -121,4 +133,4 @@ export default {
121133
}
122134
},
123135
srcDir: 'src/'
124-
}
136+
}

‎idkbse/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"test": "jest"
1313
},
1414
"dependencies": {
15+
"@kungbib/cookie-consent": "^0.9.1",
1516
"@nuxt/http": "^0.6.4",
1617
"@nuxtjs/style-resources": "^1.2.1",
1718
"bootstrap": "https://github.com/twbs/bootstrap/archive/v5.2.3.tar.gz",
@@ -23,6 +24,7 @@
2324
"lodash-es": "^4.17.21",
2425
"lxljs": "file:../lxljs",
2526
"nuxt": "^2.17.1",
27+
"nuxt-matomo": "^1.2.4",
2628
"sass": "^1.35.1",
2729
"sass-loader": "^10"
2830
},

‎idkbse/src/components/Footer.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<h4>{{ translateUi('Information') }}</h4>
1313
<ul class="bd-footer-links ps-0 mb-3 text-light">
1414
<li class="d-block"><a class="text-light" href="https://www.kb.se/digital-tillganglighet">{{ translateUi('Accessibility statement') }}</a></li>
15+
<li class="d-block"><a class="text-light" data-cc="show-preferencesModal" href="#" aria-haspopup="dialog">{{ translateUi('Manage cookies') }}</a></li>
1516
</ul>
1617
</div>
1718
<div class="col-md-5 d-flex flex-column">

‎idkbse/src/plugins/cookieConsent.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import KbCookieConsent from '@kungbib/cookie-consent'
2+
3+
const cookieConsentConfig = {
4+
categories: {
5+
necessary: {
6+
readOnly: true,
7+
enabled: true
8+
},
9+
analytics: {
10+
autoClear: {
11+
cookies: [
12+
{ name: /^_pk.*/ } // Matomo cookies
13+
]
14+
}
15+
}
16+
},
17+
language: {
18+
translations: {
19+
sv: {
20+
consentModal: {
21+
title: 'Om användning av kakor',
22+
description:
23+
'Den här tjänsten använder kakor (cookies). Du kan välja vilka kakor som får användas.',
24+
acceptAllBtn: 'Tillåt alla',
25+
acceptNecessaryBtn: 'Tillåt endast nödvändiga',
26+
showPreferencesBtn: 'Inställningar'
27+
},
28+
preferencesModal: {
29+
title: 'Inställningar för kakor',
30+
acceptAllBtn: 'Tillåt alla',
31+
acceptNecessaryBtn: 'Tillåt endast nödvändiga',
32+
savePreferencesBtn: 'Spara och godkänn',
33+
sections: [
34+
{
35+
title: 'Om användning av kakor',
36+
description:
37+
'Kakor används för att tjänsten ska fungera och för att förbättra upplevelsen.'
38+
},
39+
{
40+
title: 'Nödvändiga kakor',
41+
description:
42+
'Dessa krävs för att tjänsten ska vara säker och fungera som den ska.',
43+
linkedCategory: 'necessary'
44+
},
45+
{
46+
title: 'Analytiska kakor',
47+
description:
48+
'Ger oss information om hur webbplatsen används så att vi kan förbättra den.',
49+
linkedCategory: 'analytics'
50+
},
51+
{
52+
title: 'Mer information',
53+
description:
54+
'Du kan alltid ändra dina val genom att klicka på “Hantera cookies” längst ner på sidan.'
55+
}
56+
]
57+
}
58+
}
59+
}
60+
}
61+
}
62+
63+
export default (context, inject) => {
64+
if (process.client) {
65+
// Initialize _paq queue before Matomo loads
66+
window._paq = window._paq || []
67+
68+
// Store consent callbacks to use Matomo's setConsent method when available
69+
const matomoCallbacks = {
70+
onConsent: ({ cookie }) => {
71+
if (window.$nuxt && window.$nuxt.$matomo) {
72+
const hasAnalytics = cookie.categories.includes('analytics')
73+
window.$nuxt.$matomo.setConsent(hasAnalytics)
74+
}
75+
},
76+
onChange: ({ cookie }) => {
77+
if (window.$nuxt && window.$nuxt.$matomo) {
78+
const hasAnalytics = cookie.categories.includes('analytics')
79+
window.$nuxt.$matomo.setConsent(hasAnalytics)
80+
}
81+
}
82+
}
83+
84+
// Merge callbacks into the config
85+
cookieConsentConfig.onConsent = matomoCallbacks.onConsent
86+
cookieConsentConfig.onChange = matomoCallbacks.onChange
87+
88+
KbCookieConsent.run(cookieConsentConfig)
89+
}
90+
}

0 commit comments

Comments
 (0)