feat(analytics): add track events for links

- Add required prop for handleAllTrackEvents. - Add EVENT_NAMES to help support event overrides. BREAKING CHANGE: New required prop handleAllTrackEvents.
openedx · Jan 22, 2019 · 045e28d · 045e28d
1 parent 375cc7d
commit 045e28d
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 coverage
 dist
 node_modules
+
+.idea/
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
     "start": "NODE_ENV=development BABEL_ENV=development node_modules/.bin/webpack-dev-server --config=config/webpack.dev.config.js --progress",
     "test": "jest --coverage",
     "snapshot": "jest --updateSnapshot",
-    "travis-deploy-once": "travis-deploy-once"
+    "travis-deploy-once": "travis-deploy-once",
+    "watch": "watch 'npm run build' ./src"
   },
   "repository": {
     "type": "git",
@@ -68,6 +69,7 @@
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.20.2",
     "travis-deploy-once": "^5.0.0",
+    "watch": "^1.0.2",
     "webpack": "^4.19.1",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.9",

diff --git a/src/lib/components/SiteFooter/__snapshots__/SiteFooter.test.jsx.snap b/src/lib/components/SiteFooter/__snapshots__/SiteFooter.test.jsx.snap
@@ -180,6 +180,7 @@ exports[`<SiteFooter /> does not render mobile links 1`] = `
         <li>
           <a
             href="https://www.facebook.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
             title="Facebook"
@@ -199,6 +200,7 @@ exports[`<SiteFooter /> does not render mobile links 1`] = `
         <li>
           <a
             href="https://www.twitter.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
             title="Twitter"
@@ -237,6 +239,7 @@ exports[`<SiteFooter /> does not render mobile links 1`] = `
         <li>
           <a
             href="https://www.linkedin.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
             title="LinkedIn"
@@ -256,6 +259,7 @@ exports[`<SiteFooter /> does not render mobile links 1`] = `
         <li>
           <a
             href="https://plus.google.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
             title="Google+"
@@ -275,6 +279,7 @@ exports[`<SiteFooter /> does not render mobile links 1`] = `
         <li>
           <a
             href="https://reddit.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
             title="Reddit"
@@ -486,6 +491,7 @@ exports[`<SiteFooter /> does not render social links 1`] = `
         <li>
           <a
             href="https://store.apple.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -499,6 +505,7 @@ exports[`<SiteFooter /> does not render social links 1`] = `
         <li>
           <a
             href="https://play.google.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -704,6 +711,7 @@ exports[`<SiteFooter /> renders correctly 1`] = `
         <li>
           <a
             href="https://www.facebook.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
             title="Facebook"
@@ -723,6 +731,7 @@ exports[`<SiteFooter /> renders correctly 1`] = `
         <li>
           <a
             href="https://www.twitter.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
             title="Twitter"
@@ -761,6 +770,7 @@ exports[`<SiteFooter /> renders correctly 1`] = `
         <li>
           <a
             href="https://www.linkedin.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
             title="LinkedIn"
@@ -780,6 +790,7 @@ exports[`<SiteFooter /> renders correctly 1`] = `
         <li>
           <a
             href="https://plus.google.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
             title="Google+"
@@ -799,6 +810,7 @@ exports[`<SiteFooter /> renders correctly 1`] = `
         <li>
           <a
             href="https://reddit.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
             title="Reddit"
@@ -822,6 +834,7 @@ exports[`<SiteFooter /> renders correctly 1`] = `
         <li>
           <a
             href="https://store.apple.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -835,6 +848,7 @@ exports[`<SiteFooter /> renders correctly 1`] = `
         <li>
           <a
             href="https://play.google.com"
+            onClick={[Function]}
             rel="noopener noreferrer"
             target="_blank"
           >

diff --git a/src/lib/components/SiteFooter/index.jsx b/src/lib/components/SiteFooter/index.jsx
@@ -2,7 +2,26 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Hyperlink, Icon } from '@edx/paragon';
 
+const EVENT_NAMES = {
+  FOOTER_LINK: 'edx.bi.footer.link',
+};
+
 class SiteFooter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
