chore: add analytics

This commit is contained in:
LeoKu 2021-10-19 21:12:37 +08:00
parent 0f47280029
commit 1141214114
6 changed files with 47 additions and 17 deletions

View File

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

View File

@ -1 +0,0 @@
235605460366578863

View File

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

2
src/env.d.ts vendored
View File

@ -9,5 +9,5 @@ declare module '*.vue' {
interface Window {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
gtag: any
gtag: (...params: any[]) => void
}

View File

@ -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>

View File

@ -1,7 +1,10 @@
export function recordClick(params: {
export function recordEvent(
action: string,
params: {
event_category: string
event_label?: string
value?: number
}) {
window?.gtag('event', 'Click', params)
}
) {
window?.gtag('event', action, params)
}