From 31c4dd4e293b131a4e8c0aad7043b643efe31883 Mon Sep 17 00:00:00 2001
From: Kai <me@kaiyi.cool>
Date: Tue, 10 Jun 2025 11:34:52 -0700
Subject: [PATCH] feat: update google analysis

---
 package.json                                    |  1 +
 src/components/EnhancedPromotionModal/index.tsx |  6 +++---
 src/pages/Gallery-N/DictRequest.tsx             |  6 +++---
 src/utils/trackEvent.ts                         | 14 ++++++++++++++
 yarn.lock                                       |  5 +++++
 5 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/trackEvent.ts

diff --git a/package.json b/package.json
index 5353510b..3dd4fa1b 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "@types/canvas-confetti": "^1.6.0",
     "@types/echarts": "^4.9.18",
     "@types/file-saver": "^2.0.5",
+    "@types/gtag.js": "^0.0.20",
     "@types/howler": "^2.2.3",
     "@types/mixpanel-browser": "^2.38.1",
     "@types/node": "18.14.6",
diff --git a/src/components/EnhancedPromotionModal/index.tsx b/src/components/EnhancedPromotionModal/index.tsx
index c1348b2a..3d7d1442 100644
--- a/src/components/EnhancedPromotionModal/index.tsx
+++ b/src/components/EnhancedPromotionModal/index.tsx
@@ -1,7 +1,7 @@
 import noop from '../../utils/noop'
 import { hasSeenEnhancedPromotionAtom } from '@/store'
+import { trackEvent } from '@/utils/trackEvent'
 import { Dialog, Transition } from '@headlessui/react'
-import { track } from '@vercel/analytics'
 import { useAtom } from 'jotai'
 import type React from 'react'
 import { Fragment, useEffect, useState } from 'react'
@@ -24,7 +24,7 @@ const EnhancedPromotionModal: React.FC = () => {
   }, [hasSeenPromotion])
 
   const handleTryNow = () => {
-    track('promotion_event', {
+    trackEvent('promotion_event', {
       from: 'promotion_modal',
       action: 'open',
       action_detail: 'promotion_modal_open',
@@ -36,7 +36,7 @@ const EnhancedPromotionModal: React.FC = () => {
   }
 
   const handleDismiss = () => {
-    track('promotion_event', {
+    trackEvent('promotion_event', {
       from: 'promotion_modal',
       action: 'close',
       action_detail: 'promotion_modal_close',
diff --git a/src/pages/Gallery-N/DictRequest.tsx b/src/pages/Gallery-N/DictRequest.tsx
index ac6e7efb..e6c782c7 100644
--- a/src/pages/Gallery-N/DictRequest.tsx
+++ b/src/pages/Gallery-N/DictRequest.tsx
@@ -1,5 +1,5 @@
 import InfoPanel from '@/components/InfoPanel'
-import { track } from '@vercel/analytics'
+import { trackEvent } from '@/utils/trackEvent'
 import { useCallback, useState } from 'react'
 import IconBook2 from '~icons/tabler/book-2'
 
@@ -8,7 +8,7 @@ export default function DictRequest() {
 
   const onOpenPanel = useCallback(() => {
     setShowPanel(true)
-    track('promotion_event', {
+    trackEvent('promotion_event', {
       from: 'dict_request_button',
       action: 'open',
       action_detail: 'dict_request_button_open',
@@ -17,7 +17,7 @@ export default function DictRequest() {
 
   const onClosePanel = useCallback(() => {
     setShowPanel(false)
-    track('promotion_event', {
+    trackEvent('promotion_event', {
       from: 'dict_request_panel',
       action: 'close',
       action_detail: 'dict_request_panel_close',
diff --git a/src/utils/trackEvent.ts b/src/utils/trackEvent.ts
new file mode 100644
index 00000000..0450d9f8
--- /dev/null
+++ b/src/utils/trackEvent.ts
@@ -0,0 +1,14 @@
+import { track } from '@vercel/analytics'
+
+export const trackEvent = (event: string, properties: Record<string, string>) => {
+  track(event, properties)
+
+  // @ts-expect-error gtag is not defined in the window object
+  if (typeof window !== 'undefined' && window?.gtag) {
+    try {
+      window.gtag('event', event, { ...properties })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 5542bd07..bba3a823 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2368,6 +2368,11 @@
   resolved "https://registry.npmmirror.com/@types/file-saver/-/file-saver-2.0.5.tgz"
   integrity sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==
 
+"@types/gtag.js@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.npmjs.org/@types/gtag.js/-/gtag.js-0.0.20.tgz#e47edabb4ed5ecac90a079275958e6c929d7c08a"
+  integrity sha512-wwAbk3SA2QeU67unN7zPxjEHmPmlXwZXZvQEpbEUQuMCRGgKyE1m6XDuTUA9b6pCGb/GqJmdfMOY5LuDjJSbbg==
+
 "@types/history@^4.7.11":
   version "4.7.11"
   resolved "https://registry.npmmirror.com/@types/history/-/history-4.7.11.tgz"