Merge pull request #6 from vincent99/main

Google Analytics

nuxt.config.ts

@@ -16,6 +16,12 @@ export default defineNuxtConfig({
     '@nuxtjs/tailwindcss',
   ],
   runtimeConfig: {
+    public: {
+      // Anything in here is exposed to the client, do not put secrets in here
+      googleAnalytics: '', // NUXT_PUBLIC_GOOGLE_ANALYTICS
+    },
+
+    // Things in this section are private and only available on the server side
     databaseUrl: '', // NUXT_DATABASE_URL
     parserUrl:   '', // NUXT_PARSER_URL
     githubToken: '', // NUXT_GITHUB_TOKEN

package.json

@@ -37,6 +37,7 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vue": "^3.4.19",
+    "vue-gtag-next": "^1.14.0",
     "vue-router": "^4.3.0"
   }
 }

src/composables/analytics.ts

@@ -0,0 +1,30 @@
+import type { Gtag } from 'vue-gtag-next'
+import { useGtag } from 'vue-gtag-next'
+
+export function analyticsEvent(name: string, category?: string, label?: string) {
+  // eslint-disable-next-line node/prefer-global/process
+  if (!process.client) {
+    return
+  }
+
+  const id = useRuntimeConfig().public.googleAnalytics
+
+  const { event: ev } = useGtag()
+  const opt: Gtag.EventParams = {}
+
+  if (category) {
+    opt.event_category = category
+  }
+
+  if (label) {
+    opt.event_label = label
+  }
+
+  console.debug('GA Event', name, opt)
+
+  if (!id) {
+    return
+  }
+
+  return ev(name, opt)
+}

src/plugins/google-analytics.client.ts

@@ -0,0 +1,12 @@
+import GTag, { trackRouter } from 'vue-gtag-next'
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  const id = useRuntimeConfig().public.googleAnalytics
+
+  if (id) {
+    console.debug(`Activating Google Analytics (${ id })`)
+    vueApp.use(GTag, { property: { id } })
+
+    trackRouter(useRouter())
+  }
+})

yarn.lock

@@ -7940,6 +7940,11 @@ vue-eslint-parser@^9.4.2:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-gtag-next@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/vue-gtag-next/-/vue-gtag-next-1.14.0.tgz#793aef0b90dff4213b9f3a79827cd99b06e678dd"
+  integrity sha512-iJl+cOG2GU5NuxqzSSIpt03WVOvZqyKB9TOy7d55KiuvRklcnb2nlqxW5B/a3/sbIt7fla+XEkRyMCcoz0zAHw==
+
 vue-observe-visibility@^2.0.0-alpha.1:
   version "2.0.0-alpha.1"
   resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz#1e4eda7b12562161d58984b7e0dea676d83bdb13"