Add outbound links analytics

src/components/Footer.js

@@ -1,18 +1,23 @@
 import * as React from "react"
 import EDGILogo from "../images/EDGI-logo.png"
+import { googleAnalyticsOutboundLinksTracker } from "../helpers/google-analytics-outbound-links-tracker"
 
-const Footer = () =>
-  <footer>
-    <div className='container'>
-      <div>
-        <a href='https://twitter.com/EEW_Network'>Twitter</a>
-        <a href='https://www.facebook.com/envirodgi'>Facebook</a>
-        <a href='https://github.com/edgi-govdata-archiving/Environmental-Enforcement-Watch'>Github</a>
-        <a href='mailto:[email protected]'>Email</a>
+const Footer = () => {
+  googleAnalyticsOutboundLinksTracker;
+  return (
+    <footer>
+      <div className='container'>
+        <div>
+          <a href='https://twitter.com/EEW_Network'>Twitter</a>
+          <a href='https://www.facebook.com/envirodgi'>Facebook</a>
+          <a href='https://github.com/edgi-govdata-archiving/Environmental-Enforcement-Watch'>Github</a>
+          <a href='mailto:[email protected]'>Email</a>
+        </div>
+        <a href='https://envirodatagov.org/' target='_blank' rel='noopener noreferrer'><img src={EDGILogo} /></a>
+        <p>© Environmental Data Governance Initiative (EDGI) {new Date().getFullYear()}. | EDGI is a project of Multiplier, a tax-exempt nonprofit 501(c)3 umbrella organization (Tax ID 91-2166435).</p>
       </div>
-      <a href='https://envirodatagov.org/' target='_blank' rel='noopener noreferrer'><img src={EDGILogo} /></a>
-      <p>© Environmental Data Governance Initiative (EDGI) {new Date().getFullYear()}. | EDGI is a project of Multiplier, a tax-exempt nonprofit 501(c)3 umbrella organization (Tax ID 91-2166435).</p>
-    </div>
-  </footer>
+    </footer>
+  )
+}
 
 export default Footer

src/helpers/google-analytics-outbound-links-tracker.js

@@ -0,0 +1,52 @@
+export const googleAnalyticsOutboundLinksTracker = (function trackOutbounds() {
+  var hitCallbackHandler = function(url,win) {
+    if (win) {
+        window.open(url, win);
+    } else {
+      window.location.href = url;
+  }
+};
+
+var addEvent = function(el, eventName, handler) {
+  if (el.addEventListener) {
+          el.addEventListener(eventName, handler);
+          } else {
+          el.attachEvent('on' + eventName, function(){
+              handler.call(el);
+        });
+      }
+  }
+
+  if (document.getElementsByTagName) {
+      var el = document.getElementsByTagName('a');
+      var getDomain = document.domain.split('.').reverse()[1] + '.' + document.domain.split('.').reverse()[0];
+
+      // Look thru each a element
+      for (var i=0; i < el.length;i++) {
+
+          // Extract it's href attribute
+          var href = (typeof(el[i].getAttribute('href')) == 'string' ) ? el[i].getAttribute('href') : '';
+
+          // Query the href for the top level domain (xxxxx.com)
+          var myDomain = href.match(getDomain);
+
+          // If link is outbound and is not to this domain
+          if ((href.match(/^(https?:|\/\/)/i)  && !myDomain) || href.match(/^mailto\:/i)) {
+
+              // Add an event to click
+              addEvent(el[i],'click', function(e) {
+                  var url = this.getAttribute('href'), win = (typeof(this.getAttribute('target')) == 'string') ? this.getAttribute('target') : '';
+
+                          console.log ("add event", url);
+                  // Log even to Analytics, once done, go to the link
+                  ga('send', 'event', 'outbound', 'click', url,
+                      {'hitCallback': hitCallbackHandler(url,win)},
+                      {'nonInteraction': 1}
+                  );
+
+                  e.preventDefault();
+              });
+          }
+      }
+  }
+})();