Add reducer to remove consecutive ad slots for fronts with secondary level containers (#13796)

Additionally prevents ad insertion directly before the container attached to the merch high position

Author: cemms1

dotcom-rendering/src/lib/getFrontsAdPositions.test.ts

@@ -9,6 +9,7 @@ import {
 	type AdCandidateMobile,
 	getFrontsBannerAdPositions,
 	getMobileAdPositions,
+	removeConsecutiveAdSlotsReducer,
 } from './getFrontsAdPositions';
 
 const defaultTestCollections: AdCandidateMobile[] = [...Array<number>(12)].map(
@@ -60,14 +61,14 @@ describe('Mobile Ads', () => {
 			{ collectionType: 'fixed/medium/slow-VI' },
 			{ collectionType: 'fixed/small/slow-IV' }, // Ad position (8)
 			{ collectionType: 'fixed/small/slow-III' },
-			{ collectionType: 'fixed/medium/fast-XII' }, // Ad position (10)
+			{ collectionType: 'fixed/medium/fast-XII' }, // Ignored - is before merch high position
 			{ collectionType: 'fixed/small/fast-VIII' }, // Ignored - is merch high position
 			{ collectionType: 'news/most-popular' }, // Ignored - is most viewed container
 		];
 
 		const mobileAdPositions = getMobileAdPositions(testCollections);
 
-		expect(mobileAdPositions).toEqual([0, 2, 4, 6, 8, 10]);
+		expect(mobileAdPositions).toEqual([0, 2, 4, 6, 8]);
 	});
 
 	// We used https://www.theguardian.com/uk as a blueprint
@@ -94,14 +95,14 @@ describe('Mobile Ads', () => {
 			{ collectionType: 'fixed/small/slow-IV' },
 			{ collectionType: 'fixed/small/slow-IV' }, // Ad position (19)
 			{ collectionType: 'dynamic/slow-mpu' },
-			{ collectionType: 'fixed/small/slow-IV' }, // Ad position (21)
+			{ collectionType: 'fixed/small/slow-IV' }, // Ignored - is before merch high position
 			{ collectionType: 'fixed/medium/slow-VI' }, // Ignored - is merch high position
 			{ collectionType: 'news/most-popular' }, // Ignored - is most viewed container
 		];
 
 		const mobileAdPositions = getMobileAdPositions(testCollections);
 
-		expect(mobileAdPositions).toEqual([0, 2, 4, 8, 11, 14, 17, 19, 21]);
+		expect(mobileAdPositions).toEqual([0, 2, 4, 8, 11, 14, 17, 19]);
 	});
 
 	// We used https://www.theguardian.com/international as a blueprint
