From 0b36f736d2ec28fbfb94b965e57ab049212af0bf Mon Sep 17 00:00:00 2001 From: Isabella Mitchell Date: Wed, 15 Jan 2025 11:14:47 +0000 Subject: [PATCH 1/5] WSTEAM1-1549: Adds click view tracking --- .../components/LiveHeaderMedia/index.test.tsx | 63 +++++++++++++++++++ src/app/components/LiveHeaderMedia/index.tsx | 23 +++++-- .../[service]/live/[id]/Header/index.tsx | 3 + 3 files changed, 84 insertions(+), 5 deletions(-) diff --git a/src/app/components/LiveHeaderMedia/index.test.tsx b/src/app/components/LiveHeaderMedia/index.test.tsx index abc3748e38a..3836cf8d1b6 100644 --- a/src/app/components/LiveHeaderMedia/index.test.tsx +++ b/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( + , + ); + 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( + , + ); + 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( + , + ); + + expect(viewTrackerSpy).toHaveBeenCalledWith(undefined); + }); + + it('should register view tracker if event tracking data provided', () => { + render( + , + ); + + expect(viewTrackerSpy).toHaveBeenCalledWith(eventTrackingData); + }); + }); + }); }); diff --git a/src/app/components/LiveHeaderMedia/index.tsx b/src/app/components/LiveHeaderMedia/index.tsx index b4a9afe8bd8..bfa0c063287 100644 --- a/src/app/components/LiveHeaderMedia/index.tsx +++ b/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) => { + clickTrackerHandler(e); + clickToggleMedia(); + }; + const description = ( <> {description}

{noJs} -
+