@castlabs/ui 7.12.0 → 7.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.12.0",
+  "version": "7.13.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",

package/plugins/matomo/README.md

@@ -0,0 +1,5 @@
+# Matomo Integration
+
+This standalone plugin is based on [vue-matomo](https://github.com/AmazingDreams/vue-matomo) (MIT license).
+
+It is not used by @castlabs/ui itself, but provided for Vue child projects to use.

package/plugins/matomo/index.ts

@@ -0,0 +1,93 @@
+/**
+ * Provide matomo integration without dependency to external package.
+ */
+
+import VueMatomo from 'vue-matomo'
+import type { App } from 'vue'
+import type { Router, RouteLocationNormalized } from 'vue-router'
+
+export function setCookie (name: string, value: string, days = 365, path = '/') {
+  document.cookie = `${name}=${value}; max-age=${60 * 60 * 24 * days}; path=${path}; SameSite=Lax;`
+}
+
+export function getCookie (cname: string): string {
+  for (const cookie of document?.cookie?.split(/; */) ?? []) {
+    const [name, value] = cookie.split('=')
+    if (name === cname) return value ?? ''
+  }
+  return ''
+}
+
+function getPaq () {
+  // cast potentialy non-exsisting _paq for typescript
+  return (window as unknown as { _paq: (string | number)[][] })?._paq ?? []
+}
+
+export function hasCookieConsent (what: string): boolean {
+  const value = getCookie('cl_banner_nok')
+  for (const token of value.split('|')) {
+    if (token === `+${what}`) return true
+  }
+  return false
+}
+
+export function enableMatomo (record = false, env = 'PROD') {
+  // Enable detailed matomo tracking if user gave consent.
+  const _paq = getPaq()
+  if (hasCookieConsent('mtm') && getCookie('mtm_cookie_consent') === '') {
+    // make Matomo create cookie 'mtm_cookie_consent' to remember consent. ~13 months=9480 hours.
+    _paq.push(['rememberCookieConsentGiven', 9480])
+  }
+  if (record) trackPage(document?.title, window?.location?.pathname, env)
+}
+
+export function trackPage (title: string, path: string, env: string) {
+  // Instruct Matomo to do the actual page tracking.
+
+  let prettyPath = path
+  const urnRegexp = /urn:[a-zA-Z]+:[a-zA-Z]+:[a-fA-F0-9]{32}/g
+  const foundUrns = [...prettyPath.matchAll(urnRegexp)]
+  foundUrns.forEach(elem => {
+    prettyPath = prettyPath.replace(elem.toString(), (elem[0].split(':')[2] ?? '').toUpperCase())
+  })
+
+  const prettyTitle = `${window?.location?.hostname} / ${title.replace(/ *\|[^|]*$/, '')}${env === 'PROD' ? '' : env}`
+
+  const _paq = getPaq()
+  _paq.push(['setDocumentTitle', prettyTitle])
+  _paq.push(['setCustomUrl', prettyPath])
+  _paq.push(['trackPageView'])
+  _paq.push(['enableLinkTracking'])
+}
+
+function trackViaMatomo (to: RouteLocationNormalized, env: string) {
+  if (!to.meta.analyticsIgnore) {
+    // matomo settings
+    enableMatomo()
+    trackPage(to.meta.title as string, to.fullPath, env)
+  }
+}
+
+export default {
+  install: (app: App, router: Router, env = 'PROD', siteId = 1) => {
+    console.log('setup matomo', env, siteId)
+    app.use(VueMatomo, {
+      host: 'https://castlabs.matomo.cloud',
+      siteId: siteId,
+      enableLinkTracking: false,
+      requireConsent: false,
+      trackInitialView: false,
+      disableCookies: false,
+      requireCookieConsent: true,
+      enableHeartBeatTimer: true,
+      heartBeatTimerInterval: 15,
+      trackerFileName: 'matomo',
+      cookieDomain: '*.castlabs.com',
+      domains: ['*.castlabs.com']
+    })
+
+    router.afterEach((to: RouteLocationNormalized) => {
+      trackViaMatomo(to, env)
+    })
+  }
+}

package/plugins/matomo/vue-matomo.d.ts

@@ -0,0 +1 @@
+declare module 'vue-matomo'

package/src/styles/layout/meta.scss

@@ -1,3 +1,3 @@
 :root {
-  #{'--cl-version'}: 'v7.12.0';
+  #{'--cl-version'}: 'v7.13.0';
 }