Add tracking for video and see more add-ons

src/disco/constants.js

@@ -73,7 +73,8 @@ export const installEventList = [
 
 export const INSTALL_CATEGORY = 'AMO Addon / Theme Installs';
 export const UNINSTALL_CATEGORY = 'AMO Addon / Theme Uninstalls';
-
+export const VIDEO_CATEGORY = 'Discovery Video';
+export const NAVIGATION_CATEGORY = 'Discovery Navigation';
 
 // Install Types
 export const INSTALL_STATE = 'INSTALL_STATE';

src/disco/containers/DiscoPane.js

@@ -10,10 +10,15 @@ import { getDiscoveryAddons } from 'disco/api';
 import { discoResults } from 'disco/actions';
 import { loadEntities } from 'core/actions';
 import { addChangeListeners } from 'disco/addonManager';
-import { INSTALL_STATE } from 'disco/constants';
+import {
+  INSTALL_STATE,
+  NAVIGATION_CATEGORY,
+  VIDEO_CATEGORY,
+} from 'disco/constants';
 
 import Addon from 'disco/components/Addon';
 import translate from 'core/i18n/translate';
+import tracking from 'core/tracking';
 
 import videoPoster from 'disco/img/AddOnsPoster.jpg';
 import videoMp4 from 'disco/video/AddOns.mp4';
@@ -28,12 +33,14 @@ export class DiscoPane extends React.Component {
     AddonComponent: PropTypes.func.isRequred,
     _addChangeListeners: PropTypes.func,
     mozAddonManager: PropTypes.object,
+    _tracking: PropTypes.object,
   }
 
   static defaultProps = {
     AddonComponent: Addon,
     mozAddonManager: config.get('server') ? {} : navigator.mozAddonManager,
     _addChangeListeners: addChangeListeners,
+    _tracking: tracking,
   }
 
   constructor() {
@@ -48,15 +55,34 @@ export class DiscoPane extends React.Component {
   }
 
   showVideo = (e) => {
+    const { _tracking } = this.props;
     e.preventDefault();
     this.setState({ showVideo: true });
     this.refs.video.play();
+    _tracking.sendEvent({
+      action: 'play',
+      category: VIDEO_CATEGORY,
+    });
+  }
+
+  showMoreAddons = () => {
+    const { _tracking } = this.props;
+    _tracking.sendEvent({
+      action: 'click',
+      category: NAVIGATION_CATEGORY,
+      label: 'See More Add-ons',
+    });
   }
 
   closeVideo = (e) => {
+    const { _tracking } = this.props;
     e.preventDefault();
     this.setState({ showVideo: false });
     this.refs.video.pause();
+    _tracking.sendEvent({
+      action: 'close',
+      category: VIDEO_CATEGORY,
+    });
   }
 
   render() {
@@ -91,7 +117,8 @@ export class DiscoPane extends React.Component {
         </header>
         {results.map((item) => <AddonComponent {...camelCaseProps(item)} key={item.guid} />)}
         <div className="amo-link">
-          <a href="https://addons.mozilla.org/" target="_blank" rel="noreferrer">
+          <a href="https://addons.mozilla.org/" target="_blank"
+            rel="noreferrer" onClick={this.showMoreAddons}>
             {i18n.gettext('See more add-ons!')}
           </a>
         </div>

tests/client/disco/containers/TestDiscoPane.js

@@ -5,7 +5,13 @@ import { Provider } from 'react-redux';
 import { discoResults } from 'disco/actions';
 import * as discoApi from 'disco/api';
 import createStore from 'disco/store';
-import { EXTENSION_TYPE, INSTALL_STATE, globalEvents } from 'disco/constants';
+import {
+  EXTENSION_TYPE,
+  INSTALL_STATE,
+  NAVIGATION_CATEGORY,
+  VIDEO_CATEGORY,
+  globalEvents,
+} from 'disco/constants';
 import * as helpers from 'disco/containers/DiscoPane';
 import { getFakeI18nInst, MockedSubComponent } from 'tests/client/helpers';
 import { loadEntities } from 'core/actions';
@@ -49,6 +55,30 @@ describe('AddonPage', () => {
       Simulate.click(root.querySelector('.close-video a'));
       assert.notOk(root.querySelector('.show-video'));
     });
+
+    it('tracks video being played', () => {
+      const fakeTracking = {
+        sendEvent: sinon.stub(),
+      };
+      const root = render({ _tracking: fakeTracking });
+      Simulate.click(root.querySelector('.play-video'));
+      assert.ok(fakeTracking.sendEvent.calledWith({
+        category: VIDEO_CATEGORY,
+        action: 'play',
+      }));
+    });
+
+    it('tracks video being closed', () => {
+      const fakeTracking = {
+        sendEvent: sinon.stub(),
+      };
+      const root = render({ _tracking: fakeTracking });
+      Simulate.click(root.querySelector('.close-video a'));
+      assert.ok(fakeTracking.sendEvent.calledWith({
+        category: VIDEO_CATEGORY,
+        action: 'close',
+      }));
+    });
   });
 
   describe('loadDataIfNeeded', () => {
@@ -138,4 +168,19 @@ describe('AddonPage', () => {
       assert.equal(fakeMozAddonManager.addEventListener.callCount, globalEvents.length);
     });
   });
+
+  describe('See more add-ons link', () => {
+    it('tracks see more addons link being clicked', () => {
+      const fakeTracking = {
+        sendEvent: sinon.stub(),
+      };
+      const root = render({ _tracking: fakeTracking });
+      Simulate.click(root.querySelector('.amo-link a'));
+      assert.ok(fakeTracking.sendEvent.calledWith({
+        category: NAVIGATION_CATEGORY,
+        action: 'click',
+        label: 'See More Add-ons',
+      }));
+    });
+  });
 });