Merge pull request #12276 from bbc/WSTEAM1-1549-live-media-tracking-new

WSTEAM1-1549: Adds click view tracking to Live Header Media

Author: Isabella-Mitchell

src/app/components/LiveHeaderMedia/index.test.tsx

@@ -7,10 +7,16 @@ import {
   render,
   fireEvent,
 } from '../react-testing-library-with-providers';
+import * as viewTracking from '../../hooks/useViewTracker';
+import * as clickTracking from '../../hooks/useClickTrackerHandler';
 
 const fixtureData = mundoLiveFixture.data.mediaCollections;
 
 describe('liveMediaStream', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('Displays all components on intial render.', () => {
     const { container } = render(
       <LiveHeaderMedia mediaCollection={fixtureData as MediaCollection[]} />,
@@ -226,4 +232,35 @@ describe('liveMediaStream', () => {
 
     expect(window.mediaPlayers.p0gh4n67.play).toHaveBeenCalledTimes(playCalls);
   });
+
+  describe('Event Tracking', () => {
+    const eventTrackingData = { componentName: 'live-header-media' };
+
+    describe('Click tracking', () => {
+      const clickTrackerSpy = jest.spyOn(clickTracking, 'default');
+
+      it('should register click tracker', () => {
+        render(
+          <LiveHeaderMedia
+            mediaCollection={fixtureData as MediaCollection[]}
+          />,
+        );
+        expect(clickTrackerSpy).toHaveBeenCalledWith(eventTrackingData);
+      });
+    });
+
+    describe('View tracking', () => {
+      const viewTrackerSpy = jest.spyOn(viewTracking, 'default');
+
+      it('should register view tracker', () => {
+        render(
+          <LiveHeaderMedia
+            mediaCollection={fixtureData as MediaCollection[]}
+          />,
+        );
+
+        expect(viewTrackerSpy).toHaveBeenCalledWith(eventTrackingData);
+      });
+    });
+  });
 });

src/app/components/LiveHeaderMedia/index.tsx

@@ -8,6 +8,9 @@ import MediaLoader from '#app/components/MediaLoader';
 import filterForBlockType from '#app/lib/utilities/blockHandlers';
 import { ServiceContext } from '#app/contexts/ServiceContext';
 import { RequestContext } from '#app/contexts/RequestContext';
+import useViewTracker from '#app/hooks/useViewTracker';
+import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
+import { EventTrackingMetadata } from '#app/models/types/eventTracking';
 import { regexPunctuationSymbols } from '#app/lib/utilities/idSanitiser';
 import styles from './index.styles';
 import WARNING_LEVELS from '../MediaLoader/configs/warningLevels';
@@ -21,7 +24,7 @@ type WarningItem = {
   short_description: string;
 };
 
-type Props = {
+type LiveHeaderMediaProps = {
   mediaCollection: MediaCollection[] | null;
   clickCallback?: () => void;
 };
@@ -36,11 +39,17 @@ const MemoizedMediaPlayer = memo(MediaLoader);
 const LiveHeaderMedia = ({
   mediaCollection,
   clickCallback = () => null,
-}: Props) => {
+}: LiveHeaderMediaProps) => {
   const { translations } = useContext(ServiceContext);
   const { isLite } = useContext(RequestContext);
   const [showMedia, setShowMedia] = useState(false);
 
+  const eventTrackingData: EventTrackingMetadata = {
+    componentName: 'live-header-media',
+  };
+  const clickTrackerHandler = useClickTrackerHandler(eventTrackingData);
+  const viewRef = useViewTracker(eventTrackingData);
+
   let warningLevel = WARNING_LEVELS.NO_WARNING;
 
   if (isLite || mediaCollection == null || mediaCollection.length === 0) {
@@ -83,7 +92,7 @@ const LiveHeaderMedia = ({
 
   const titleHasPunctuation = short.slice(-1).match(regexPunctuationSymbols);
 
-  const handleClick = () => {
+  const clickToggleMedia = () => {
     const mediaPlayer = window.mediaPlayers?.[vpid];
     if (showMedia) {
       mediaPlayer?.pause();
@@ -98,6 +107,11 @@ const LiveHeaderMedia = ({
     clickCallback();
   };
 
+  const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    clickTrackerHandler(e);
+    clickToggleMedia();
+  };
+
   const description = (
     <>
       <Text
@@ -131,10 +145,10 @@ const LiveHeaderMedia = ({
         <p>{description}</p>
         <strong>{noJs}</strong>
       </noscript>
-      <div css={styles.componentContainer}>
+      <div css={styles.componentContainer} ref={viewRef}>
         <button
           type="button"
-          onClick={() => handleClick()}
+          onClick={e => handleClick(e)}
           data-testid="watch-now-close-button"
           className="focusIndicatorInvert"
           css={[