feat: add gtag

dargmuesli · Jan 6, 2023 · 0f1c451 · 0f1c451
1 parent 0ec540b
commit 0f1c451
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 41 deletions.
diff --git a/.env.template b/.env.template
@@ -0,0 +1 @@
+NUXT_PUBLIC_GOOGLE_ANALYTICS_ID=
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -49,41 +49,20 @@ export default defineNuxtConfig({
               targetCookieIds: ['i18n_redirected'],
             },
           ],
-          // optional: [
-          //   {
-          //     name: 'Google Analytics',
-          //     id: 'ga',
-          //     // targetCookieIds: ['_ga', '_gat', '_gid'],
-          //     // accepted: () => {
-          //     //   const { $ga } = useNuxtApp()
-          //     //   $ga.enable()
-          //     // },
-          //     // declined: () => {
-          //     //   const { $ga } = useNuxtApp()
-          //     //   $ga.disable()
-          //     // },
-          //   },
-          // ],
+          optional: [
+            {
+              description: {
+                de: 'Hilft uns dabei Nutzerverhalten zu verstehen und unsere Dienste zu verbessern.',
+                en: 'Helps us understand user behavior and optimize our services.',
+              },
+              name: 'Google Analytics',
+              targetCookieIds: ['_ga', '_ga_K4R41W62BR'],
+            },
+          ],
         },
         locales: ['en', 'de'],
       },
     ],
-    // [
-    //   '@nuxtjs/google-analytics',
-    //   {
-    //     disabled: () => {
-    //       const enabledCookies =
-    //         document.cookie
-    //           .match(
-    //             '(^|;)\\s*' +
-    //               'cookie_control_enabled_cookies' +
-    //               '\\s*=\\s*([^;]+)'
-    //           )
-    //           ?.pop() || ''
-    //       return !enabledCookies.split(',').includes('ga')
-    //     },
-    //   },
-    // ],
     [
       '@nuxtjs/html-validator',
       {
@@ -118,10 +97,8 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
-      googleAnalytics: {
-        debug: process.env.NODE_ENV !== 'production',
-      },
-      isTesting: false, // set via environment variables only
+      googleAnalyticsId: '', // set via environment variable `NUXT_PUBLIC_GOOGLE_ANALYTICS_ID` only
+      isTesting: false, // set via environment variable `NUXT_PUBLIC_IS_TESTING` only
     },
   },
   typescript: {

diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "tailwindcss": "3.2.4",
     "typescript": "4.9.4",
     "vue": "3.2.45",
+    "vue-gtag": "2.0.1",
     "vue-tsc": "1.0.22"
   },
   "pnpm": {

diff --git a/plugins/gtag.client.ts b/plugins/gtag.client.ts
@@ -0,0 +1,19 @@
+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('google-analytics'),
+      config: {
+        id: config.public.googleAnalyticsId,
+      },
+    },
+    router
+  )
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/assets/static/favicon/site.webmanifest b/public/assets/static/favicon/site.webmanifest
@@ -15,6 +15,6 @@
     ],
     "theme_color": "#ffffff",
     "background_color": "#ffffff",
-    "start_url": "https://jonas-thelemann.de/",
+    "start_url": "/",
     "display": "standalone"
 }