feat: google analytics 4 (#125)

* feat: google analytics 4

* chore: update `next@14` and install `@next/third-parties`

package.json

@@ -23,12 +23,13 @@
   },
   "dependencies": {
     "@giscus/react": "^3.0.0",
+    "@next/third-parties": "^14.2.16",
     "@vercel/analytics": "^1.3.2",
     "@vercel/speed-insights": "^1.0.14",
     "gray-matter": "^4.0.3",
     "html-react-parser": "^5.1.18",
     "katex": "^0.16.11",
-    "next": "^14.2.15",
+    "next": "^14.2.16",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",

src/app/layout.jsx

@@ -1,5 +1,6 @@
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
+import { GoogleAnalytics } from '@next/third-parties/google';
 
 import ThemeProvider from '@/components/common/ThemeProvider';
 import ThemeScript from '@/components/common/ThemeScript';
@@ -16,6 +17,7 @@ import Profile from '@/components/aside/Profile/Profile';
 import DarkModeToggle from '@/components/header/DarkModeToggle';
 import Title from '@/components/header/Title';
 
+import { GOOGLE_GA_ID } from '@/constants';
 import { getGithubUsers } from '@/utils/fetch';
 
 import '@/styles/global.scss';
@@ -52,6 +54,7 @@ export default function RootLayout({ children }) {
 
           <Analytics />
           <SpeedInsights />
+          <GoogleAnalytics gaId={GOOGLE_GA_ID} />
         </Body>
       </ThemeProvider>
     </html>

src/constants/index.js

@@ -15,3 +15,6 @@ export const PATH_DOCS = join(process.cwd(), 'src', 'posts', 'docs');
 // Extension
 export const EXT_MD = '.md';
 export const EXT_MD_REGEXP = new RegExp(`${EXT_MD}$`, 'i');
+
+// Google
+export const GOOGLE_GA_ID = 'G-2G4YHTE048';