From 0560c179cc3d6abb10f39cb430beff121721840a Mon Sep 17 00:00:00 2001
From: rdmclin2 <rdmclin2@gmail.com>
Date: Mon, 14 Oct 2024 22:10:44 +0800
Subject: [PATCH] chore: add google analytics

---
 package.json                        |  1 +
 src/app/chat/ChatInfo/index.tsx     | 11 +++++------
 src/app/layout.tsx                  |  2 +-
 src/components/Analytics/Google.tsx |  5 +++++
 src/components/Analytics/Goolge.tsx |  5 +++++
 src/components/Analytics/Vercel.tsx |  5 +++++
 src/components/Analytics/index.tsx  | 13 +++++++++++++
 7 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Analytics/Google.tsx
 create mode 100644 src/components/Analytics/Goolge.tsx
 create mode 100644 src/components/Analytics/Vercel.tsx
 create mode 100644 src/components/Analytics/index.tsx

diff --git a/package.json b/package.json
index 20c54aec..22e9ebd6 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@lobehub/icons": "^1.34.0",
     "@lobehub/tts": "^1.25.1",
     "@lobehub/ui": "^1.151.0",
+    "@next/third-parties": "^14.2.15",
     "@pixiv/three-vrm": "2.1.2",
     "@pixiv/three-vrm-core": "2.1.2",
     "@react-spring/web": "^9.7.4",
diff --git a/src/app/chat/ChatInfo/index.tsx b/src/app/chat/ChatInfo/index.tsx
index eafa99e6..d66256f0 100644
--- a/src/app/chat/ChatInfo/index.tsx
+++ b/src/app/chat/ChatInfo/index.tsx
@@ -11,15 +11,14 @@ import { Flexbox } from 'react-layout-kit';
 import { CHAT_HEADER_HEIGHT, CHAT_INFO_MAX_WIDTH, CHAT_INFO_WIDTH } from '@/constants/token';
 import { useGlobalStore } from '@/store/global';
 
-import BackGround from './BackGroundList';
-// import ChatList from './ChatList';
-import DanceList from './DanceList';
-import MotionList from './MotionList';
-import PostureList from './PostureList';
-import StageList from './StageList';
 import { Tab } from './type';
 
+const BackGround = dynamic(() => import('./BackGroundList'), { ssr: false });
+const DanceList = dynamic(() => import('./DanceList'), { ssr: false });
+const MotionList = dynamic(() => import('./MotionList'), { ssr: false });
 const ChatList = dynamic(() => import('./ChatList'), { ssr: false });
+const PostureList = dynamic(() => import('./PostureList'), { ssr: false });
+const StageList = dynamic(() => import('./StageList'), { ssr: false });
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c20a23d8..0e7f1927 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
-import { Analytics } from '@vercel/analytics/react';
 import { PropsWithChildren } from 'react';
 
+import Analytics from '@/components/Analytics';
 import NProgress from '@/components/NProgress';
 import Layout from '@/layout';
 
diff --git a/src/components/Analytics/Google.tsx b/src/components/Analytics/Google.tsx
new file mode 100644
index 00000000..108bdb1b
--- /dev/null
+++ b/src/components/Analytics/Google.tsx
@@ -0,0 +1,5 @@
+import { GoogleAnalytics as GA } from '@next/third-parties/google';
+
+const GoogleAnalytics = () => <GA gaId={process.env.GOOGLE_ANALYTICS_MEASUREMENT_ID!} />;
+
+export default GoogleAnalytics;
diff --git a/src/components/Analytics/Goolge.tsx b/src/components/Analytics/Goolge.tsx
new file mode 100644
index 00000000..108bdb1b
--- /dev/null
+++ b/src/components/Analytics/Goolge.tsx
@@ -0,0 +1,5 @@
+import { GoogleAnalytics as GA } from '@next/third-parties/google';
+
+const GoogleAnalytics = () => <GA gaId={process.env.GOOGLE_ANALYTICS_MEASUREMENT_ID!} />;
+
+export default GoogleAnalytics;
diff --git a/src/components/Analytics/Vercel.tsx b/src/components/Analytics/Vercel.tsx
new file mode 100644
index 00000000..c2e42896
--- /dev/null
+++ b/src/components/Analytics/Vercel.tsx
@@ -0,0 +1,5 @@
+import { Analytics } from '@vercel/analytics/react';
+
+const VercelAnalytics = () => <Analytics />;
+
+export default VercelAnalytics;
diff --git a/src/components/Analytics/index.tsx b/src/components/Analytics/index.tsx
new file mode 100644
index 00000000..cfe63f38
--- /dev/null
+++ b/src/components/Analytics/index.tsx
@@ -0,0 +1,13 @@
+import Google from './Goolge';
+import Vercel from './Vercel';
+
+const Analytics = () => {
+  return (
+    <>
+      {<Vercel />}
+      {<Google />}
+    </>
+  );
+};
+
+export default Analytics;