feat: add google analytics

index.html

@@ -4,9 +4,24 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="A pure front-end avatar generator" />
+    <meta name="description" content="A pure front-end avatar generator." />
     <title>Vue Color Avatar</title>
 
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-B4C9FN5DFR"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || []
+      function gtag() {
+        dataLayer.push(arguments)
+      }
+      gtag('js', new Date())
+
+      gtag('config', 'G-B4C9FN5DFR')
+    </script>
+
     <style>
       body {
         margin: 0;

src/App.vue

@@ -91,6 +91,7 @@ import {
   NOT_COMPATIBLE_AGENTS,
   TRIGGER_PROBABILITY,
 } from '@/utils/constant'
+import { recordClick } from '@/utils/ga'
 
 import Confetti from './components/Confetti.vue'
 
@@ -175,6 +176,10 @@ function handleAction(actionType: ActionType) {
 
     case ActionType.Code:
       codeVisible.value = !codeVisible.value
+      recordClick({
+        event_category: 'code',
+        event_label: 'view code',
+      })
       break
   }
 }

src/env.d.ts

@@ -6,3 +6,8 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+interface Window {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  gtag: any
+}

src/utils/ga.ts

+export function recordClick(params: {
+  event_category: string
+  event_label?: string
+  value?: number
+}) {
+  window?.gtag('event', 'Click', params)
+}