From 97897a8d189d54b8c16f454d3c9031f23a0095a1 Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Fri, 15 Apr 2022 05:31:52 +0800
Subject: [PATCH] feat: add gtag trackevent

---
 src/components/ChooseFood.vue | 40 ++++++++++++++++++++++++++++++-----
 src/components/DishTag.vue    | 14 ++++++++++++
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/src/components/ChooseFood.vue b/src/components/ChooseFood.vue
index ec17c6c..e4823d3 100644
--- a/src/components/ChooseFood.vue
+++ b/src/components/ChooseFood.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
+import { useGtm } from '@gtm-support/vue-gtm'
 import MeatTag from './MeatTag.vue'
 import StapleTag from './StapleTag.vue'
 import DishTag from './DishTag.vue'
@@ -28,9 +29,38 @@ const displayedRecipe = computed(() => {
   })
 })
 
-const toggleStuff = (item: StuffItem) => {
+const gtm = useGtm()
+
+const toggleStuff = (item: StuffItem, category = '') => {
+  gtm?.trackEvent({
+    event: 'stuff',
+    category,
+    action: 'click',
+    label: '食材',
+    value: item.name,
+  })
+
   rStore.toggleStuff(item.name)
 }
+
+/**
+ * toggle tool
+ * @param item
+ */
+const clickTool = (item: StuffItem) => {
+  if (curTool.value === item.name)
+    curTool.value = ''
+  else
+    curTool.value = item.name
+
+  gtm?.trackEvent({
+    event: 'tool',
+    category: 'tool',
+    action: 'click',
+    label: '工具',
+    value: item.name,
+  })
+}
 </script>
 
 <template>
@@ -50,7 +80,7 @@ const toggleStuff = (item: StuffItem) => {
     <VegetableTag
       v-for="item, i in vegetable" :key="i"
       :active="curStuff.includes(item.name)"
-      @click="toggleStuff(item)"
+      @click="toggleStuff(item, 'vegetable')"
     >
       <span v-if="item.emoji" class="inline-flex">{{ item.emoji }}</span>
       <span v-else-if="item.image" class="inline-flex">
@@ -70,7 +100,7 @@ const toggleStuff = (item: StuffItem) => {
     <MeatTag
       v-for="item, i in meat" :key="i"
       :active="curStuff.includes(item.name)"
-      @click="toggleStuff(item)"
+      @click="toggleStuff(item, 'meat')"
     >
       <span>{{ item.emoji }}</span>
       <span m="l-1">
@@ -87,7 +117,7 @@ const toggleStuff = (item: StuffItem) => {
     <StapleTag
       v-for="item, i in staple" :key="i"
       :active="curStuff.includes(item.name)"
-      @click="toggleStuff(item)"
+      @click="toggleStuff(item, 'staple')"
     >
       <span>{{ item.emoji }}</span>
       <span m="l-1">
@@ -104,7 +134,7 @@ const toggleStuff = (item: StuffItem) => {
     <ToolTag
       v-for="item, i in tools" :key="i"
       :active="curTool === item.name"
-      @click="curTool === item.name ? curTool = '' : curTool = item.name"
+      @click="clickTool(item)"
     >
       <span v-if="item.emoji" class="inline-flex">{{ item.emoji }}</span>
       <span v-else-if="item.icon" class="inline-flex">
diff --git a/src/components/DishTag.vue b/src/components/DishTag.vue
index 081e669..ddaa1c4 100644
--- a/src/components/DishTag.vue
+++ b/src/components/DishTag.vue
@@ -1,8 +1,21 @@
 <script lang="ts" setup>
+import { useGtm } from '@gtm-support/vue-gtm'
 import type { RecipeItem } from '~/types'
 defineProps<{
   dish: RecipeItem
 }>()
+
+const gtm = useGtm()
+
+const triggerGtm = (val: string) => {
+  gtm?.trackEvent({
+    event: 'recipe',
+    category: 'dish',
+    action: 'click',
+    label: '跳转菜谱',
+    value: val,
+  })
+}
 </script>
 
 <template>
@@ -10,6 +23,7 @@ defineProps<{
     :href="dish.link" target="_blank" class="tag rounded" p="x-2"
     border="~ blue-200 dark:blue-800"
     bg="blue-300 opacity-20"
+    @click="triggerGtm(dish.name)"
   >
     <span text="sm blue-700 dark:blue-200">{{ dish.name }}</span>
   </a>