Merge pull request linode#282 from hzoppetti/header-footer-10132020

[Update] Header - feature links now with GA

Author: hzoppetti

package.json

@@ -33,6 +33,7 @@
     "react": "^16.7.0",
     "react-clipboard.js": "^2.0.7",
     "react-dom": "^16.7.0",
+    "react-ga": "^3.1.2",
     "react-helmet": "^5.2.0",
     "react-markdown": "^4.0.8",
     "react-select": "^2.4.2",

src/components/2_molecules/navigation/communityFeatured.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Event } from "../tracking";
 
 const styles = {
   color: '#ffffff'
@@ -12,6 +13,9 @@ const CommunityFeaturedNav = () => (
         className="c-featured"
         href="https://www.linode.com/marketplace/apps/linode/nextcloud/"
         style={styles}
+        onClick={()=>
+          Event('Navigation','click','nextcloud')
+        }
       >
         <img
           width="632"

src/components/2_molecules/navigation/pricingFeatured.js

@@ -1,4 +1,6 @@
 import React from "react";
+import { Event } from "../tracking";
+
 const styles = {
   borderWidth: 2,
   borderColor: '#ededf4'
@@ -12,6 +14,9 @@ const PricingFeaturedNav = () => (
           className="c-featured"
           href="https://www.linode.com/lp/tco-calculator/"
           style={styles}
+          onClick={()=>
+            Event('Navigation','click','TCO')
+          }
         >
           <img
             width="416"

src/components/2_molecules/navigation/primaryNav.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { StaticQuery, graphql } from "gatsby";
+import {PageView, initGA} from "../tracking";
 
 class MainSiteNav extends React.Component {
   constructor(props) {
@@ -27,6 +28,9 @@ class MainSiteNav extends React.Component {
     const header = document.getElementById("menu-header-primary");
     const mobileMenu = document.getElementById("o-menu__link--mobile");
 
+    initGA(['UA-177150-1', 'UA-177150-30']);
+    PageView();
+
     const hideAll = () => {
       Object.keys(subMenus).map(d => {
         const em = subMenus[d];
@@ -79,6 +83,7 @@ class MainSiteNav extends React.Component {
       });
     }
 
+
     header.addEventListener("click", e => {
       const otherMenus = document.getElementsByClassName("c-sub-menu");
       const target = e.target.getAttribute("data-submenu");

src/components/2_molecules/navigation/productsFeatured.js

@@ -1,4 +1,6 @@
 import React from "react";
+import { Event } from "../tracking";
+
 const styles1 = {
   borderWidth: 2,
   borderColor: '#ededf4'
@@ -20,6 +22,9 @@ const ProductsFeaturedNav = () => (
         className="c-featured"
         href="https://www.linode.com/products/gpu/"
         style={styles1}
+        onClick={()=>
+          Event('Navigation','click','gpus-mumbai')
+        }
       >
         <img
           width="400"

src/components/2_molecules/navigation/whyFeatured.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Event } from "../tracking";
 
 const styles = {
   color: '#ffffff'
@@ -12,6 +13,9 @@ const WhyFeaturedNav = () => (
         className="c-featured"
         href="https://www.linode.com/spotlight/cloudnet/"
         style={styles}
+        onClick={()=>
+          Event('Navigation','click','cloudnet')
+        }
       >
         <img
           width="632"

src/components/2_molecules/tracking/index.js

@@ -0,0 +1,26 @@
+import ReactGA from "react-ga";
+
+export const initGA = (trackingIDs) => {
+    {trackingIDs.map(id => (
+        ReactGA.initialize(id)
+    ))}
+}
+
+export const PageView = () => {
+    ReactGA.pageview(window.location.pathname +
+                     window.location.search);
+}
+
+/**
+ * Event - Add custom tracking event.
+ * @param {string} category
+ * @param {string} action
+ * @param {string} label
+ */
+export const Event = (category, action, label) => {
+    ReactGA.event({
+      category: category,
+      action: action,
+      label: label
+    });
+};

yarn.lock

@@ -13608,6 +13608,11 @@ react-frame-component@^4.1.0:
   resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-4.1.0.tgz#bef04039c6af687314f27b20ef9893d85eefe3e6"
   integrity sha512-2HkO0iccSjd+xRA+aOxq7Mm50WUmCjdmhbQhOiG6gQTChaW//Y3mdkGeUfVA3YkXvDVbigRDvJd/VTUlqaZWSw==
 
+react-ga@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.1.2.tgz#e13f211c51a2e5c401ea69cf094b9501fe3c51ce"
+  integrity sha512-OJrMqaHEHbodm+XsnjA6ISBEHTwvpFrxco65mctzl/v3CASMSLSyUkFqz9yYrPDKGBUfNQzKCjuMJwctjlWBbw==
+
 react-helmet@^5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa"