Refactor: modify GA script && preconnect assets

7-7-2 · Jun 3, 2024 · ab27472 · ab27472
1 parent b1a4507
commit ab27472
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 71 deletions.
diff --git a/index.html b/index.html
@@ -29,6 +29,12 @@
       type="font/woff2"
       crossorigin="anonymous"
       href="https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2" />
+    <link
+      rel="preload"
+      href="/png/coffee_mainimg.png" />
+    <link
+      rel="preconnect"
+      href="https://ddocker.kro.kr" />
 
     <link
       rel="manifest"
@@ -175,6 +181,18 @@
       rel="apple-touch-startup-image"
       href="./public/assets/apple-splash-1136-640.jpg"
       media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" />
+
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-HXVP19S89G"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', 'G-HXVP19S89G');
+    </script>
   </head>
   <body>
     <script>

diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "@prerenderer/rollup-plugin": "^0.3.12",
     "@tanstack/react-query": "^5.24.1",
     "@types/event-source-polyfill": "^1.0.5",
+    "@types/gtag.js": "^0.0.20",
     "@types/node": "^20.10.4",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
@@ -47,12 +48,10 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "imagemin-gifsicle": "^7.0.0",
     "imagemin-mozjpeg": "^10.0.0",
     "imagemin-pngquant": "^9.0.2",
     "imagemin-svgo": "^10.0.1",
     "puppeteer": "^22.10.0",
-    "react-ga4": "^2.1.0",
     "rollup-plugin-visualizer": "^5.10.0",
     "typescript": "^5.3.2",
     "vite": "^5.0.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/hooks/google/useTrackRoute.ts b/src/hooks/google/useTrackRoute.ts
@@ -1,25 +1,19 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import ReactGA from 'react-ga4';
 
 const useTrackRoute = () => {
   const location = useLocation();
-  const [initialized, setInitialized] = useState(false);
+  const { NODE_ENV } = import.meta.env;
+  const isPro = NODE_ENV === 'production';
 
   useEffect(() => {
-    if (import.meta.env.VITE_GA) {
-      ReactGA.initialize(import.meta.env.VITE_GA);
-      setInitialized(true);
-    }
-  }, []);
-
-  // location 변경 감지시 pageview 이벤트 전송
-  useEffect(() => {
-    if (initialized) {
-      ReactGA.set({ page: location.pathname });
-      ReactGA.send('pageview');
-    }
-  }, [initialized, location]);
+    if (!isPro) return;
+    window.gtag('event', 'pageview', {
+      page_path: location.pathname + location.search + location.hash,
+      page_search: location.search,
+      page_hash: location.hash
+    });
+  }, [location]);
 };
 
 export default useTrackRoute;
diff --git a/src/main.tsx b/src/main.tsx
@@ -9,16 +9,8 @@ import { RouterProvider } from 'react-router-dom';
 import { router } from '@/pages/Router';
 import './main.css';
 import '/styled-system/styles.css';
-import ReactGA from 'react-ga4';
 import { HelmetProvider } from 'react-helmet-async';
 
-const { NODE_ENV } = import.meta.env;
-const isPro = NODE_ENV === 'production';
-
-if (isPro && import.meta.env.VITE_GA) {
-  ReactGA.initialize(import.meta.env.VITE_GA);
-}
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

diff --git a/vite.config.ts b/vite.config.ts
@@ -5,7 +5,6 @@ import tsconfigpaths from 'vite-tsconfig-paths';
 import removeConsole from 'vite-plugin-remove-console';
 import imageminMozjpeg from 'imagemin-mozjpeg';
 import imageminPngQuant from 'imagemin-pngquant';
-import imageminGifSicle from 'imagemin-gifsicle';
 import viteImagemin from '@vheemstra/vite-plugin-imagemin';
 import imageminSvgo from 'imagemin-svgo';
 import prerender from '@prerenderer/rollup-plugin';
@@ -60,9 +59,20 @@ export default defineConfig({
       plugins: {
         jpg: imageminMozjpeg(),
         png: imageminPngQuant(),
-        gif: imageminGifSicle(),
         svg: imageminSvgo()
       }
     })
-  ]
+  ],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: id => {
+          if (id.indexOf('node_modules') !== -1) {
+            const module = id.split('node_modules/').pop().split('/')[0];
+            return `vendor-${module}`;
+          }
+        }
+      }
+    }
+  }
 });