[NDD-150] 구글 애널리틱스 설정 완료 (0.5h/1h) (#48)

* chore: ga 설정을 위해 react-ga4 종속성 추가 * chore: env파일 사용을 위한 웹팩 플러그인 추가 * feat: Google Analytics 최소 설정 완료
boostcampwm2023 · Nov 15, 2023 · 0518004 · 0518004
1 parent 143d912
commit 0518004
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 0 deletions.
diff --git a/FE/package-lock.json b/FE/package-lock.json
diff --git a/FE/package.json b/FE/package.json
@@ -20,6 +20,7 @@
     "axios": "^1.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-router-dom": "^6.18.0",
     "recoil": "^0.7.7"
   },
@@ -36,6 +37,7 @@
     "@typescript-eslint/parser": "^6.9.1",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
+    "dotenv-webpack": "^8.0.1",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",

diff --git a/FE/src/index.tsx b/FE/src/index.tsx
@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+import ReactGA from 'react-ga4';
 import { worker } from '@/mocks/browser';
 import App from '@/App';
 
@@ -9,6 +10,11 @@ async function deferRender() {
   return worker.start();
 }
 
+//GA 추적 태그 설정
+if (process.env.REACT_APP_GTAG_ID) {
+  ReactGA.initialize(process.env.REACT_APP_GTAG_ID);
+}
+
 deferRender()
   .then(() => {
     const rootElement = document.getElementById('root');

diff --git a/FE/webpack.config.js b/FE/webpack.config.js
@@ -2,6 +2,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
+const Dotenv = require('dotenv-webpack');
 
 module.exports = {
   mode: process.env.production === 'true' ? 'production' : 'development',
@@ -44,6 +45,7 @@ module.exports = {
     new CopyPlugin({
       patterns: [{ from: 'public/mockServiceWorker.js', to: '' }],
     }),
+    new Dotenv(),
   ],
   module: {
     rules: [