From 1141214114c136ad7a0beb9d0e5b7f471cf5f204 Mon Sep 17 00:00:00 2001
From: LeoKu <czc12580520@gmail.com>
Date: Tue, 19 Oct 2021 21:12:37 +0800
Subject: [PATCH] chore: add analytics

---
 jest.config.js                         |  2 +-
 public/tencent14464934467995274316.txt |  1 -
 src/App.vue                            | 34 ++++++++++++++++++++------
 src/env.d.ts                           |  2 +-
 src/layouts/Header.vue                 | 10 +++++++-
 src/utils/ga.ts                        | 15 +++++++-----
 6 files changed, 47 insertions(+), 17 deletions(-)
 delete mode 100644 public/tencent14464934467995274316.txt

diff --git a/jest.config.js b/jest.config.js
index c695365..cc530b6 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -10,7 +10,7 @@ module.exports = {
 
   clearMocks: true,
 
-  collectCoverage: true,
+  collectCoverage: false,
 
   coverageDirectory: 'coverage',
 
diff --git a/public/tencent14464934467995274316.txt b/public/tencent14464934467995274316.txt
deleted file mode 100644
index a2996cd..0000000
--- a/public/tencent14464934467995274316.txt
+++ /dev/null
@@ -1 +0,0 @@
-235605460366578863
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index f44961a..407c490 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -91,7 +91,7 @@ import {
   NOT_COMPATIBLE_AGENTS,
   TRIGGER_PROBABILITY,
 } from '@/utils/constant'
-import { recordClick } from '@/utils/ga'
+import { recordEvent } from '@/utils/ga'
 
 import Confetti from './components/Confetti.vue'
 
@@ -117,6 +117,10 @@ function handleGenerate() {
     const randomOption = getRandomAvatarOption(avatarOption.value)
     setAvatarOption(randomOption)
   }
+
+  recordEvent('click_randomize', {
+    event_category: 'click',
+  })
 }
 
 const downloadModalVisible = ref(false)
@@ -150,6 +154,10 @@ async function handleDownload() {
         trigger.click()
       }
     }
+
+    recordEvent('click_download', {
+      event_category: 'click',
+    })
   } finally {
     setTimeout(() => {
       downloading.value = false
@@ -164,21 +172,33 @@ function handleAction(actionType: ActionType) {
   switch (actionType) {
     case ActionType.Undo:
       store.commit(UNDO)
+      recordEvent('action_undo', {
+        event_category: 'action',
+        event_label: 'Undo',
+      })
       break
 
     case ActionType.Redo:
       store.commit(REDO)
+      recordEvent('action_redo', {
+        event_category: 'action',
+        event_label: 'Redo',
+      })
       break
 
     case ActionType.Flip:
       flipped.value = !flipped.value
+      recordEvent('action_flip_avatar', {
+        event_category: 'action',
+        event_label: 'Flip Avatar',
+      })
       break
 
     case ActionType.Code:
       codeVisible.value = !codeVisible.value
-      recordClick({
-        event_category: 'code',
-        event_label: 'view code',
+      recordEvent('action_view_code', {
+        event_category: 'action',
+        event_label: 'View Avatar Option Code',
       })
       break
   }
@@ -267,7 +287,7 @@ function handleAction(actionType: ActionType) {
   height: 100%;
   overflow: hidden;
 
-  @mixin gradient-block($color) {
+  @mixin gradient-style($color) {
     position: absolute;
     width: 100vh;
     height: 100vh;
@@ -284,14 +304,14 @@ function handleAction(actionType: ActionType) {
   }
 
   .gradient-top {
-    @include gradient-block($color-secondary);
+    @include gradient-style($color-secondary);
 
     top: -50%;
     right: -20%;
   }
 
   .gradient-bottom {
-    @include gradient-block($color-accent);
+    @include gradient-style($color-accent);
 
     bottom: -50%;
     left: -20%;
diff --git a/src/env.d.ts b/src/env.d.ts
index 59af2f2..6154aca 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -9,5 +9,5 @@ declare module '*.vue' {
 
 interface Window {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  gtag: any
+  gtag: (...params: any[]) => void
 }
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
index 831bd30..6696be0 100644
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@@ -10,7 +10,14 @@
         target="_blank"
         rel="nofollow noopener noreferrer"
       >
-        <button class="github-button">
+        <button
+          class="github-button"
+          @click="
+            recordEvent('click_github', {
+              event_category: 'click',
+            })
+          "
+        >
           <img :src="IconGitHub" alt="GitHub" />
           <span class="text">GitHub</span>
         </button>
@@ -22,6 +29,7 @@
 <script lang="ts" setup>
 import IconGitHub from '@/assets/icons/icon-github.svg'
 import Logo from '@/components/Logo.vue'
+import { recordEvent } from '@/utils/ga'
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/utils/ga.ts b/src/utils/ga.ts
index 6ad406a..ed6dd21 100644
--- a/src/utils/ga.ts
+++ b/src/utils/ga.ts
@@ -1,7 +1,10 @@
-export function recordClick(params: {
-  event_category: string
-  event_label?: string
-  value?: number
-}) {
-  window?.gtag('event', 'Click', params)
+export function recordEvent(
+  action: string,
+  params: {
+    event_category: string
+    event_label?: string
+    value?: number
+  }
+) {
+  window?.gtag('event', action, params)
 }
-- 
GitLab