feat: add opt-out

remindgmbh · Apr 18, 2024 · 545bf38 · 545bf38
1 parent 7fff44e
commit 545bf38
Show file tree

Hide file tree

Showing 8 changed files with 8,485 additions and 7,249 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
         "typecheck": "nuxi typecheck"
     },
     "dependencies": {
-        "@nuxt/kit": "^3.8.2",
+        "@nuxt/kit": "^3.10.3",
         "defu": "^6.1.3"
     },
     "peerDependencies": {
@@ -47,13 +47,13 @@
     "devDependencies": {
         "@nuxt/devtools": "latest",
         "@nuxt/module-builder": "^0.5.4",
-        "@nuxt/schema": "^3.8.2",
+        "@nuxt/schema": "^3.10.3",
         "@remindgmbh/eslint-config-nuxt": "^1.0.5",
         "@remindgmbh/nuxt-typo3": "^4.0.0-develop",
         "@remindgmbh/nuxt-typo3-solr": "^2.0.0-develop",
         "@types/node": "^20.9.3",
         "eslint": "^8.54.0",
-        "nuxt": "^3.8.2",
+        "nuxt": "^3.10.3",
         "prettier": "^3.1.0",
         "typescript": "^5.3.2",
         "vue-tsc": "^1.8.22"

diff --git a/playground/app.vue b/playground/app.vue
@@ -1,5 +1,3 @@
 <template>
     <div>Nuxt module playground!</div>
 </template>
-
-<script setup></script>
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -1,4 +1,8 @@
 export default defineNuxtConfig({
+    devtools: { enabled: true },
+    imports: {
+        autoImport: false,
+    },
     modules: [
         '@remindgmbh/nuxt-typo3',
         '@remindgmbh/nuxt-typo3-solr',
@@ -8,8 +12,4 @@ export default defineNuxtConfig({
         shim: false,
         strict: true,
     },
-    devtools: { enabled: true },
-    imports: {
-        autoImport: false,
-    },
 })
diff --git a/src/module.ts b/src/module.ts
@@ -1,11 +1,11 @@
 import {
-    addPlugin,
     addImportsDir,
+    addPlugin,
     createResolver,
     defineNuxtModule,
 } from '@nuxt/kit'
-import { defu } from 'defu'
 import { name, version } from '../package.json'
+import { defu } from 'defu'
 
 export const CONFIG_KEY = 'typo3Matomo'
 
@@ -16,16 +16,16 @@ export interface ModuleOptions {
 }
 
 export default defineNuxtModule<ModuleOptions>({
-    meta: {
-        name,
-        version,
-        configKey: CONFIG_KEY,
-    },
     defaults: {
         domains: '',
         matomoUrl: '',
         siteId: 0,
     },
+    meta: {
+        configKey: CONFIG_KEY,
+        name,
+        version,
+    },
     setup(options, nuxt) {
         const resolver = createResolver(import.meta.url)
 
@@ -39,8 +39,8 @@ export default defineNuxtModule<ModuleOptions>({
         addImportsDir(resolver.resolve('runtime/composables/**/*'))
 
         addPlugin({
-            src: resolver.resolve('./runtime/plugins/matomo'),
             mode: 'client',
+            src: resolver.resolve('./runtime/plugins/matomo'),
         })
     },
 })
diff --git a/src/runtime/composables/useMatomo.ts b/src/runtime/composables/useMatomo.ts
@@ -1,8 +1,25 @@
+import { useState } from '#imports'
+
 export function useMatomo() {
+    const isUserOptedOut = useState<boolean>(
+        'matomo-isUserOptedOut',
+        () => false,
+    )
+
     function enableLinkTracking() {
         window._paq.push(['enableLinkTracking'])
     }
 
+    function forgetUserOptOut() {
+        window._paq.push(['forgetUserOptOut'])
+        setIsUserOptedOut()
+    }
+
+    function optUserOut() {
+        window._paq.push(['optUserOut'])
+        setIsUserOptedOut()
+    }
+
     function setCustomUrl(url: string) {
         window._paq.push(['setCustomUrl', url])
     }
@@ -11,6 +28,14 @@ export function useMatomo() {
         window._paq.push(['setDomains', domains])
     }
 
+    function setIsUserOptedOut() {
+        window._paq.push([
+            function (this: any) {
+                isUserOptedOut.value = this.isUserOptedOut()
+            },
+        ])
+    }
+
     function setReferrerUrl(url: string) {
         window._paq.push(['setReferrerUrl', url])
     }
@@ -41,9 +66,14 @@ export function useMatomo() {
     }
 
     return {
+        isUserOptedOut,
+
         enableLinkTracking,
+        forgetUserOptOut,
+        optUserOut,
         setCustomUrl,
         setDomains,
+        setIsUserOptedOut,
         setReferrerUrl,
         setSiteId,
         setTrackerUrl,

diff --git a/src/runtime/plugins/matomo.ts b/src/runtime/plugins/matomo.ts
@@ -1,16 +1,16 @@
 import {
+    type T3SolrModel,
     defineNuxtPlugin,
     useHead,
     useLogger,
     useMatomo,
-    useRuntimeConfig,
     useRouter,
+    useRuntimeConfig,
     useT3Data,
     useT3DataUtil,
-    type T3SolrModel,
 } from '#imports'
 
-export default defineNuxtPlugin(() => {
+export default defineNuxtPlugin((nuxt) => {
     const config = useRuntimeConfig().public.typo3Matomo
 
     const logger = useLogger()
@@ -29,12 +29,43 @@ export default defineNuxtPlugin(() => {
     matomo.setTrackerUrl(new URL('matomo.php', config.matomoUrl).href)
     matomo.setSiteId(config.siteId)
     matomo.setDomains(config.domains.split(','))
+    matomo.setIsUserOptedOut()
+
+    nuxt.hook('typo3:parseHtml', (el) => {
+        if (el.value) {
+            const matomoLinks: NodeListOf<HTMLAnchorElement> =
+                el.value.querySelectorAll('a[href^="t3://matomo"]')
+            for (const matomoLink of matomoLinks) {
+                const params = new URLSearchParams(matomoLink.search)
+                const action = params.get('action')
+
+                matomoLink.addEventListener('click', (event) => {
+                    event.preventDefault()
+                    switch (action) {
+                        case 'opt-out':
+                            matomo.optUserOut()
+                            break
+                        case 'opt-in':
+                            matomo.forgetUserOptOut()
+                            break
+                        case 'toggle':
+                            matomo.isUserOptedOut.value
+                                ? matomo.forgetUserOptOut()
+                                : matomo.optUserOut()
+                            break
+                        default:
+                            break
+                    }
+                })
+            }
+        }
+    })
 
     useHead({
         script: [
             {
-                src: new URL('matomo.js', config.matomoUrl).href,
                 async: true,
+                src: new URL('matomo.js', config.matomoUrl).href,
                 type: 'text/javascript',
             },
         ],

diff --git a/src/runtime/types/schema.d.ts b/src/runtime/types/schema.d.ts
@@ -1,4 +1,4 @@
-import { ModuleOptions, CONFIG_KEY } from '../../module'
+import { CONFIG_KEY, ModuleOptions } from '../../module'
 
 declare module '@nuxt/schema' {
     interface PublicRuntimeConfig {