Clean up and refactor side wide shared JS code

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

@@ -1,5 +1,5 @@
 import ReactGA from "../react-ga-proxy";
-import DNT from "../dnt.js";
+import { googleAnalytics } from "../common";
 
 function getQuerySelectorEvents(pageTitle, productName) {
   return {
@@ -127,7 +127,7 @@ function setupElementGA(element, eventData) {
 
 const ProductGA = {
   init: () => {
-    if (!DNT.allowTracking) {
+    if (googleAnalytics.doNotTrack) {
       // explicit check on DNT left in, to prevent
       // a whole heap of code from executing.
       return;

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

@@ -2,12 +2,11 @@ import React from "react";
 import ReactDOM from "react-dom";
 import ReactGA from "../react-ga-proxy.js";
 import Storage from "../storage.js";
+import * as common from "../common";
 
 import primaryNav from "./components/primary-nav/primary-nav.js";
-import navNewsletter from "../nav-newsletter.js";
 import CreepVote from "./components/creep-vote/creep-vote.jsx";
 import Creepometer from "./components/creepometer/creepometer.jsx";
-import JoinUs from "../components/join/join.jsx";
 
 import copyToClipboard from "../../js/copy-to-clipboard.js";
 import HomepageSlider from "./homepage-c-slider.js";
@@ -55,25 +54,14 @@ let main = {
         networkSiteURL = `https://${env.HEROKU_APP_NAME}.herokuapp.com`;
       }
 
-      // TODO: this should probably tap into the analytics.js file that
-      // we use in main.js so that we only have one place where top level
-      // changes to how analytics works need to be made.
-
-      const gaMeta = document.querySelector(`meta[name="ga-identifier"]`);
-      if (gaMeta) {
-        let gaIdentifier = gaMeta.getAttribute(`content`);
-        ReactGA.initialize(gaIdentifier); // UA-87658599-6 by default
-        ReactGA.pageview(window.location.pathname);
-        AnalyticsEvents.init();
-      } else {
-        console.warn(`No GA identifier found: skipping bootstrap step`);
-      }
+      common.googleAnalytics.init();
+      AnalyticsEvents.init();
 
       this.enableCopyLinks();
       this.injectReactComponents();
 
-      primaryNav.init();
-      navNewsletter.init(networkSiteURL, csrfToken);
+      common.bindEventHandlers();
+      common.initiatePrimaryNav(networkSiteURL, csrfToken, primaryNav);
 
       if (document.getElementById(`view-home`)) {
         HomepageSlider.init();
@@ -120,6 +108,8 @@ let main = {
 
   // Embed various React components based on the existence of containers within the current page
   injectReactComponents() {
+    common.injectReactComponents(apps, networkSiteURL, csrfToken);
+
     document.querySelectorAll(`.creep-vote-target`).forEach(element => {
       let csrf = element.querySelector(`input[name=csrfmiddlewaretoken]`);
       let productName = element.dataset.productName;
@@ -170,24 +160,6 @@ let main = {
         })
       );
     });
-
-    document.querySelectorAll(`.join-us`).forEach(element => {
-      const props = element.dataset;
-      const sid = props.signupId || 0;
-      props.apiUrl = `${networkSiteURL}/api/campaign/signups/${sid}/`;
-
-      props.csrfToken = props.csrfToken || csrfToken;
-      props.isHidden = false;
-
-      apps.push(
-        new Promise(resolve => {
-          ReactDOM.render(
-            <JoinUs {...props} whenLoaded={() => resolve()} />,
-            element
-          );
-        })
-      );
-    });
   }
 };
 

source/js/common/bind-event-handlers.js

@@ -0,0 +1,25 @@
+import ReactGA from "../react-ga-proxy.js";
+
+/**
+ * Bind click handler to #donate-footer-btn
+ */
+const bindDonateFooterButtonHandler = () => {
+  let donateFooterBtn = document.getElementById(`donate-footer-btn`);
+
+  if (donateFooterBtn) {
+    donateFooterBtn.addEventListener(`click`, () => {
+      ReactGA.event({
+        category: `donate`,
+        action: `donate button tap`,
+        label: `${document.title} footer`
+      });
+    });
+  }
+};
+
+/**
+ * Bind event handlers
+ */
+export default () => {
+  bindDonateFooterButtonHandler();
+};

source/js/common/google-analytics.js

@@ -0,0 +1,50 @@
+import ReactGA from "../react-ga-proxy.js";
+
+/**
+ * Check browser's "do not track" setting
+ * @return {Boolean} if browser's "do not track" setting is on
+ */
+const checkDoNotTrack = () => {
+  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`;
+  }
+
+  return _dntStatus === `Enabled`;
+};
+
+const DO_NOT_TRACK = checkDoNotTrack();
+
+/**
+ * Initialize Google Analytics and tracking pageviews
+ */
+const init = () => {
+  const gaMeta = document.querySelector(`meta[name="ga-identifier"]`);
+
+  if (!gaMeta) return;
+
+  let gaIdentifier = gaMeta.getAttribute(`content`);
+
+  if (!gaIdentifier) {
+    console.warn(`No GA identifier found: skipping bootstrap step`);
+  }
+
+  if (!DO_NOT_TRACK) {
+    ReactGA.initialize(gaIdentifier);
+    ReactGA.pageview(window.location.pathname);
+  }
+};
+
+export default {
+  doNotTrack: DO_NOT_TRACK,
+  init: init
+};

source/js/common/index.js

@@ -0,0 +1,8 @@
+// The following modules are the common modules which need to be called
+// on all pages on the main Foundation site, apps, and microsites.
+// e.g., Foundation site, PNI, MozFest etc
+
+export { default as bindEventHandlers } from "./bind-event-handlers";
+export { default as googleAnalytics } from "./google-analytics";
+export { default as initiatePrimaryNav } from "./initiate-primary-nav";
+export { default as injectReactComponents } from "./inject-react-components";

source/js/common/initiate-primary-nav.js

@@ -0,0 +1,12 @@
+import navNewsletter from "../nav-newsletter.js";
+
+/**
+ * Initiate primary nav scripts
+ * @param {String} siteUrl Foundation site base URL
+ * @param {String} csrfToken CSRF Token
+ * @param {Object} primaryNavModule primary nav module to initiate
+ */
+export default (siteUrl, csrfToken, primaryNavModule) => {
+  primaryNavModule.init();
+  navNewsletter.init(siteUrl, csrfToken);
+};

source/js/common/inject-react-components.js

@@ -0,0 +1,41 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import JoinUs from "../components/join/join.jsx";
+
+/**
+ * Inject newsletter signup forms
+ * @param {Array} apps The existing array we are using to to track all ReactDOM.render calls
+ * @param {String} siteUrl Foundation site base URL
+ * @param {String} csrfToken CSRF Token
+ */
+const injectJoinUs = (apps, siteUrl, csrfToken) => {
+  // excluding `.join-us.on-nav` because it's taken care of by nav-newsletter.js
+  document.querySelectorAll(`.join-us:not(.on-nav)`).forEach(element => {
+    const props = element.dataset;
+    const sid = props.signupId || 0;
+
+    props.apiUrl = `${siteUrl}/api/campaign/signups/${sid}/`;
+
+    props.csrfToken = props.csrfToken || csrfToken;
+    props.isHidden = false;
+
+    apps.push(
+      new Promise(resolve => {
+        ReactDOM.render(
+          <JoinUs {...props} whenLoaded={() => resolve()} />,
+          element
+        );
+      })
+    );
+  });
+};
+
+/**
+ * Inject React components
+ * @param {Array} apps The existing array we are using to to track all ReactDOM.render calls
+ * @param {String} siteUrl Foundation site base URL
+ * @param {String} csrfToken CSRF Token
+ */
+export default (apps, siteUrl, csrfToken) => {
+  injectJoinUs(apps, siteUrl, csrfToken);
+};

source/js/components/join/join.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactGA from "react-ga";
+import ReactGA from "../../react-ga-proxy.js";
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 import CountrySelect from "../petition/country-select.jsx";
@@ -452,7 +452,7 @@ export default class JoinUs extends React.Component {
                 !this.state.apiSubmitted &&
                 !this.privacy.checked &&
                 !this.isFlowForm() && (
-                  <span class="form-error-glyph privacy-error d-flex" />
+                  <span className="form-error-glyph privacy-error d-flex" />
                 )}
             </label>
           </div>
@@ -515,7 +515,7 @@ export default class JoinUs extends React.Component {
           {this.renderSubmitButton()}
           {this.isFlowForm() && (
             <button
-              class="btn btn-primary btn-dismiss flex-1"
+              className="btn btn-primary btn-dismiss flex-1"
               onClick={() => this.props.handleSignUp(false)}
               type="button"
             >

source/js/components/petition/petition.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ReactGA from "react-ga";
+import ReactGA from "../../react-ga-proxy.js";
 import classNames from "classnames";
 import DonationModal from "./donation-modal.jsx";
 import FloatingLabelInput from "./floating-label-input.jsx";