eventTypes structured

Author: AnastasiiaBalenko

dotcom-rendering/src/components/EpicContent.apps.tsx

@@ -31,7 +31,13 @@ export function EpicContent({
 		if (impressionSeen && !reportedImpressionSeen) {
 			void getAcquisitionsClient().epicSeen();
 			setReportedImpressionSeen(true);
-			document.dispatchEvent(new CustomEvent('EpicContent in view'));
+			document.dispatchEvent(
+				new CustomEvent('epic:in-view', {
+					detail: {
+						epicType: 'apps',
+					},
+				}),
+			);
 		}
 	}, [impressionSeen, reportedImpressionSeen, setReportedImpressionSeen]);
 

dotcom-rendering/src/components/SlotBodyEnd/BrazeEpic.tsx

@@ -140,7 +140,13 @@ const BrazeEpicWithSatisfiedDependencies = ({
 				renderingTarget,
 			);
 
-			document.dispatchEvent(new CustomEvent('braze-epic:in-view'));
+			document.dispatchEvent(
+				new CustomEvent('epic:in-view', {
+					detail: {
+						epicType: 'braze',
+					},
+				}),
+			);
 		}
 	}, [hasBeenSeen, meta, renderingTarget]);
 

dotcom-rendering/src/components/StickyBottomBanner/BrazeBanner.tsx

@@ -137,7 +137,11 @@ const BrazeBannerWithSatisfiedDependencies = ({
 
 	useEffect(() => {
 		if (hasBeenSeen) {
-			document.dispatchEvent(new CustomEvent('braze-banner:in-view'));
+			document.dispatchEvent(
+				new CustomEvent('banner:open', {
+					detail: { bannerId: 'braze-banner' },
+				}),
+			);
 		}
 	}, [hasBeenSeen]);
 

dotcom-rendering/src/components/marketing/banners/common/BannerWrapper.tsx

@@ -115,7 +115,7 @@ const withBannerData =
 		useEffect(() => {
 			if (hasBeenSeen) {
 				document.dispatchEvent(
-					new CustomEvent('banner:in-view', { detail: { bannerId } }),
+					new CustomEvent('banner:open', { detail: { bannerId } }),
 				);
 			}
 		}, [hasBeenSeen]);

dotcom-rendering/src/components/marketing/epics/ContributionsEpic.tsx

@@ -286,7 +286,11 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
 			// For epic view count
 			logEpicView(tracking.abTestName);
 			document.dispatchEvent(
-				new CustomEvent('contributions-epic:in-view'),
+				new CustomEvent('epic:in-view', {
+					detail: {
+						epicType: 'contributions',
+					},
+				}),
 			);
 
 			// For ophan

dotcom-rendering/src/components/marketing/epics/ContributionsLiveblogEpic.tsx

@@ -158,7 +158,13 @@ export const ContributionsLiveblogEpic: ReactComponent<EpicProps> = ({
 		if (hasBeenSeen) {
 			// For epic view count
 			logEpicView(tracking.abTestName);
-			document.dispatchEvent(new CustomEvent('liveblog-epic:in-view'));
+			document.dispatchEvent(
+				new CustomEvent('epic:in-view', {
+					detail: {
+						epicType: 'liveblog-contributions',
+					},
+				}),
+			);
 
 			// For ophan
 			if (submitComponentEvent) {

dotcom-rendering/src/components/marketing/gutters/GutterAskWrapper.tsx

@@ -71,7 +71,7 @@ export const GutterAskWrapper: ReactComponent<GutterProps> = (
 	useEffect(() => {
 		if (hasBeenSeen) {
 			sendOphanEvent('VIEW');
-			document.dispatchEvent(new CustomEvent('gutter-ask:in-view'));
+			document.dispatchEvent(new CustomEvent('gutter:in-view'));
 		}
 	}, [hasBeenSeen, sendOphanEvent]);