@dargmuesli/nuxt-vio 11.0.0-beta.4 → 11.0.0-beta.5

package/components/vio/_/VioApp.vue

@@ -20,7 +20,6 @@ const ogImageComponentProp = toRef(() => props.ogImageComponent)
 
 const { $dayjs } = useNuxtApp()
 const { locale } = useI18n()
-const cookieControl = useCookieControl()
 const siteConfig = useSiteConfig()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
@@ -46,18 +45,6 @@ const isLoading = computed(() => !!loadingIds.value.length)
 
 // lifecycle
 onMounted(() => indicateLoadingDone())
-watch(
-  () => cookieControl.cookiesEnabledIds.value,
-  (current, previous) => {
-    if (
-      (!previous?.includes('ga') && current?.includes('ga')) ||
-      (previous?.includes('ga') && !current?.includes('ga'))
-    ) {
-      window.location.reload()
-    }
-  },
-  { deep: true },
-)
 
 // initialization
 defineOgImageComponent(
@@ -77,5 +64,6 @@ useSchemaOrg([
     description: siteConfig.description,
   }),
 ])
+useVioGtag()
 init()
 </script>

package/composables/useVioGtag.ts

@@ -0,0 +1,42 @@
+import { GOOGLE_ANALYTICS_COOKIE_NAME } from '../utils/constants'
+
+export const useVioGtag = () => {
+  const {
+    gtag,
+    initialize: initializeGtag,
+    disableAnalytics,
+    enableAnalytics,
+  } = useGtag()
+  const cookieControl = useCookieControl()
+
+  if (
+    cookieControl.cookiesEnabledIds.value?.includes(
+      GOOGLE_ANALYTICS_COOKIE_NAME,
+    )
+  ) {
+    initializeGtag()
+  }
+
+  watch(cookieControl.cookiesEnabledIds, (current, previous) => {
+    if (
+      !previous?.includes(GOOGLE_ANALYTICS_COOKIE_NAME) &&
+      current?.includes(GOOGLE_ANALYTICS_COOKIE_NAME)
+    ) {
+      initializeGtag()
+      enableAnalytics()
+      gtag('consent', 'update', {
+        ad_user_data: 'granted',
+        ad_personalization: 'granted',
+        ad_storage: 'granted',
+        analytics_storage: 'granted',
+      })
+    }
+
+    if (
+      previous?.includes(GOOGLE_ANALYTICS_COOKIE_NAME) &&
+      !current?.includes(GOOGLE_ANALYTICS_COOKIE_NAME)
+    ) {
+      disableAnalytics()
+    }
+  })
+}

package/nuxt.config.ts

@@ -7,6 +7,7 @@ import {
   SITE_URL,
   SITE_NAME,
   TIMEZONE_COOKIE_NAME,
+  GOOGLE_ANALYTICS_COOKIE_NAME,
   VIO_NUXT_BASE_CONFIG,
 } from './utils/constants'
 
