Use analyticsProvider

5 years ago · ce55f1ae1e
6 changed files with 65 additions and 32 deletions
--- a/public/index.html
+++ b/public/index.html
@ -7,20 +7,16 @@
    <meta name="Description" content="Personal Website of Garrit Franke" />
    <title>Welcome</title>

+    <!-- Google Analytics -->
+    <script async src="https://www.google-analytics.com/analytics.js"></script>
+    <!-- End Google Analytics -->
+
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-122968527-1"
    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-
-      gtag("config", "UA-122968527-1");
-    </script>
+    <script></script>
  </head>

  <body>
--- a/public/index.js
+++ b/public/index.js
@ -1,5 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "../src/App";
+import AnalyticsProvider from "../src/util/AnalyticsProvider";
+
+AnalyticsProvider.getInstance();

 ReactDOM.render(<App />, document.getElementById("root"));
--- a/src/components/NavBar/Navbar.js
+++ b/src/components/NavBar/Navbar.js
@ -1,8 +1,18 @@
 import React from "react";
 import "./Navbar.scss";
+import AnalyticsProvider from "../../util/AnalyticsProvider";
 const NavItem = ({ title, link }) => {
  return (
-    <div className="nav-item">
+    <div
+      className="nav-item"
+      onClick={() =>
+        AnalyticsProvider.getInstance().logEvent(
+          "Social Links",
+          "clicked",
+          link
+        )
+      }
+    >
      <a href={link} target="_blank">
        {title}
      </a>
--- a/src/components/skills/SkillCard/SkillCard.js
+++ b/src/components/skills/SkillCard/SkillCard.js
@ -2,10 +2,16 @@ import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faStar } from "@fortawesome/free-solid-svg-icons";
 import "./SkillCard.scss";
+import AnalyticsProvider from "../../../util/AnalyticsProvider";

 export default function SkillCard({ name, logo, rating }) {
  return (
-    <div className="card">
+    <div
+      className="card"
+      onClick={() =>
+        AnalyticsProvider.getInstance().logEvent("Skills", "clicked", name)
+      }
+    >
      <img className="skill-logo" src={logo} />
      <div className="text">{name}</div>
      <div className="star-container">
--- a/src/util/AnalyticsProvider.js
+++ b/src/util/AnalyticsProvider.js
@ -0,0 +1,39 @@
+export default class AnalyticsProvider {
+  static instance;
+
+  constructor() {
+    if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
+    } else {
+      window.ga =
+        window.ga ||
+        function() {
+          (ga.q = ga.q || []).push(arguments);
+        };
+      ga.l = +new Date();
+      ga("create", "UA-122968527-1", "auto");
+      ga("send", "pageview");
+
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "UA-122968527-1");
+    }
+  }
+  static getInstance() {
+    if (!AnalyticsProvider.instance) {
+      AnalyticsProvider.instance = new AnalyticsProvider();
+      // ... any one time initialization goes here ...
+    }
+    return AnalyticsProvider.instance;
+  }
+
+  logEvent(category, action, label) {
+    if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
+    } else {
+      ga("send", "event", category, action, label);
+    }
+  }
+}
--- a/src/util/AnalyticsProvider.ts
+++ b/src/util/AnalyticsProvider.ts
@ -1,21 +0,0 @@
-import { Analytics } from "analytics";
-import GoogleAnalyticsPlugin from "analytics-plugin-ga";
-
-export default class AnalyticsProvider {
-  private static instance: AnalyticsProvider;
-  public analytics: any;
-
-  private constructor() {
-    this.analytics = Analytics({
-      app: "garrit-franke",
-      plugins: [GoogleAnalyticsPlugin({ trackingId: "UA-122968527-1" })]
-    });
-  }
-  static getInstance() {
-    if (!AnalyticsProvider.instance) {
-      AnalyticsProvider.instance = new AnalyticsProvider();
-      // ... any one time initialization goes here ...
-    }
-    return AnalyticsProvider.instance;
-  }
-}