Merge branch 'main' of https://github.com/EveryAnalytics/web-analytic…

…s-handbook into main
Leehaeun0 · Aug 21, 2021 · dc8a66d · dc8a66d
2 parents 94b81db + 8fe9527
commit dc8a66d
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -3,9 +3,18 @@
 개발자를 위한 웹 사용자 데이터 분석 핸드북
 https://everyanalytics.github.io/web-analytics-handbook/
 
-## 개발 명령어
+## 환경 설정
 
-```console
+1. `.env`파일 추가
+
+```
+REACT_APP_GA_TRACKING_ID=트래킹아이디를적으세요.
+```
+
+
+## Installation
+
+```bash
 # 의존성 설치
 yarn install
 
@@ -16,5 +25,17 @@ yarn start
 yarn build
 
 # 배포
-GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+GIT_USER=<Your GitHub Username>
+USE_SSH=true
+yarn deploy
 ```
+## 구성
+
+1. 📚 핸드북
+2. 💡 react-anlytics-provider
+3. 👾 블로그
+4. 🙋🏻 용어사전
+
+### ❗️[용어사전](https://everyanalytics.github.io/web-analytics-handbook/wiki) 네이밍 규칙
+- `${한글이름} (${영어이름})` 으로 표기
+- 복수인 경우 `,` 로 구분  `ex. 측정기준 (Dimension), 측정항목 (Metrics)`
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -1,6 +1,8 @@
 const lightCodeTheme = require("prism-react-renderer/themes/github");
 const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
+const PLUGINS_WEBPACK_CONFIGURE_PATH = './src/plugins/webpack-configure/index.ts';
+
 const TITLE = "Web Analytics Handbook";
 
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
@@ -115,4 +117,7 @@ module.exports = {
       },
     ],
   ],
+  plugins: [
+    PLUGINS_WEBPACK_CONFIGURE_PATH,
+  ]
 };
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "@types/react": "^17.0.16",
     "@types/react-helmet": "^6.1.2",
     "@types/react-router-dom": "^5.1.8",
+    "dotenv-webpack": "^7.0.3",
     "babel-plugin-module-resolver": "^4.1.0",
     "typescript": "^4.3.5",
     "@typescript-eslint/eslint-plugin": "^4.29.1",

diff --git a/src/plugins/webpack-configure/index.ts b/src/plugins/webpack-configure/index.ts
@@ -0,0 +1,22 @@
+const Dotenv = require("dotenv-webpack");
+
+const DOTENV_DEFAULT_OPTIONS = {
+  path: "./.env",
+  safe: true,
+  allowEmptyValues: false,
+  systemvars: false,
+  silent: false,
+  expand: false,
+  defaults: false,
+};
+
+module.exports = () => {
+  return {
+    name: 'evn-setting',
+    configureWebpack(config, isServer) {
+      return {
+        plugins: [new Dotenv(DOTENV_DEFAULT_OPTIONS)],
+      };
+    },
+  };
+};
diff --git a/src/theme/Root.js b/src/theme/Root.js
diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+import Head from "@docusaurus/Head";
+
+const GA_TRACKING_ID = process.env.REACT_APP_GA_TRACKING_ID;
+
+const createInitializeGA = (GA_TRACKING_ID) => {
+  if(GA_TRACKING_ID === undefined || GA_TRACKING_ID === "") {
+    return `console.warn("GA가 초기화 실패되었습니다. 'GA_TRACKING_ID'가 정의되지 않았습니다.");`;
+  }
+  return `
+    console.info("✅GA가 초기화 되었습니다.")
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+    gtag("config", "${GA_TRACKING_ID}");
+  `
+}
+
+const createGtagPath = (GA_TRACKING_ID) => {
+  if(GA_TRACKING_ID === undefined) {
+    console.warn(`[web-analytics-handbook] Warnning Can't create gtag path. Because "GA_TRACKING_ID" is not defined.`);
+    return "";
+  }
+  return `https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`;
+}
+
+const gtagPath = createGtagPath(GA_TRACKING_ID);
+const initializeGA = createInitializeGA(GA_TRACKING_ID);
+
+function Root({ children }) {
+  return (
+    <>
+      <div>
+        <Head>
+          <script
+            async
+            src={`${gtagPath}`}
+          />
+          <script>{initializeGA}</script>
+        </Head>
+        {children}
+      </div>
+    </>
+  );
+}
+
+export default Root;
diff --git a/wiki.json b/wiki.json
@@ -86,5 +86,17 @@
   {
     "name": "태그 (Tag)",
     "description": "태그를 통해 외부 링크나 GA 이벤트 등을 추적할 수 있다."
+  },
+  {
+    "name": "유료 검색 (Paid search)",
+    "description": "검색광고를 통해 획득한 유입 (광고를 통한 유입도 집계에 포함)"
+  },
+  {
+    "name": "자연 검색 (Organic search)",
+    "description": "광고 외의 유입으로 사용자가 사이트로 직접 유입된 상황 ex) 검색을 통한 유입"
+  },
+  {
+    "name": "기여 (Attribution)",
+    "description": "전환까지 도달한 유입 경로와 광고, 모든 접속 이력 분석을 통해 각각 전환 달성 성과에 대한 기여도를 측정하는 프로세스."
   }
 ]