Merge pull request #140 from dzcode-io/bugfix/139

🐞 fixed analytics bug

Author: ZibanPirate

frontend/src/apps/main/entry/index.pug

@@ -10,7 +10,6 @@ head(lang=lang)
         m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
       })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
       ga('create', "#{gaCode}", 'auto');
-      ga('send', 'pageview');
     //- Facebook Pixel Code
     script.
       !function(f,b,e,v,n,t,s)
@@ -21,7 +20,6 @@ head(lang=lang)
       t.src=v;s=b.getElementsByTagName(e)[0];
       s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');
       fbq('init', "#{fbpCode}");
-      fbq('track', 'PageView');
   //- Facebook Comments plugin
   meta(property="fb:app_id" content=fbAppCode)
 

frontend/src/apps/main/entry/index.tsx

@@ -1,6 +1,12 @@
 import "./style";
 import "react-toastify/dist/ReactToastify.css";
-import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
+import {
+  BrowserRouter,
+  Redirect,
+  Route,
+  Switch,
+  useLocation,
+} from "react-router-dom";
 import React, { Suspense, lazy } from "react";
 import Container from "@material-ui/core/Container";
 import CssBaseline from "@material-ui/core/CssBaseline";
@@ -10,6 +16,7 @@ import { Navbar } from "t9/apps/main/components/navbar";
 import { Provider } from "react-redux";
 import { Theme } from "t9/apps/main/components/theme";
 import { ToastContainer } from "react-toastify";
+import { getEnv } from "src/common/utils";
 import { mainStore } from "t9/apps/main/redux";
 import { render } from "react-dom";
 
@@ -18,38 +25,48 @@ const Articles = lazy(() => import("t9/apps/main/scenes/articles"));
 const Projects = lazy(() => import("t9/apps/main/scenes/projects"));
 const Learn = lazy(() => import("t9/apps/main/scenes/learn"));
 const Faq = lazy(() => import("t9/apps/main/scenes/faq"));
-
 const Contact = lazy(() => import("t9/apps/main/scenes/contact"));
 
+const env = getEnv();
+
 export const App = () => {
+  const location = useLocation();
+  React.useEffect(() => {
+    if (env !== "development") {
+      window.ga("set", "page", location.pathname);
+      window.ga("send", "pageview");
+      window.fbq("track", "PageView");
+    }
+  }, [location]);
+
   return (
     <Theme>
-      <BrowserRouter>
-        <Navbar />
-        <Container maxWidth="lg">
-          <ToastContainer />
-          <Suspense fallback={Loading}>
-            <Switch>
-              <Route path="/" exact component={Landing} />
-              <Route path="/Learn" component={Learn} />
-              <Route path="/Articles" component={Articles} />
-              <Route path="/Projects" component={Projects} />
-              <Route path="/Contact-Us" component={Contact} />
-              <Route path="/FAQ" component={Faq} />
-              <Route render={() => <Redirect to="/" />} />
-            </Switch>
-          </Suspense>
-        </Container>
-        <Footer />
-      </BrowserRouter>
+      <Navbar />
+      <Container maxWidth="lg">
+        <ToastContainer />
+        <Suspense fallback={Loading}>
+          <Switch>
+            <Route path="/" exact component={Landing} />
+            <Route path="/Learn" component={Learn} />
+            <Route path="/Articles" component={Articles} />
+            <Route path="/Projects" component={Projects} />
+            <Route path="/Contact-Us" component={Contact} />
+            <Route path="/FAQ" component={Faq} />
+            <Route render={() => <Redirect to="/" />} />
+          </Switch>
+        </Suspense>
+      </Container>
+      <Footer />
       <CssBaseline />
     </Theme>
   );
 };
 
 render(
   <Provider store={mainStore}>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </Provider>,
   document.getElementById("app-container"),
 );