Add limited GA to the buyers guide

network-api/networkapi/buyersguide/templates/primary_nav.html

@@ -11,7 +11,7 @@
                   <div class="col">
                     <h3 class="h3-heading">Help us keep the Internet healthy</h3>
                     <p>Mozilla is a nonprofit organization fighting for a healthy interent.</p>
-                    <a class="btn btn-donate m-0 w-100" href="https://donate.mozilla.org">Donate</a>
+                    <a class="btn btn-donate m-0 w-100" id="donate-button" href="https://donate.mozilla.org">Donate</a>
                   </div>
                 </div>
               </div>

network-api/networkapi/buyersguide/templates/product_page.html

@@ -21,7 +21,7 @@
 
       <div class="d-flex justify-content-between align-items-center">
         <h2 class="h1-heading">{{product.name}}</h2>
-        <a class="links-btn copy-link" href="#" data-url={{product.url}}>Copy link</a>
+        <a class="links-btn copy-link" id="product-copy-link-button" href="#" data-url={{product.url}}>Copy link</a>
       </div>
       <div class="body-large mb-5">{{product.blurb}}</div>
 
@@ -111,7 +111,7 @@ <h3 class="h3-heading h3-heading-small">Company shows it cares about its custome
             <div>
               <strong class="d-block">Live Chat</strong>
               {% if product.live_chat %}
-              <a target="_blank" href={{ product.live_chat }}>Yes</a>
+              <a id="product-live-chat" target="_blank" href={{ product.live_chat }}>Yes</a>
               {% else %}
               No
               {% endif %}

network-api/networkapi/buyersguide/templates/social.html

@@ -9,10 +9,10 @@
   </div>
 {% else %}
 <div class="social d-flex align-items-center">
-  <a class="social-button social-button-fb hidden-sm-down" href="{{facebook_share_link}}"><span class="sr-only">Facebook</span></a>
-  <a class="social-button social-button-twitter hidden-sm-down" href="{{twitter_share_link}}{{share_text|urlencode}}" target="_blank"><span class="sr-only">Twitter</span></a>
-  <a class="social-button social-button-email hidden-sm-down" href="{{email_share_link}}{{share_text|urlencode}}"><span class="sr-only">Email</span></a>
-  <a class="social-button social-button-link copy-link hidden-sm-down" href=""><span class="sr-only">Copy link</span></a>
+  <a class="social-button social-button-fb hidden-sm-down" id="nav-social-button-fb" href="{{facebook_share_link}}"><span class="sr-only">Facebook</span></a>
+  <a class="social-button social-button-twitter hidden-sm-down" id="nav-social-button-twitter" href="{{twitter_share_link}}{{share_text|urlencode}}" target="_blank"><span class="sr-only">Twitter</span></a>
+  <a class="social-button social-button-email hidden-sm-down" id="nav-social-button-email" href="{{email_share_link}}{{share_text|urlencode}}"><span class="sr-only">Email</span></a>
+  <a class="social-button social-button-link copy-link hidden-sm-down" id="nave-social-button-link" href=""><span class="sr-only">Copy link</span></a>
   <a class="d-none d-sm-block btn btn-donate ml-3 mr-0 hidden-sm-down" href="https://donate.mozilla.org">Donate</a>
   <button class="burger btn btn-link p-0 ml-4 hidden-md-up">
     <span class="sr-only">Share</span>

source/js/buyers-guide/bg-main.js

@@ -1,29 +1,69 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import ReactGA from 'react-ga';
 
 import primaryNav from './components/primary-nav/primary-nav.js';
 import CreepVote from './components/creep-vote/creep-vote.jsx';
 import Creepometer from './components/creepometer/creepometer.jsx';
 import Criterion from './components/criterion/criterion.jsx';
 
 import HomepageSlider from './homepage-c-slider.js';