@@ -205,14 +206,14 @@ describe('Mobile Ads', () => {
 			{ collectionType: 'fixed/small/slow-III' },
 			{ collectionType: 'fixed/small/slow-IV' }, // Ad position (9)
 			{ collectionType: 'fixed/small/slow-V-half' },
-			{ collectionType: 'fixed/small/slow-V-third' }, // Ad position (11)
+			{ collectionType: 'fixed/small/slow-V-third' }, // Ignored - is before merch high position
 			{ collectionType: 'fixed/small/fast-VIII' }, // Ignored - is merch high position
 			{ collectionType: 'news/most-popular' }, // Ignored - is most viewed container
 		];
 
 		const mobileAdPositions = getMobileAdPositions(testCollections);
 
-		expect(mobileAdPositions).toEqual([1, 3, 5, 7, 9, 11]);
+		expect(mobileAdPositions).toEqual([1, 3, 5, 7, 9]);
 	});
 
 	it('Europe Network Front, with beta containers and more than 4 collections, with thrashers in various places', () => {
@@ -235,12 +236,11 @@ describe('Mobile Ads', () => {
 			}, // Ad position (6)
 			{ collectionType: 'flexible/special', containerLevel: 'Primary' }, // Ignored - is before thrasher
 			{ collectionType: 'fixed/thrasher' }, // Ad position (8)
-			{ collectionType: 'flexible/general', containerLevel: 'Primary' }, // Ignored - is before secondary container
-			{ collectionType: 'scrollable/small', containerLevel: 'Secondary' }, // Ad position (10)
+			{ collectionType: 'flexible/general', containerLevel: 'Primary' }, // Ignored is consecutive ad after position 8
 			{ collectionType: 'static/feature/2', containerLevel: 'Primary' }, // Ignored - is before secondary container
 			{ collectionType: 'scrollable/small', containerLevel: 'Secondary' }, // Ignored - is before secondary container
 			{ collectionType: 'scrollable/small', containerLevel: 'Secondary' }, // Ignored - is before secondary container
-			{ collectionType: 'scrollable/small', containerLevel: 'Secondary' }, // Ad position (14)
+			{ collectionType: 'scrollable/small', containerLevel: 'Secondary' }, // Ad position (13)
 			{ collectionType: 'static/feature/2', containerLevel: 'Primary' }, // Ignored - is before secondary container
 			{
 				collectionType: 'scrollable/medium',
@@ -251,7 +251,7 @@ describe('Mobile Ads', () => {
 				containerLevel: 'Secondary',
 			}, // Ignored - is before secondary container
 			{ collectionType: 'scrollable/small', containerLevel: 'Secondary' }, // Ignored - is before thrasher
-			{ collectionType: 'fixed/thrasher' }, // Ad position (19)
+			{ collectionType: 'fixed/thrasher' }, // Ad position (18)
 			{ collectionType: 'flexible/general', containerLevel: 'Primary' }, // Ignored - is before secondary container
 			{
 				collectionType: 'scrollable/feature',
@@ -262,7 +262,7 @@ describe('Mobile Ads', () => {
 
 		const mobileAdPositions = getMobileAdPositions(testCollections);
 
-		expect(mobileAdPositions).toEqual([0, 4, 6, 8, 10, 14, 19]);
+		expect(mobileAdPositions).toEqual([0, 4, 6, 8, 13, 18]);
 	});
 });
 
@@ -319,3 +319,23 @@ describe('Standard fronts fronts-banner ad slots', () => {
 		expect(adPositions.length).toEqual(8);
 	});
 });
+
+describe('removeConsecutiveAdSlotsReducer', () => {
+	it('removes consecutive slots from array of all consecutive numbers', () => {
+		const arr = [0, 1, 2, 3, 4, 5];
+		const result = arr.reduce(removeConsecutiveAdSlotsReducer, []);
+		expect(result).toEqual([0, 2, 4]);
+	});
+
+	it('removes consecutive slots from array of some consecutive numbers', () => {
+		const arr = [0, 3, 7, 11, 12, 13, 19, 20];
+		const result = arr.reduce(removeConsecutiveAdSlotsReducer, []);
+		expect(result).toEqual([0, 3, 7, 11, 13, 19]);
+	});
+
+	it('handles empty array', () => {
+		const arr: number[] = [];
+		const result = arr.reduce(removeConsecutiveAdSlotsReducer, []);
+		expect(result).toEqual([]);
+	});
+});

dotcom-rendering/src/lib/getFrontsAdPositions.ts

@@ -34,10 +34,12 @@ const getMerchHighPosition = (collections: AdCandidateMobile[]): number => {
 const isFirstContainerAndThrasher = (collectionType: string, index: number) =>
 	index === 0 && collectionType === 'fixed/thrasher';
 
-const isMerchHighPosition = (
+const isMerchHighPositionOrBefore = (
 	collectionIndex: number,
 	merchHighPosition: number,
-): boolean => collectionIndex === merchHighPosition;
+): boolean =>
+	collectionIndex === merchHighPosition ||
+	collectionIndex === merchHighPosition - 1;
 
 const isBeforeThrasher = (index: number, collections: AdCandidateMobile[]) =>
 	collections[index + 1]?.collectionType === 'fixed/thrasher';
@@ -58,6 +60,22 @@ const isBeforeSecondaryLevelContainer = (
 const hasSecondaryLevelContainers = (collections: AdCandidateMobile[]) =>
 	!!collections.find((c) => c.containerLevel === 'Secondary');
 
+export const removeConsecutiveAdSlotsReducer = (
+	acc: number[],
+	slotNum: number,
+): number[] => {
+	const prevSlot = acc.at(-1);
+	if (isUndefined(prevSlot)) {
+		// Insert first slot
+		return [slotNum];
+	} else if (prevSlot < slotNum - 1) {
+		// If previous slot is more than 1 index away from current slot, we're happy
+		return [...acc, slotNum];
+	} else {
+		return acc;
+	}
+};
+
 /**
  * Checks if mobile ad insertion is possible immediately after the
  * position of the current collection
@@ -77,13 +95,13 @@ const canInsertMobileAd =
 	) => {
 		/**
 		 * Ad slots can only be inserted after positions that satisfy the following rules:
-		 * - Is NOT the slot used for the merch high position
+		 * - Is NOT the slot used for the merch high position or the slot before that
 		 * - Is NOT a thrasher if it is the first container
 		 * - Is NOT before a thrasher
 		 * - Is NOT the most viewed container
 		 */
 		const rules = [
-			!isMerchHighPosition(index, merchHighPosition),
+			!isMerchHighPositionOrBefore(index, merchHighPosition),
 			!isFirstContainerAndThrasher(collection.collectionType, index),
 			!isBeforeThrasher(index, collections),
 			!isMostViewedContainer(collection),
@@ -126,6 +144,13 @@ const getMobileAdPositions = (collections: AdCandidateMobile[]): number[] => {
 			)
 			.map((collection) => collections.indexOf(collection))
 			.filter((adPosition: number) => adPosition !== -1)
+			// Avoid consecutive ad slots if the front does have secondary containers
+			.reduce(
+				hasSecondaryContainers
+					? removeConsecutiveAdSlotsReducer
+					: (acc: number[], el: number) => [...acc, el], // returns the original array
+				[],
+			)
 			.slice(0, MAX_FRONTS_MOBILE_ADS)
 	);
 };
@@ -348,7 +373,6 @@ const getFrontsBannerAdPositions = (
 
 export {
 	isEvenIndex,
-	isMerchHighPosition,
 	getMerchHighPosition,
 	getMobileAdPositions,
 	getFrontsBannerAdPositions,