From 353c0fa169d7428ea735cf36bef9341cd4d24deb Mon Sep 17 00:00:00 2001
From: Jaewook Ahn <dev.jaewook@gmail.com>
Date: Tue, 9 Aug 2022 21:34:42 +0900
Subject: [PATCH] Update analytics usage

- remove option selection event
- remove analytics props from ClickToCopyText
- rename ga to gtag under window type
- refactor config event usage
---
 src/App.tsx                              |  8 +++-----
 src/components/AddressList/index.tsx     | 16 ++++------------
 src/components/ClickToCopyText/index.tsx |  6 ++----
 src/index.tsx                            |  9 +++++----
 src/react-app-env.d.ts                   |  2 +-
 5 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 76cde14..8b5e668 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -131,7 +131,9 @@ export const App = (props: Props) => {
         setLoading(true);
         setAddressData([]);
 
-        window.ga("send", "event", "address", "search", searchValue);
+        window.gtag("event", "search", {
+            search_term: searchValue,
+        });
         address.search({
             countPerPage: "20",
             currentPage: "1",
@@ -162,21 +164,18 @@ export const App = (props: Props) => {
             switch (type) {
                 case "eng":
                     setShowEngAddr(!showEngAddr);
-                    window.ga("send", "event", "option", !showEngAddr ? "on" : "off", "영문주소 표시");
                     await settings?.updateSettings({
                         searchResult: { showEng: !showEngAddr },
                     });
                     break;
                 case "road":
                     setShowRoadAddr(!showRoadAddr);
-                    window.ga("send", "event", "option", !showRoadAddr ? "on" : "off", "도로명주소 표시");
                     await settings?.updateSettings({
                         searchResult: { showRoad: !showRoadAddr },
                     });
                     break;
                 case "legacy":
                     setShowLegacyAddr(!showLegacyAddr);
-                    window.ga("send", "event", "option", !showLegacyAddr ? "on" : "off", "지번주소 표시");
                     await settings?.updateSettings({
                         searchResult: { showLegacy: !showLegacyAddr },
                     });
@@ -200,7 +199,6 @@ export const App = (props: Props) => {
         setLoading(true);
         const nextPage = (Number.parseInt(address.previousSearchKey?.currentPage!) + 1).toString();
 
-        window.ga("send", "event", "address", "search", "추가 데이터 로드", Number.parseInt(nextPage));
         address.search({
             ...address.previousSearchKey!,
             currentPage: nextPage,
diff --git a/src/components/AddressList/index.tsx b/src/components/AddressList/index.tsx
index 9f8acba..295a7d9 100644
--- a/src/components/AddressList/index.tsx
+++ b/src/components/AddressList/index.tsx
@@ -50,33 +50,25 @@ export const AddressList = (props: Props) => {
                     <div>
                         <Typography.Paragraph className="addr-label">우편번호:</Typography.Paragraph>
                         <div>
-                            <ClickToCopyText analytics="우편번호">
-                                {row.zipNo}
-                            </ClickToCopyText>
+                            <ClickToCopyText>{row.zipNo}</ClickToCopyText>
                         </div>
                     </div>
                     {showRoadAddr ? <div>
                         <Typography.Paragraph className="addr-label">도로명주소:</Typography.Paragraph>
                         <div>
-                            <ClickToCopyText analytics="도로명주소">
-                                {row.roadAddr}
-                            </ClickToCopyText>
+                            <ClickToCopyText>{row.roadAddr}</ClickToCopyText>
                         </div>
                     </div> : null}
                     {showLegacyAddr ? <div>
                         <Typography.Paragraph className="addr-label">지번주소:</Typography.Paragraph>
                         <div>
-                            <ClickToCopyText analytics="지번주소">
-                                {row.jibunAddr}
-                            </ClickToCopyText>
+                            <ClickToCopyText>{row.jibunAddr}</ClickToCopyText>
                         </div>
                     </div> : null}
                     {showEngAddr ? <div>
                         <Typography.Paragraph className="addr-label">영문주소:</Typography.Paragraph>
                         <div>
-                            <ClickToCopyText analytics="영문주소">
-                                {row.engAddr}
-                            </ClickToCopyText>
+                            <ClickToCopyText>{row.engAddr}</ClickToCopyText>
                         </div>
                     </div> : null}
                 </Collapse.Panel>
diff --git a/src/components/ClickToCopyText/index.tsx b/src/components/ClickToCopyText/index.tsx
index 2e37efb..7b06b33 100644
--- a/src/components/ClickToCopyText/index.tsx
+++ b/src/components/ClickToCopyText/index.tsx
@@ -15,18 +15,16 @@ import "./ClickToCopyText.css";
 
 interface ClickToCopyTextProps {
     children: string;
-    analytics?: "우편번호" | "도로명주소" | "지번주소" | "영문주소";
 }
 
 export const ClickToCopyText = (props: ClickToCopyTextProps) => {
-    const { children, analytics } = props;
+    const { children } = props;
     const [copied, setCopied] = useState(false);
 
     const handleCopyClick = useCallback(() => {
         setCopied(true);
         copy(children);
-        window.ga("send", "event", "address", "copy", `${analytics} 복사`);
-    }, [analytics, children]);
+    }, [children]);
 
     const handleVisibleChange = useCallback((visible: boolean) => {
         if (!visible) {
diff --git a/src/index.tsx b/src/index.tsx
index f2573cf..3709d38 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -19,13 +19,14 @@ window.__ENV__ = {
 };
 
 if (isProduction()) {
-    window.ga("create", "UA-108816190-2", "auto");
-    window.ga("set", "checkProtocolTask", null);
-    window.ga("send", "pageview", "/");
+    window.gtag("config", "G-NJFP4YL0X3", {
+        allow_google_signals: false,
+        allow_ad_personalization_signals: false,
+    });
     Sentry.init({ dsn: "https://6b96accd47ff467da8394a51da93d909@o415139.ingest.sentry.io/5305794" });
 } else {
     console.info("Google Analytics disabled because runtime does not running in production.");
-    window.ga = function() {};
+    window.gtag = function() {};
 }
 
 let settings = null;
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 3a25e9c..07eb038 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -3,5 +3,5 @@ interface Window {
     __ENV__: {
         NODE_ENV: string;
     };
-    ga: any;
+    gtag: Function;
 }