+import ProductGA from './product-analytics.js';
 
 let main = {
   init() {
-    this.enableCopyLinks();
+    let _dntStatus = navigator.doNotTrack || navigator.msDoNotTrack,
+        fxMatch = navigator.userAgent.match(/Firefox\/(\d+)/),
+        ie10Match = navigator.userAgent.match(/MSIE 10/i),
+        w8Match = navigator.appVersion.match(/Windows NT 6.2/);
+
+    if (fxMatch && Number(fxMatch[1]) < 32) {
+      _dntStatus = `Unspecified`;
+    } else if (ie10Match && w8Match) {
+      _dntStatus = `Unspecified`;
+    } else {
+      _dntStatus = { '0': `Disabled`, '1': `Enabled` }[_dntStatus] || `Unspecified`;
+    }
+
+    let allowTracking = (_dntStatus !== `Enabled`);
+
+    if (allowTracking) {
+      ReactGA.initialize(`UA-87658599-6`);
+    }
+
+    this.enableCopyLinks(allowTracking);
     this.injectReactComponents();
+
     primaryNav.init();
+
     if (document.getElementById(`pni-home`)) {
       HomepageSlider.init();
     }
+
+    if (document.getElementById(`pni-product-page`)) {
+      if (allowTracking) {
+        ProductGA.init();
+      }
+    }
   },
 
-  enableCopyLinks() {
+  enableCopyLinks(allowAnalytics) {
     if (document.querySelectorAll(`.copy-link`)) {
       Array.from(document.querySelectorAll(`.copy-link`)).forEach(element => {
         element.addEventListener(`click`, (event) => {
           event.preventDefault();
 
+          if (allowAnalytics) {
+            let productBox = document.querySelector(`.product-detail .h1-heading`);
+            let productTitle = productBox ? productBox.textContent : `unknown product`;
+
+            ReactGA.event({
+              category: `product`,
+              action: `copy link tap`,
+              label: `copy link ${productTitle}`
+            });
+          }
+
           let textArea = document.createElement(`textarea`);
 
           //

source/js/buyers-guide/product-analytics.js

@@ -0,0 +1,92 @@
+import ReactGA from 'react-ga';
+
+function getElementGAInformation(pageTitle, productName) {
+  return {
+    'product-live-chat`': {
+      category: `product`,
+      action: `customer support link tap`,
+      label: `support link for ${productName}`
+    },
+    'donate-button': {
+      category: `site`,
+      action: `donate tap`,
+      label: `${pageTitle} donate header`
+    },
+    'nav-social-button-fb': {
+      category: `site`,
+      action: `share tap`,
+      label: `share site to Facebook`,
+      transport: `beacon`
+    },
+    'nav-social-button-twitter': {
+      category: `site`,
+      action: `share tap`,
+      label: `share site to Twitter`,
+      transport: `beacon`
+    },
+    'nav-social-button-link': {
+      category: `site`,
+      action: `copy link tap`,
+      label: `copy link to site `
+    },
+    'nav-social-button-email': {
+      category: `site`,
+      action: `share tap`,
+      label: `share site to Email`,
+      transport: `beacon`
+    },
+    'product-copy-link-button': {
+      category: `product`,
+      action: `copy link tap`,
+      label: `copy link ${productName}`
+    },
+    'creep-vote': {
+      category: `product`,
+      action: `opinion submitted`,
+      label: `opinion on ${productName}`
+    },
+    'product-social-button-fb': {
+      category: `product`,
+      action: `share tap`,
+      label: `share ${productName} to Facebook`,
+      transport: `beacon`
+    },
+    'product-social-button-twitter': {
+      category: `product`,
+      action: `share tap`,
+      label: `share ${productName} to Twitter`,
+      transport: `beacon`
+    },
+    'product-social-button-email': {
+      category: `product`,
+      action: `share tap`,
+      label: `share ${productName} to Email`,
+      transport: `beacon`
+    }
+  };
+}
+
+function setupElementGA(elementId, opts) {
+  let element = document.getElementById(elementId);
+
+  if (element) {
+    element.onclick = () => {
+      ReactGA.event(opts);
+    };
+  }
+}
+
+const ProductGA = {
+  init: () => {
+    let productBox = document.querySelector(`.product-detail .h1-heading`);
+    let productName = productBox ? productBox.textContent : `unknown product`;
+    let pageTitle = document.querySelector(`meta[property='og:title']`).getAttribute(`content`);
+    let elementsWithAnalytics = getElementGAInformation(pageTitle, productName);
+
+    Object.keys(elementsWithAnalytics).forEach( elementId => {
+      setupElementGA(elementId, elementsWithAnalytics[elementId]);
+    });
+  }
+};
+
+export default ProductGA;