Add link tracking

Author: muffinresearch

src/core/utils.js

@@ -5,6 +5,10 @@ import { loadEntities } from 'core/actions';
 import { fetchAddon } from 'core/api';
 import log from 'core/logger';
 import purify from 'core/purify';
+import {
+  EXTENSION_TYPE,
+  THEME_TYPE,
+} from 'core/constants';
 
 export function gettext(str) {
   return str;
@@ -102,3 +106,10 @@ export function loadAddonIfNeeded(
   return fetchAddon({ slug, api: state.api })
     .then(({ entities }) => dispatch(loadEntities(entities)));
 }
+
+export function getAction(type) {
+  return {
+    [EXTENSION_TYPE]: 'addon',
+    [THEME_TYPE]: 'theme',
+  }[type] || 'invalid';
+}

src/disco/components/Addon.js

@@ -5,8 +5,8 @@ import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import { connect } from 'react-redux';
 import config from 'config';
 
+import { getAction, sanitizeHTML } from 'core/utils';
 import translate from 'core/i18n/translate';
-import { sanitizeHTML } from 'core/utils';
 import themeAction, { getThemeData } from 'disco/themePreview';
 import tracking from 'core/tracking';
 import * as addonManager from 'disco/addonManager';
@@ -36,6 +36,7 @@ import {
   validInstallStates,
 } from 'core/constants';
 import {
+  CLICK_CATEGORY,
   CLOSE_INFO,
   INSTALL_CATEGORY,
   SET_ENABLE_NOT_AVAILABLE,
@@ -68,12 +69,14 @@ export class AddonBase extends React.Component {
     textcolor: PropTypes.string,
     themeAction: PropTypes.func,
     type: PropTypes.oneOf(validAddonTypes).isRequired,
+    _tracking: PropTypes.object,
   }
 
   static defaultProps = {
     // Defaults themeAction to the imported func.
     themeAction,
     needsRestart: false,
+    _tracking: tracking,
   }
 
   componentDidMount() {
@@ -89,6 +92,7 @@ export class AddonBase extends React.Component {
     return JSON.stringify(getThemeData(this.props));
   }
 
+
   getError() {
     const { error, i18n, status } = this.props;
     return status === ERROR ? (<div className="notification error" key="error-overlay">
@@ -176,6 +180,18 @@ export class AddonBase extends React.Component {
     this.setCurrentStatus();
   }
 
+  clickHeadingLink = (e) => {
+    const { type, name, _tracking } = this.props;
+
+    if (e.target.nodeName.toLowerCase() === 'a') {
+      _tracking.sendEvent({
+        action: getAction(type),
+        category: CLICK_CATEGORY,
+        label: name,
+      });
+    }
+  }
+
   clickInstallTheme = (e) => {
     const { guid, installTheme, name, status, type } = this.props;
     e.preventDefault();
@@ -219,6 +235,7 @@ export class AddonBase extends React.Component {
           </ReactCSSTransitionGroup>
           <div className="copy">
             <h2
+              onClick={this.clickHeadingLink}
               ref="heading"
               className="heading"
               dangerouslySetInnerHTML={sanitizeHTML(heading, ['a', 'span'])} />
@@ -375,11 +392,8 @@ export function mapDispatchToProps(dispatch, { _tracking = tracking,
     },
 
     uninstall({ guid, name, type }) {
-      const action = {
-        [EXTENSION_TYPE]: 'addon',
-        [THEME_TYPE]: 'theme',
-      }[type] || 'invalid';
       dispatch({ type: INSTALL_STATE, payload: { guid, status: UNINSTALLING } });
+      const action = getAction(type);
       return _addonManager.uninstall(guid)
         .then(() => {
           _tracking.sendEvent({

src/disco/constants.js

@@ -11,6 +11,7 @@ import {
 
 export const INSTALL_CATEGORY = 'AMO Addon / Theme Installs';
 export const UNINSTALL_CATEGORY = 'AMO Addon / Theme Uninstalls';
+export const CLICK_CATEGORY = 'AMO Addon / Theme Clicks';
 export const VIDEO_CATEGORY = 'Discovery Video';
 export const NAVIGATION_CATEGORY = 'Discovery Navigation';
 

tests/client/core/test_utils.js

@@ -4,12 +4,14 @@ import {
   camelCaseProps,
   convertBoolean,
   findAddon,
+  getAction,
   getClientApp,
   getClientConfig,
   isValidClientApp,
   loadAddonIfNeeded,
   nl2br,
 } from 'core/utils';
+import { EXTENSION_TYPE, THEME_TYPE } from 'core/constants';
 import { unexpectedSuccess } from 'tests/client/helpers';
 
 describe('camelCaseProps', () => {
@@ -330,3 +332,17 @@ describe('nl2br', () => {
     assert.equal(nl2br('\r\n\r\n'), '<br /><br />');
   });
 });
+
+describe('getAction', () => {
+  it('returns addon for EXTENSION_TYPE', () => {
+    assert.equal(getAction(EXTENSION_TYPE), 'addon');
+  });
+
+  it('returns theme for THEME_TYPE', () => {
+    assert.equal(getAction(THEME_TYPE), 'theme');
+  });
+
+  it('returns invalid for unknown type', () => {
+    assert.equal(getAction('whatever'), 'invalid');
+  });
+});

tests/client/disco/components/TestAddon.js

@@ -37,6 +37,7 @@ import {
   UNINSTALLING,
 } from 'core/constants';
 import {
+  CLICK_CATEGORY,
   CLOSE_INFO,
   INSTALL_CATEGORY,
   SET_ENABLE_NOT_AVAILABLE,
@@ -248,6 +249,29 @@ describe('<Addon />', () => {
         renderAddon(data);
       }, Error, 'Invalid addon type');
     });
+
+    it('tracks an add-on link click', () => {
+      const fakeTracking = {
+        sendEvent: sinon.stub(),
+      };
+      const data = {
+        ...result,
+        _tracking: fakeTracking,
+        name: 'foo',
+        heading: 'This is <span>an <a href="https://addons.mozilla.org">add-on</a>/span>',
+        type: EXTENSION_TYPE,
+      };
+      root = renderAddon(data);
+      const heading = findDOMNode(root).querySelector('.heading');
+      // We click the heading providing the link nodeName to emulate
+      // bubbling.
+      Simulate.click(heading, { target: { nodeName: 'A' } });
+      assert.ok(fakeTracking.sendEvent.calledWith({
+        action: 'addon',
+        category: CLICK_CATEGORY,
+        label: 'foo',
+      }), sinon.format(fakeTracking.sendEvent.firstCall.args));
+    });
   });