Skip to content

Commit

Permalink
Merge pull request #5 from edx/robrap/ARCH-378-add-events
Browse files Browse the repository at this point in the history
feat(analytics): add trackEvent for external links
  • Loading branch information
robrap authored Jan 22, 2019
2 parents e39ac1c + 045e28d commit a19c762
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 10 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
coverage
dist
node_modules

.idea/
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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+"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
>
Expand All @@ -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"
>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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+"
Expand All @@ -799,6 +810,7 @@ exports[`<SiteFooter /> renders correctly 1`] = `
<li>
<a
href="https://reddit.com"
onClick={[Function]}
rel="noopener noreferrer"
target="_blank"
title="Reddit"
Expand All @@ -822,6 +834,7 @@ exports[`<SiteFooter /> renders correctly 1`] = `
<li>
<a
href="https://store.apple.com"
onClick={[Function]}
rel="noopener noreferrer"
target="_blank"
>
Expand All @@ -835,6 +848,7 @@ exports[`<SiteFooter /> renders correctly 1`] = `
<li>
<a
href="https://play.google.com"
onClick={[Function]}
rel="noopener noreferrer"
target="_blank"
>
Expand Down
76 changes: 67 additions & 9 deletions src/lib/components/SiteFooter/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`} />
Expand Down Expand Up @@ -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>
Expand All @@ -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`}
Expand All @@ -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`}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -188,6 +244,7 @@ SiteFooter.propTypes = {
showMobileLinks: PropTypes.bool,
appleAppStoreUrl: PropTypes.string,
googlePlayUrl: PropTypes.string,
handleAllTrackEvents: PropTypes.func.isRequired,
};

SiteFooter.defaultProps = {
Expand All @@ -212,3 +269,4 @@ SiteFooter.defaultProps = {
};

export default SiteFooter;
export { EVENT_NAMES };

0 comments on commit a19c762

Please sign in to comment.