Send a tracking event when a Secondary Hero cta is clicked (#8635)

* Send a tracking event when a Secondary Hero cta is clicked

* Address review comments

src/amo/components/SecondaryHero/index.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import Link from 'amo/components/Link';
 import { addParamsToHeroURL, checkInternalURL } from 'amo/utils';
+import tracking from 'core/tracking';
 import type {
   HeroCallToActionType,
   SecondaryHeroShelfType,
@@ -11,6 +12,7 @@ import type {
 
 import './styles.scss';
 
+export const SECONDARY_HERO_CLICK_CATEGORY = 'AMO Secondary Hero Clicks';
 export const SECONDARY_HERO_SRC = 'homepage-secondary-hero';
 
 type Props = {| shelfData: SecondaryHeroShelfType |};
@@ -18,6 +20,7 @@ type Props = {| shelfData: SecondaryHeroShelfType |};
 type InternalProps = {|
   ...Props,
   _checkInternalURL: typeof checkInternalURL,
+  _tracking: typeof tracking,
 |};
 
 const makeCallToActionURL = (urlString: string) => {
@@ -26,6 +29,7 @@ const makeCallToActionURL = (urlString: string) => {
 
 export const SecondaryHeroBase = ({
   _checkInternalURL = checkInternalURL,
+  _tracking = tracking,
   shelfData,
 }: InternalProps) => {
   const { headline, description, cta, modules } = shelfData;
@@ -34,13 +38,22 @@ export const SecondaryHeroBase = ({
   invariant(description, 'The description property is required');
   invariant(modules, 'The modules property is required');
 
+  const onHeroClick = (event: SyntheticEvent<HTMLAnchorElement>) => {
+    _tracking.sendEvent({
+      action: event.currentTarget.href,
+      category: SECONDARY_HERO_CLICK_CATEGORY,
+    });
+  };
+
   const getLinkProps = (link: HeroCallToActionType | null) => {
+    const props = { onClick: onHeroClick };
     if (link) {
       const urlInfo = _checkInternalURL({ urlString: link.url });
       if (urlInfo.isInternal) {
-        return { to: makeCallToActionURL(urlInfo.relativeURL) };
+        return { ...props, to: makeCallToActionURL(urlInfo.relativeURL) };
       }
       return {
+        ...props,
         href: makeCallToActionURL(link.url),
         prependClientApp: false,
         prependLang: false,

tests/unit/amo/components/TestSecondaryHero.js

@@ -2,11 +2,17 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 
 import SecondaryHero, {
+  SECONDARY_HERO_CLICK_CATEGORY,
   SECONDARY_HERO_SRC,
 } from 'amo/components/SecondaryHero';
 import { createInternalHeroShelves } from 'amo/reducers/home';
 import { addParamsToHeroURL } from 'amo/utils';
-import { createHeroShelves, fakeAddon } from 'tests/unit/helpers';
+import {
+  createFakeEvent,
+  createFakeTracking,
+  createHeroShelves,
+  fakeAddon,
+} from 'tests/unit/helpers';
 
 describe(__filename, () => {
   const createShelfData = (secondaryProps = {}) => {
@@ -87,6 +93,23 @@ describe(__filename, () => {
     expect(root.find('.SecondaryHero-message-linkText')).toHaveLength(0);
   });
 
+  it('sends a tracking event when the cta is clicked', () => {
+    const _tracking = createFakeTracking();
+    const cta = { text: 'cta text', url: 'some/url' };
+    const shelfData = createShelfData({ cta });
+
+    const root = render({ _tracking, shelfData });
+
+    const event = createFakeEvent({ currentTarget: { href: cta.url } });
+    root.find('.SecondaryHero-message-link').simulate('click', event);
+
+    sinon.assert.calledWith(_tracking.sendEvent, {
+      action: event.currentTarget.href,
+      category: SECONDARY_HERO_CLICK_CATEGORY,
+    });
+    sinon.assert.calledOnce(_tracking.sendEvent);
+  });
+
   describe('modules', () => {
     const module1 = {
       icon: 'icon1',
@@ -174,5 +197,26 @@ describe(__filename, () => {
         }
       },
     );
+
+    it('sends a tracking event when the cta is clicked', () => {
+      const _tracking = createFakeTracking();
+
+      const root = render({ _tracking, shelfData });
+
+      const event = createFakeEvent({
+        currentTarget: { href: module1.cta.url },
+      });
+
+      root
+        .find('.SecondaryHero-module-link')
+        .at(0)
+        .simulate('click', event);
+
+      sinon.assert.calledWith(_tracking.sendEvent, {
+        action: event.currentTarget.href,
+        category: SECONDARY_HERO_CLICK_CATEGORY,
+      });
+      sinon.assert.calledOnce(_tracking.sendEvent);
+    });
   });
 });