chore: add analytics

jest.config.js

@@ -10,7 +10,7 @@ module.exports = {
 
   clearMocks: true,
 
-  collectCoverage: true,
+  collectCoverage: false,
 
   coverageDirectory: 'coverage',
 

public/tencent14464934467995274316.txt

@@ -1 +0,0 @@
-235605460366578863

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%;

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
 }

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>

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)
 }