feat: update google analysis

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",

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',

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',

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

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"