Add google analytics events

package-lock.json

@@ -2131,6 +2131,28 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "analytics": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/analytics/-/analytics-0.1.16.tgz",
+      "integrity": "sha512-Lvfh8zaSkX3TidDTZR+uURdqiinNwbbrr4iOtrS1tTWRbkc7ii5Pg6AaHwAES4pRafkaKREIC8uo+sJs8ysipw==",
+      "requires": {
+        "analytics-utils": "^0.1.0",
+        "redux": "^3.6.0"
+      }
+    },
+    "analytics-plugin-ga": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/analytics-plugin-ga/-/analytics-plugin-ga-0.1.5.tgz",
+      "integrity": "sha512-0j8cN9BKak+be1y0dX1eRKMRsHlT4/58/Y6r1kfLtE7sbk8MS8doqB+mO7KHzL9F/A1POFTQ2VicZVd2nVJM1w==",
+      "requires": {
+        "universal-analytics": "^0.4.20"
+      }
+    },
+    "analytics-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/analytics-utils/-/analytics-utils-0.1.0.tgz",
+      "integrity": "sha512-KbCT3zJihENfOMU7jluNw1kIDBNmW6DFZf9hPiME3uhu/gHQ3x7XthuoPFf0BK31EgkgYjUNcTqlalAts1nkMw=="
+    },
     "ansi-align": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
@@ -7774,6 +7796,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash.assign": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
@@ -10647,6 +10674,17 @@
         "strip-indent": "^1.0.1"
       }
     },
+    "redux": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
+      "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==",
+      "requires": {
+        "lodash": "^4.2.1",
+        "lodash-es": "^4.2.1",
+        "loose-envify": "^1.1.0",
+        "symbol-observable": "^1.0.3"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -12455,6 +12493,11 @@
         }
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -12759,6 +12802,12 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.3.tgz",
+      "integrity": "sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==",
+      "dev": true
+    },
     "uncss": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/uncss/-/uncss-0.16.2.tgz",
@@ -12905,6 +12954,31 @@
         "crypto-random-string": "^1.0.0"
       }
     },
+    "universal-analytics": {
+      "version": "0.4.20",
+      "resolved": "https://registry.npmjs.org/universal-analytics/-/universal-analytics-0.4.20.tgz",
+      "integrity": "sha512-gE91dtMvNkjO+kWsPstHRtSwHXz0l2axqptGYp5ceg4MsuurloM0PU3pdOfpb5zBXUvyjT4PwhWK2m39uczZuw==",
+      "requires": {
+        "debug": "^3.0.0",
+        "request": "^2.88.0",
+        "uuid": "^3.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
     "universalify": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz",

package.json

@@ -27,9 +27,12 @@
     "babel-core": "^6.26.3",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
-    "parcel-bundler": "^1.12.3"
+    "parcel-bundler": "^1.12.3",
+    "typescript": "^3.5.3"
   },
   "dependencies": {
+    "analytics": "^0.1.16",
+    "analytics-plugin-ga": "^0.1.5",
     "gh-pages": "^1.2.0",
     "node-sass": "^4.12.0",
     "particles.js": "^2.0.0",

src/Home/LinkItem.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import AnalyticsProvider from "../util/AnalyticsProvider";
 
 export default class LinkItem extends Component {
   constructor(props) {
@@ -14,7 +15,16 @@ export default class LinkItem extends Component {
   render() {
     return (
       <div className={this.className + " logo"}>
-        <a href={this.link} target="_blank">
+        <a
+          href={this.link}
+          target="_blank"
+          onClick={() =>
+            AnalyticsProvider.getInstance().analytics.track("pageVisited", {
+              pageName: this.description,
+              url: this.link
+            })
+          }
+        >
           <img
             className="animated fadeInUp logo"
             style={this.logoStyle}

src/util/AnalyticsProvider.ts

@@ -0,0 +1,21 @@
+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;
+  }
+}