Add analytics

.env.development.local

@@ -0,0 +1 @@
+REACT_APP_SECRET_ENCRYPTION_KEY=123123

.gitignore

@@ -14,7 +14,6 @@
 # misc
 .DS_Store
 .env.local
-.env.development.local
 .env.test.local
 .env.production.local
 .env

package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@analytics/google-analytics": "0.5.0",
+    "analytics": "0.5.5",
     "axios": "^0.19.0",
     "fingerprintjs2": "^2.1.0",
     "framer-motion": "^1.6.12",
+    "history": "5.0.0",
     "js-cookie": "^2.2.1",
     "open-graph-scraper": "^3.6.2",
     "polished": "^3.4.1",

src/App.js

@@ -1,7 +1,7 @@
 import { hot } from "react-hot-loader/root";
 import React, { useState, useEffect } from "react";
 import { createGlobalStyle, ThemeProvider } from "styled-components";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { Router, Route, Switch } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import socketIOClient from "socket.io-client";
 import ReactTooltip from "react-tooltip";
@@ -26,6 +26,8 @@ import Footer from "./components/Footer";
 
 import theme from "./utils/theme";
 import { getFingerprint, getIp, getUserInfo } from "./utils/fingerprint";
+import { history } from "./utils/history";
+import "./utils/analytics";
 
 import {
   setFingerprint,
@@ -62,7 +64,7 @@ function App() {
 
   return (
     <ThemeProvider theme={theme}>
-      <Router>
+      <Router history={history}>
         <GlobalStyle />
         {/* <FloatingHeader /> */}
         {/* <PolicyLabel /> TODO: add this again*/}

src/components/HeaderBanner.js

@@ -84,31 +84,6 @@ const HeaderBanner = ({}) => {
         </h2>
 
         <Row>
-          <Button
-            variant="primary"
-            style={{
-              right: "8px",
-              top: "8px",
-              padding: "11px",
-              fontSize: "12px",
-              margin: 0,
-              height: "auto",
-              color: "#fff",
-              display: "flex",
-              alignItems: "center",
-              border: "2px solid " + theme.colors.primary[500]
-            }}
-            onClick={() =>
-              window.open("https://www.buymeacoffee.com/dmraptis", "_blank")
-            }
-          >
-            <FiAward
-              style={{ marginRight: ".5rem", strokeWidth: "2.5px" }}
-              size={16}
-            />
-            Support DesignValley
-          </Button>
-
           <Button
             variant="primary"
             style={{

src/utils/analytics.js

@@ -0,0 +1,27 @@
+import Analytics from "analytics";
+import googleAnalyticsPlugin from "@analytics/google-analytics";
+import { history } from "./history";
+
+// Initialize analytics and plugins
+// Documentation: https://getanalytics.io
+const analytics = Analytics({
+  debug: process.env.NODE_ENV !== "production",
+  plugins: [
+    googleAnalyticsPlugin({
+      trackingId: "UA-171487599-6",
+    }),
+  ],
+});
+
+// Track initial pageview
+if (typeof window !== "undefined") {
+  analytics.page();
+}
+
+// Track pageview on route change
+history.listen(() => {
+  console.log('tracking')
+  analytics.page();
+});
+
+export default analytics;

src/utils/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from "history";
+
+export const history = createBrowserHistory();