From 024f9afd5c0727c6856403784a993cbaf456d670 Mon Sep 17 00:00:00 2001
From: LeoKu <czc12580520@gmail.com>
Date: Sun, 17 Oct 2021 17:32:01 +0800
Subject: [PATCH] feat: add google analytics

---
 index.html      | 17 ++++++++++++++++-
 src/App.vue     |  5 +++++
 src/env.d.ts    |  5 +++++
 src/utils/ga.ts |  7 +++++++
 4 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/ga.ts

diff --git a/index.html b/index.html
index 31b73fb..6ec76db 100644
--- a/index.html
+++ b/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;
diff --git a/src/App.vue b/src/App.vue
index 8116f06..f44961a 100644
--- a/src/App.vue
+++ b/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
   }
 }
diff --git a/src/env.d.ts b/src/env.d.ts
index aafef95..59af2f2 100644
--- a/src/env.d.ts
+++ b/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
+}
diff --git a/src/utils/ga.ts b/src/utils/ga.ts
new file mode 100644
index 0000000..6ad406a
--- /dev/null
+++ b/src/utils/ga.ts
@@ -0,0 +1,7 @@
+export function recordClick(params: {
+  event_category: string
+  event_label?: string
+  value?: number
+}) {
+  window?.gtag('event', 'Click', params)
+}
-- 
GitLab