Setup google analytics

velopert · velopert · commit 8d5218dab698 · 2020-02-10T02:28:25.000+09:00
diff --git a/public/index.html b/public/index.html
@@ -29,6 +29,16 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125599395-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'UA-125599395-1');
+    </script>
+
     <title>React App</title>
   </head>
   <body>
diff --git a/src/containers/base/Core.tsx b/src/containers/base/Core.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import OpaqueLayer from '../../components/common/OpaqueLayer';
 import AuthModalContainer from '../auth/AuthModalContainer';
@@ -8,6 +8,8 @@ import useUserLoader from './hooks/useUserLoader';
 import GlobalStyles from '../../GlobalStyles';
 import { ToastContainer, Flip } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { useHistory } from 'react-router-dom';
+import gtag from '../../lib/gtag';
 
 interface OwnProps {}
 interface StateProps {
@@ -19,6 +21,24 @@ type CoreProps = OwnProps & StateProps & DispatchProps;
 const Core: React.FC<CoreProps> = ({ layer }) => {
   useUserLoader();
 
+  const history = useHistory();
+
+  useEffect(() => {
+    const unregister = history.listen(location => {
+      // adds setTimeout for page title sync
+      // is there any better solution?
+      setTimeout(() => {
+        gtag('config', 'UA-125599395-1', {
+          page_path: location.pathname + location.search,
+        });
+      }, 1000);
+    });
+
+    return () => {
+      unregister();
+    };
+  }, [history]);
+
   return (
     <>
       <OpaqueLayer visible={layer} />
diff --git a/src/lib/gtag.ts b/src/lib/gtag.ts
@@ -0,0 +1,6 @@
+export default function gtag(...params: any[]) {
+  if (typeof window === 'undefined') return;
+  const { gtag } = window as any;
+  if (!gtag) return;
+  gtag(...params);
+}
diff --git a/src/server/Html.tsx b/src/server/Html.tsx
@@ -65,6 +65,19 @@ function Html({
           />
         ))}
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=UA-125599395-1"
+        ></script>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+        
+          gtag('config', 'UA-125599395-1');`,
+          }}
+        ></script>
       </head>
       <body>
         <div id="root" dangerouslySetInnerHTML={{ __html: content }}></div>
