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, clearMocks: true,
collectCoverage: true, collectCoverage: false,
coverageDirectory: 'coverage', coverageDirectory: 'coverage',

View File

@ -1 +0,0 @@
235605460366578863

View File

@ -91,7 +91,7 @@ import {
NOT_COMPATIBLE_AGENTS, NOT_COMPATIBLE_AGENTS,
TRIGGER_PROBABILITY, TRIGGER_PROBABILITY,
} from '@/utils/constant' } from '@/utils/constant'
import { recordClick } from '@/utils/ga' import { recordEvent } from '@/utils/ga'
import Confetti from './components/Confetti.vue' import Confetti from './components/Confetti.vue'
@ -117,6 +117,10 @@ function handleGenerate() {
const randomOption = getRandomAvatarOption(avatarOption.value) const randomOption = getRandomAvatarOption(avatarOption.value)
setAvatarOption(randomOption) setAvatarOption(randomOption)
} }
recordEvent('click_randomize', {
event_category: 'click',
})
} }
const downloadModalVisible = ref(false) const downloadModalVisible = ref(false)
@ -150,6 +154,10 @@ async function handleDownload() {
trigger.click() trigger.click()
} }
} }
recordEvent('click_download', {
event_category: 'click',
})
} finally { } finally {
setTimeout(() => { setTimeout(() => {
downloading.value = false downloading.value = false
@ -164,21 +172,33 @@ function handleAction(actionType: ActionType) {
switch (actionType) { switch (actionType) {
case ActionType.Undo: case ActionType.Undo:
store.commit(UNDO) store.commit(UNDO)
recordEvent('action_undo', {
event_category: 'action',
event_label: 'Undo',
})
break break
case ActionType.Redo: case ActionType.Redo:
store.commit(REDO) store.commit(REDO)
recordEvent('action_redo', {
event_category: 'action',
event_label: 'Redo',
})
break break
case ActionType.Flip: case ActionType.Flip:
flipped.value = !flipped.value flipped.value = !flipped.value
recordEvent('action_flip_avatar', {
event_category: 'action',
event_label: 'Flip Avatar',
})
break break
case ActionType.Code: case ActionType.Code:
codeVisible.value = !codeVisible.value codeVisible.value = !codeVisible.value
recordClick({ recordEvent('action_view_code', {
event_category: 'code', event_category: 'action',
event_label: 'view code', event_label: 'View Avatar Option Code',
}) })
break break
} }
@ -267,7 +287,7 @@ function handleAction(actionType: ActionType) {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@mixin gradient-block($color) { @mixin gradient-style($color) {
position: absolute; position: absolute;
width: 100vh; width: 100vh;
height: 100vh; height: 100vh;
@ -284,14 +304,14 @@ function handleAction(actionType: ActionType) {
} }
.gradient-top { .gradient-top {
@include gradient-block($color-secondary); @include gradient-style($color-secondary);
top: -50%; top: -50%;
right: -20%; right: -20%;
} }
.gradient-bottom { .gradient-bottom {
@include gradient-block($color-accent); @include gradient-style($color-accent);
bottom: -50%; bottom: -50%;
left: -20%; left: -20%;

2
src/env.d.ts vendored
View File

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

View File

@ -10,7 +10,14 @@
target="_blank" target="_blank"
rel="nofollow noopener noreferrer" rel="nofollow noopener noreferrer"
> >
<button class="github-button"> <button
class="github-button"
@click="
recordEvent('click_github', {
event_category: 'click',
})
"
>
<img :src="IconGitHub" alt="GitHub" /> <img :src="IconGitHub" alt="GitHub" />
<span class="text">GitHub</span> <span class="text">GitHub</span>
</button> </button>
@ -22,6 +29,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import IconGitHub from '@/assets/icons/icon-github.svg' import IconGitHub from '@/assets/icons/icon-github.svg'
import Logo from '@/components/Logo.vue' import Logo from '@/components/Logo.vue'
import { recordEvent } from '@/utils/ga'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

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