Integrate nuxt-gtag for Google Tag Manager setup; remove inline GTM scripts from BlogEntry.vue and default.vue

TheMeinerLP · TheMeinerLP · commit 43073638f0fa · 2025-06-01T19:20:21.000+02:00
diff --git a/layouts/BlogEntry.vue b/layouts/BlogEntry.vue
@@ -16,14 +16,6 @@ const title = computed(() =>route.meta?.title ?? 'TDB');
     <template v-for="meta in head.meta" :key="meta.hid">
       <Meta :id="meta.hid" :property="meta.property" :content="meta.content" />
     </template>
-    <component is="script" async src="https://www.googletagmanager.com/gtag/js?id=AW-16761048144"></component>
-    <component is="script">
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'AW-16761048144');
-    </component>
   </Head>
   <Body class="h-full dark:bg-gray-900">
     <NavigationBar />
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -17,14 +17,6 @@ const title = computed(() => t(route.meta?.title ?? 'TDB'));
     <template v-for="meta in head.meta" :key="meta.hid">
       <Meta :id="meta.hid" :property="meta.property" :content="meta.content" />
     </template>
-    <component is="script" async src="https://www.googletagmanager.com/gtag/js?id=AW-16761048144"></component>
-    <component is="script">
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'AW-16761048144');
-    </component>
   </Head>
   <Body class="h-full dark:bg-gray-900">
     <NavigationBar />
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -46,7 +46,8 @@ export default defineNuxtConfig({
     'nuxt-schema-org',
     'nuxt-og-image',
     '@nuxt/content',
-    'nuxt-posthog'
+    'nuxt-posthog',
+    'nuxt-gtag'
   ],
   i18n: {
     strategy: 'prefix',
@@ -163,6 +164,13 @@ export default defineNuxtConfig({
     site: {
       url: 'https://blog.onelitefeather.net',
     },
+    gtag: {
+      id: 'AW-16761048144',
+      config: {
+        anonymize_ip: true,
+        send_page_view: true
+      }
+    },
     image: {
       cloudflare: {
         baseUrl: 'https://blog.onelitefeather.net',
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "@vueuse/nuxt": "13.3.0",
     "eslint": "^9.27.0",
     "nuxt": "^3.17.4",
+    "nuxt-gtag": "3.0.2",
     "nuxt-og-image": "5.1.4",
     "nuxt-posthog": "1.6.3",
     "nuxt-schema-org": "5.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