+  }
+
+  externalLinkClickHandler(event) {
+    const label = event.currentTarget.getAttribute('href');
+    const eventName = EVENT_NAMES.FOOTER_LINK;
+    const properties = {
+      category: 'outbound_link',
+      label,
+    };
+    this.props.handleAllTrackEvents(eventName, properties);
+  }
+
   renderSiteLogo() {
     return (
       <img src={this.props.siteLogo} alt={`${this.props.siteName} logo`} />
@@ -33,32 +52,69 @@ class SiteFooter extends React.Component {
           {/* TODO: Use Paragon HyperLink with Icon. */}
           {/*  Would need to add rel to paragon if we still need it. */}
           <li>
-            <a href={facebookUrl} title="Facebook" rel="noopener noreferrer" target="_blank">
+            <a
+              href={facebookUrl}
+              title="Facebook"
+              rel="noopener noreferrer"
+              target="_blank"
+              onClick={this.externalLinkClickHandler}
+            >
               <Icon className={['fa', 'fa-facebook-square', 'fa-2x']} screenReaderText={`Like ${siteName} on Facebook`} />
             </a>
           </li>
+
+
           <li>
-            <a href={twitterUrl} title="Twitter" rel="noopener noreferrer" target="_blank">
+            <a
+              href={twitterUrl}
+              title="Twitter"
+              rel="noopener noreferrer"
+              target="_blank"
+              onClick={this.externalLinkClickHandler}
+            >
               <Icon className={['fa', 'fa-twitter-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on Twitter`} />
             </a>
           </li>
           <li>
-            <a href={youTubeUrl} title="Youtube" rel="noopener noreferrer" target="_blank">
+            <a
+              href={youTubeUrl}
+              title="Youtube"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
               <Icon className={['fa', 'fa-youtube-square', 'fa-2x']} screenReaderText={`Subscribe to the ${siteName} YouTube channel`} />
             </a>
           </li>
           <li>
-            <a href={linkedInUrl} title="LinkedIn" rel="noopener noreferrer" target="_blank">
+            <a
+              href={linkedInUrl}
+              title="LinkedIn"
+              rel="noopener noreferrer"
+              target="_blank"
+              onClick={this.externalLinkClickHandler}
+            >
               <Icon className={['fa', 'fa-linkedin-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on LinkedIn`} />
             </a>
           </li>
           <li>
-            <a href={googlePlusUrl} title="Google+" rel="noopener noreferrer" target="_blank">
+            <a
+              href={googlePlusUrl}
+              title="Google+"
+              rel="noopener noreferrer"
+              target="_blank"
+              onClick={this.externalLinkClickHandler}
+            >
               <Icon className={['fa', 'fa-google-plus-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on Google+`} />
             </a>
           </li>
           <li>
-            <a href={redditUrl} title="Reddit" rel="noopener noreferrer" target="_blank">
+            <a
+              href={redditUrl}
+              title="Reddit"
+              rel="noopener noreferrer"
+              target="_blank"
+              onClick={this.externalLinkClickHandler}
+            >
               <Icon className={['fa', 'fa-reddit-square', 'fa-2x']} screenReaderText={`Subscribe to the ${siteName} subreddit`} />
             </a>
           </li>
@@ -80,7 +136,7 @@ class SiteFooter extends React.Component {
       mobileLinks = (
         <ul className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5">
           <li>
-            <a href={appleAppStoreUrl} rel="noopener noreferrer" target="_blank">
+            <a href={appleAppStoreUrl} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
               <img
                 className="max-height-39"
                 alt={`Download the ${siteName} mobile app from the Apple App Store`}
@@ -89,7 +145,7 @@ class SiteFooter extends React.Component {
             </a>
           </li>
           <li>
-            <a href={googlePlayUrl} rel="noopener noreferrer" target="_blank">
+            <a href={googlePlayUrl} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
               <img
                 className="max-height-39"
                 alt={`Download the ${siteName} mobile app from Google Play`}
@@ -136,7 +192,7 @@ class SiteFooter extends React.Component {
           <div className="area-3">
             <h2>Legal</h2>
             <ul className="list-unstyled p-0 m-0">
-              <li><a href={termsOfServiceUrl}>Terms of Service &amp; Honor Code</a></li>
+              <li><a href={termsOfServiceUrl}>Terms of Service & Honor Code</a></li>
               <li><a href={privacyPolicyUrl}>Privacy Policy</a></li>
               <li><a href={this.renderMarketingSiteUrl('/accessibility')}>Accessibility Policy</a></li>
               <li><a href={this.renderMarketingSiteUrl('/trademarks')}>Trademark Policy</a></li>
@@ -188,6 +244,7 @@ SiteFooter.propTypes = {
   showMobileLinks: PropTypes.bool,
   appleAppStoreUrl: PropTypes.string,
   googlePlayUrl: PropTypes.string,
+  handleAllTrackEvents: PropTypes.func.isRequired,
 };
 
 SiteFooter.defaultProps = {
@@ -212,3 +269,4 @@ SiteFooter.defaultProps = {
 };
 
 export default SiteFooter;
+export { EVENT_NAMES };