@@ -45,6 +46,7 @@ export default defineNuxtConfig(
         '@nuxtjs/seo',
         '@nuxtjs/tailwindcss',
         '@pinia/nuxt',
+        'nuxt-gtag',
         // nuxt-security: remove invalid `'none'`s and duplicates
         (_options, nuxt) => {
           const nuxtConfigSecurity = nuxt.options.security
@@ -90,7 +92,6 @@ export default defineNuxtConfig(
               : { baseUrl: SITE_URL }),
           },
           vio: {
-            googleAnalyticsId: '',
             isInProduction: process.env.NODE_ENV === 'production',
             isTesting: false,
           },
@@ -144,7 +145,7 @@ export default defineNuxtConfig(
                 de: 'Die Cookies vom Drittanbieter Google ermöglichen die Analyse von Nutzerverhalten. Diese Analyse hilft uns unsere Dienste zu verbessern, indem wir verstehen, wie diese Webseite genutzt wird.',
                 en: 'The third-party cookies by Google enable the analysis of user behavior. This analysis helps us to improve our services by understanding how this website is used.',
               },
-              id: 'ga',
+              id: GOOGLE_ANALYTICS_COOKIE_NAME,
               links: {
                 'https://policies.google.com/privacy': 'Google Privacy Policy',
                 'https://policies.google.com/terms': 'Google Terms of Service',
@@ -156,6 +157,27 @@ export default defineNuxtConfig(
         },
         locales: ['en', 'de'],
       },
+      gtag: {
+        config: {
+          cookie_flags: `samesite=strict${
+            process.env.NODE_ENV === 'production' ? ';secure' : ''
+          }`,
+        },
+        enabled: false,
+        initCommands: [
+          [
+            'consent',
+            'default',
+            {
+              ad_user_data: 'denied',
+              ad_personalization: 'denied',
+              ad_storage: 'denied',
+              analytics_storage: 'denied',
+              wait_for_update: 500,
+            },
+          ],
+        ],
+      },
       htmlValidator: {
         // failOnError: true, // TODO: enable once headers match requirements (https://github.com/unjs/unhead/issues/199#issuecomment-1815728703)
         logLevel: 'warning',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-vio",
-  "version": "11.0.0-beta.4",
+  "version": "11.0.0-beta.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dargmuesli/vio.git"
@@ -12,7 +12,7 @@
   "engines": {
     "node": "20"
   },
-  "packageManager": "pnpm@8.15.4",
+  "packageManager": "pnpm@8.15.5",
   "files": [
     "assets",
     "components",
@@ -34,12 +34,12 @@
   ],
   "main": "nuxt.config.ts",
   "dependencies": {
-    "@dargmuesli/nuxt-cookie-control": "8.0.0-beta.1",
+    "@dargmuesli/nuxt-cookie-control": "8.0.0-beta.3",
     "@heroicons/vue": "2.1.1",
     "@http-util/status-i18n": "0.8.1",
     "@nuxt/devtools": "1.0.8",
     "@nuxt/image": "1.4.0",
-    "@nuxtjs/color-mode": "3.3.2",
+    "@nuxtjs/color-mode": "3.3.3",
     "@nuxtjs/html-validator": "1.6.0",
     "@nuxtjs/i18n": "8.2.0",
     "@nuxtjs/seo": "2.0.0-rc.9",
@@ -54,16 +54,16 @@
     "clipboardy": "4.0.0",
     "dayjs": "2.0.0-alpha.4",
     "jose": "5.2.3",
+    "nuxt-gtag": "2.0.5",
     "nuxt-security": "1.2.2",
-    "sweetalert2": "11.10.6",
-    "vue-gtag": "2.0.1"
+    "sweetalert2": "11.10.6"
   },
   "devDependencies": {
     "@axe-core/playwright": "4.8.5",
     "@intlify/eslint-plugin-vue-i18n": "3.0.0-next.7",
     "@nuxtjs/eslint-config-typescript": "12.1.0",
     "@playwright/test": "1.42.1",
-    "@unhead/vue": "1.8.18",
+    "@unhead/vue": "1.8.20",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-graphcache": "6.5.0",
     "@urql/vue": "1.1.2",
@@ -76,12 +76,12 @@
     "eslint-plugin-compat": "4.2.0",
     "eslint-plugin-nuxt": "4.0.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-yml": "1.12.2",
+    "eslint-plugin-yml": "1.13.1",
     "h3": "1.11.1",
     "jiti": "1.21.0",
     "lint-staged": "15.2.2",
     "lodash-es": "4.17.21",
-    "nuxt": "3.10.3",
+    "nuxt": "3.11.1",
     "pinia": "2.1.7",
     "prettier": "3.2.5",
     "prettier-plugin-tailwindcss": "0.5.12",
@@ -91,14 +91,14 @@
     "stylelint-config-standard": "36.0.0",
     "stylelint-no-unsupported-browser-features": "8.0.1",
     "tailwindcss": "3.4.1",
-    "ufo": "1.4.0",
-    "unhead": "1.8.18",
+    "ufo": "1.5.2",
+    "unhead": "1.8.20",
     "vue": "3.4.21",
     "vue-router": "4.3.0",
     "vue-tsc": "2.0.6"
   },
   "peerDependencies": {
-    "nuxt": "3.10.3",
+    "nuxt": "3.11.1",
     "playwright-core": "1.42.1",
     "vue": "3.4.21",
     "vue-router": "4.3.0"

package/utils/constants.ts

@@ -13,6 +13,7 @@ export const CACHE_VERSION = 'bOXMwoKlJr'
 export const COOKIE_PREFIX = SITE_NAME.toLocaleLowerCase()
 export const COOKIE_SEPARATOR = '_'
 export const FETCH_RETRY_AMOUNT = 3
+export const GOOGLE_ANALYTICS_COOKIE_NAME = 'ga'
 export const I18N_MODULE_CONFIG = {
   langDir: 'locales',
   lazy: true,

package/plugins/gtag.client.ts

@@ -1,21 +0,0 @@
-import VueGtag from 'vue-gtag'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  const config = useRuntimeConfig()
-  const router = useRouter()
-  const cookieControl = useCookieControl()
-
-  nuxtApp.vueApp.use(
-    VueGtag,
-    {
-      bootstrap: !!cookieControl.cookiesEnabledIds.value?.includes('ga'),
-      config: {
-        id: config.public.vio.googleAnalyticsId,
-        params: {
-          cookie_flags: 'secure;samesite=strict',
-        },
-      },
-    },
-    router,
-  )
-})