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

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

@@ -7,6 +7,8 @@ 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;
 
@@ -159,4 +161,65 @@ describe('liveMediaStream', () => {
 
     expect(window.mediaPlayers.p0gh4n67.play).toHaveBeenCalledTimes(playCalls);
   });
+
+  describe('Event Tracking', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+    const eventTrackingData = { componentName: 'live-header-media' };
+
+    describe('Click tracking', () => {
+      const clickTrackerSpy = jest.spyOn(clickTracking, 'default');
+
+      it('should not be enabled if event tracking data not provided', () => {
+        render(
+          <LiveHeaderMedia
+            mediaCollection={fixtureData as MediaCollection[]}
+          />,
+        );
+        const playCloseButton = screen.getByTestId('watch-now-close-button');
+        fireEvent.click(playCloseButton);
+        expect(clickTrackerSpy).toHaveBeenCalledWith(undefined);
+      });
+      it('should register click tracker if event tracking data provided', () => {
+        render(
+          <LiveHeaderMedia
+            mediaCollection={fixtureData as MediaCollection[]}
+            eventTrackingData={{
+              componentName: 'live-header-media',
+            }}
+          />,
+        );
+        expect(clickTrackerSpy).toHaveBeenCalledWith(eventTrackingData);
+        expect(clickTrackerSpy).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('View tracking', () => {
+      const viewTrackerSpy = jest.spyOn(viewTracking, 'default');
+
+      it('should not be enabled if event tracking data not provided', () => {
+        render(
+          <LiveHeaderMedia
+            mediaCollection={fixtureData as MediaCollection[]}
+          />,
+        );
+
+        expect(viewTrackerSpy).toHaveBeenCalledWith(undefined);
+      });
+
+      it('should register view tracker if event tracking data provided', () => {
+        render(
+          <LiveHeaderMedia
+            mediaCollection={fixtureData as MediaCollection[]}
+            eventTrackingData={{
+              componentName: 'live-header-media',
+            }}
+          />,
+        );
+
+        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 styles from './index.styles';
 import WARNING_LEVELS from '../MediaLoader/configs/warningLevels';
 import VisuallyHiddenText from '../VisuallyHiddenText';
@@ -20,8 +23,9 @@ type WarningItem = {
   short_description: string;
 };
 
-type Props = {
+type LiveHeaderMediaProps = {
   mediaCollection: MediaCollection[] | null;
+  eventTrackingData?: EventTrackingMetadata;
   clickCallback?: () => void;
 };
 
@@ -34,12 +38,16 @@ const MemoizedMediaPlayer = memo(MediaLoader);
 
 const LiveHeaderMedia = ({
   mediaCollection,
+  eventTrackingData,
   clickCallback = () => null,
-}: Props) => {
+}: LiveHeaderMediaProps) => {
+  const clickTrackerHandler = useClickTrackerHandler(eventTrackingData);
   const { translations } = useContext(ServiceContext);
   const { isLite } = useContext(RequestContext);
   const [showMedia, setShowMedia] = useState(false);
 
+  const viewRef = useViewTracker(eventTrackingData);
+
   let warningLevel = WARNING_LEVELS.NO_WARNING;
 
   if (isLite || mediaCollection == null || mediaCollection.length === 0) {
@@ -80,7 +88,7 @@ const LiveHeaderMedia = ({
     warningLevel = WARNING_LEVELS[highestWarning.warning_code];
   }
 
-  const handleClick = () => {
+  const clickToggleMedia = () => {
     const mediaPlayer = window.mediaPlayers?.[vpid];
     if (showMedia) {
       mediaPlayer?.pause();
@@ -95,6 +103,11 @@ const LiveHeaderMedia = ({
     clickCallback();
   };
 
+  const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    clickTrackerHandler(e);
+    clickToggleMedia();
+  };
+
   const description = (
     <>
       <Text
@@ -138,10 +151,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={[

ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx

@@ -93,6 +93,9 @@ const Header = ({
           {mediaCollections && (
             <LiveHeaderMedia
               mediaCollection={mediaCollections}
+              eventTrackingData={{
+                componentName: 'live-header-media',
+              }}
               clickCallback={watchVideoClickHandler}
             />
           )}