Live Chat
{% if product.live_chat %}
-
Yes
+
Yes
{% else %}
No
{% endif %}
diff --git a/network-api/networkapi/buyersguide/templates/social.html b/network-api/networkapi/buyersguide/templates/social.html
index ed7f6fc77ce..6ab7716645b 100644
--- a/network-api/networkapi/buyersguide/templates/social.html
+++ b/network-api/networkapi/buyersguide/templates/social.html
@@ -2,18 +2,18 @@
{% if mobile %}
{% else %}
-
Facebook
-
-
Email
-
Copy link
-
Donate
+
Facebook
+
+
Email
+
Copy link
+
Donate
diff --git a/source/js/buyers-guide/bg-main.js b/source/js/buyers-guide/bg-main.js
index 404cc0a0d40..c8b18d03810 100644
--- a/source/js/buyers-guide/bg-main.js
+++ b/source/js/buyers-guide/bg-main.js
@@ -1,5 +1,6 @@
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';
@@ -7,23 +8,62 @@ 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`);
//
diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.jsx b/source/js/buyers-guide/components/creep-vote/creep-vote.jsx
index 0178b525f63..373a1b4fa52 100644
--- a/source/js/buyers-guide/components/creep-vote/creep-vote.jsx
+++ b/source/js/buyers-guide/components/creep-vote/creep-vote.jsx
@@ -149,7 +149,7 @@ export default class CreepVote extends React.Component {
-
+
{this.state.totalVotes} votes
diff --git a/source/js/buyers-guide/product-analytics.js b/source/js/buyers-guide/product-analytics.js
new file mode 100644
index 00000000000..8624bf51148
--- /dev/null
+++ b/source/js/buyers-guide/product-analytics.js
@@ -0,0 +1,120 @@
+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`
+ },
+ 'donate-footer-btn': {
+ category: `site`,
+ action: `donate tap`,
+ label: `${pageTitle} donate footer`
+ },
+ '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`
+ },
+ 'nav-social-button-fb-mb': {
+ category: `site`,
+ action: `share tap`,
+ label: `share site to Facebook`,
+ transport: `beacon`
+ },
+ 'nav-social-button-twitter-mb': {
+ category: `site`,
+ action: `share tap`,
+ label: `share site to Twitter`,
+ transport: `beacon`
+ },
+ 'nav-social-button-link-mb': {
+ category: `site`,
+ action: `copy link tap`,
+ label: `copy link to site `
+ },
+ 'nav-social-button-email-mb': {
+ 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-btn': {
+ 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;