feat: analitycs

.vscode/settings.json

@@ -32,6 +32,7 @@
         "getcwd",
         "getinfo",
         "getsize",
+        "gtag",
         "hashable",
         "IGNORECASE",
         "isabs",

package.json

@@ -18,9 +18,11 @@
     "@headlessui/vue": "^1.6.6",
     "@vueuse/core": "^8.9.1",
     "@vueuse/head": "^0.7.6",
+    "add": "^2.0.6",
     "pinia": "^2.0.15",
     "prism-theme-vars": "^0.2.3",
     "vue": "^3.2.37",
+    "vue-gtag": "^2.0.1",
     "vue-i18n": "^9.1.10",
     "vue-router": "^4.1.2"
   },

src/App.vue

@@ -2,22 +2,23 @@
 const route = useRoute()
 const { meta } = useMeta()
 useHead(meta)
-
-const inProduction = import.meta.env.PROD
-if (inProduction) {
-  useScriptTag(
-    `https://www.googletagmanager.com/gtag/js?id=${import.meta.env.VITE_GTAG}`,
-    () => {
-      window.dataLayer = window.dataLayer || []
-      function gtag() {
-        // eslint-disable-next-line no-undef
-        dataLayer.push(arguments)
-      }
-      gtag('js', new Date())
-      gtag('config', import.meta.env.VITE_GTAG)
-    }
-  )
-}
+// useAnalytics()
+
+// const inProduction = import.meta.env.PROD
+// if (inProduction) {
+//   useScriptTag(
+//     `https://www.googletagmanager.com/gtag/js?id=${import.meta.env.VITE_GTAG}`,
+//     () => {
+//       window.dataLayer = window.dataLayer || []
+//       function gtag() {
+//         // eslint-disable-next-line no-undef
+//         dataLayer.push(arguments)
+//       }
+//       gtag('js', new Date())
+//       gtag('config', import.meta.env.VITE_GTAG)
+//     }
+//   )
+// }
 
 watch(route, () => {
   window.scrollTo(0, 0)

src/modules/analytics.ts

@@ -0,0 +1,12 @@
+import VueGtag from 'vue-gtag'
+import { type UserModule } from '~/types'
+
+export const install: UserModule = ({ app }) => {
+  const inProduction = import.meta.env.PROD
+  if (inProduction) {
+    const gTag = import.meta.env.VITE_GTAG || 'tag'
+    app.use(VueGtag, {
+      config: { id: gTag },
+    })
+  }
+}

src/types/index.d.ts

@@ -0,0 +1,8 @@
+export {}
+
+declare global {
+  // eslint-disable-next-line no-unused-vars
+  interface Window {
+    dataLayer: any
+  }
+}

tsconfig.json

@@ -38,4 +38,7 @@
     "coverage",
     "cheatsheet",
   ],
+  "typeRoots": [
+    "./src/types"
+  ]
 }