Fire a view event only if the container has been personalised

Author: abeddow91

dotcom-rendering/src/components/ScrollableHighlights.importable.tsx

@@ -19,6 +19,7 @@ import { useAB } from '../lib/useAB';
 import { palette } from '../palette';
 import type { DCRFrontCard } from '../types/front';
 import { HighlightsCard } from './Masthead/HighlightsCard';
+import { submitComponentEvent } from '../client/ophan/ophan';
 
 type Props = {
 	trails: DCRFrontCard[];
@@ -344,6 +345,18 @@ export const ScrollableHighlights = ({ trails, frontId }: Props) => {
 		}
 		/* Otherwise, use personalised order from local storage */
 		setOrderedTrails(personalisedHighlights);
+
+		/* Fire a view event only if the container has been personalised */
+		void submitComponentEvent(
+			{
+				component: {
+					componentType: 'CONTAINER',
+					id: `reordered-highlights-container`,
+				},
+				action: 'VIEW',
+			},
+			'Web',
+		);
 	}, [trails]);
 
 	const { ophanComponentLink, ophanComponentName, ophanFrontName } =