feat: Add fronts-banner ads to Frontend UK Network Front

bundle/package.json

@@ -90,7 +90,7 @@
 	},
 	"dependencies": {
 		"@guardian/ab-core": "^4.0.0",
-		"@guardian/commercial-core": "^7.0.0",
+		"@guardian/commercial-core": "^7.1.0",
 		"@guardian/consent-management-platform": "^13.0.2",
 		"@guardian/core-web-vitals": "^4.0.0",
 		"@guardian/libs": "^14.0.0",

bundle/src/bootstraps/standalone.commercial.ts

@@ -36,6 +36,7 @@ import { init as prepareGoogletag } from '../projects/commercial/modules/dfp/pre
 import { initPermutive } from '../projects/commercial/modules/dfp/prepare-permutive';
 import { init as preparePrebid } from '../projects/commercial/modules/dfp/prepare-prebid';
 import { init as initRedplanet } from '../projects/commercial/modules/dfp/redplanet';
+import { init as initFrontsBannerAdverts } from '../projects/commercial/modules/fronts-banner-adverts';
 import { init as initHighMerch } from '../projects/commercial/modules/high-merch';
 import { init as initIpsosMori } from '../projects/commercial/modules/ipsos-mori';
 import { init as initLiveblogAdverts } from '../projects/commercial/modules/liveblog-adverts';
@@ -104,6 +105,7 @@ if (!commercialFeatures.adFree) {
 		['cm-articleAsideAdverts', initArticleAsideAdverts],
 		['cm-articleBodyAdverts', initArticleBodyAdverts],
 		['cm-liveblogAdverts', initLiveblogAdverts],
+		['cm-frontsBannerAdverts', initFrontsBannerAdverts],
 		['cm-thirdPartyTags', initThirdPartyTags],
 		['cm-redplanet', initRedplanet],
 		['cm-paidContainers', paidContainers],

bundle/src/projects/commercial/modules/dfp/Advert.ts

@@ -61,7 +61,15 @@ const isAdSize = (size: Advert['size']): size is AdSize => {
 };
 
 const getSlotSizeMapping = (name: string): SizeMapping => {
-	const slotName = name.includes('inline') ? 'inline' : name;
+	let slotName: string;
+	if (name.includes('inline')) {
+		slotName = 'inline';
+	} else if (name.includes('fronts-banner')) {
+		slotName = 'fronts-banner';
+	} else {
+		slotName = name;
+	}
+
 	if (isSlotName(slotName)) {
 		return slotSizeMappings[slotName];
 	}

bundle/src/projects/commercial/modules/fronts-banner-adverts.ts

@@ -0,0 +1,68 @@
+import { createAdSlot } from '@guardian/commercial-core';
+import fastdom from '../../../lib/fastdom-promise';
+import { addSlot } from './dfp/add-slot';
+
+/**
+ * A fronts banner advert will be inserted above each of the following sections.
+ */
+const sections = [
+	'opinion',
+	'sport',
+	'around-the-world',
+	'lifestyle',
+	'in-pictures',
+];
+
+const insertAdvertAboveSection = async (section: string, advertNum: number) => {
+	await fastdom.measure(() => {
+		const sectionNode = document.querySelector(`section#${section}`);
+		if (!sectionNode) return;
+
+		const ad = createAdSlot('fronts-banner', {
+			name: `fronts-banner-${advertNum}`,
+			classes: 'fronts-banner',
+		});
+
+		const adContainer = document.createElement('div');
+		adContainer.className = 'ad-slot-container fronts-banner-container';
+		adContainer.appendChild(ad);
+
+		void fastdom
+			.mutate(() => {
+				sectionNode.parentElement?.insertBefore(
+					adContainer,
+					sectionNode,
+				);
+			})
+			.then(() => {
+				void addSlot(ad, false);
+			});
+	});
+};
+
+export const init = async (): Promise<void> => {
+	const { switches, tests } = window.guardian.config;
+
+	const {
+		isDotcomRendering,
+		page: { contentType, edition },
+	} = window.guardian.config;
+
+	const isUkNetworkFront =
+		contentType === 'Network Front' && edition === 'UK';
+
+	if (
+		!switches.frontsBannerAds ||
+		tests?.frontsBannerAdsVariant !== 'variant' ||
+		!isUkNetworkFront ||
+		isDotcomRendering
+	) {
+		return;
+	}
+
+	const promises = sections.map(async (section, index) => {
+		return insertAdvertAboveSection(section, index + 1);
+	});
+
+	await Promise.allSettled(promises);
+};

bundle/src/projects/commercial/modules/header-bidding/request-bids.ts

@@ -8,7 +8,10 @@ const retainTopAboveNavSlotSize = (
 	advertSize: Advert['size'],
 	hbSlot: HeaderBiddingSlot,
 ): HeaderBiddingSlot[] => {
-	if (hbSlot.key !== 'top-above-nav') {
+	if (
+		hbSlot.key !== 'top-above-nav' &&
+		!hbSlot.key.startsWith('fronts-banner')
+	) {
 		return [hbSlot];
 	}
 

bundle/src/projects/commercial/modules/header-bidding/slot-config.ts

@@ -115,6 +115,9 @@ const getSlots = (): HeaderBiddingSizeMapping => {
 			tablet: [adSizes.leaderboard],
 			mobile: [adSizes.mpu],
 		},
+		'fronts-banner': {
+			desktop: [adSizes.billboard],
+		},
 		inline: {
 			desktop: isArticle
 				? [adSizes.skyscraper, adSizes.halfPage, adSizes.mpu]

bundle/src/projects/commercial/modules/header-bidding/types.d.ts

@@ -11,9 +11,13 @@ declare global {
 		| 'mostpop'
 		| 'right'
 		| 'top-above-nav'
+		| `fronts-banner-${number}`
 		| `inline${number}`;
 
-	type HeaderBiddingSizeKey = HeaderBiddingSlotName | 'inline';
+	type HeaderBiddingSizeKey =
+		| HeaderBiddingSlotName
+		| 'inline'
+		| 'fronts-banner';
 
 	type HeaderBiddingSlot = {
 		key: HeaderBiddingSizeKey;

yarn.lock

@@ -1297,10 +1297,10 @@
   resolved "https://registry.yarnpkg.com/@guardian/ab-core/-/ab-core-4.0.0.tgz#50c1fc076437e594b367f6e8d9469a3d9b97a78e"
   integrity sha512-l6Ot/anisLKyoLZOp8koW7Ia5JFOtmZkB0sfgdWajv5+N0w0UScUVoImEdPlFstM1anSd3FvV8D3UgYkRzAang==
 
-"@guardian/commercial-core@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@guardian/commercial-core/-/commercial-core-7.0.0.tgz#2bde098699e8d8121028bd03d10481e8664f8e06"
-  integrity sha512-ByfukhmfJ2sF5mCyVq5XSRyOdBp0w+MOTpOp361wjZ6a2KHSgSC8VQucgSQHtQ7v05O0jJ53XFkSrGc2TUworA==
+"@guardian/commercial-core@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@guardian/commercial-core/-/commercial-core-7.1.0.tgz#ebe05454873707a6b5eef238e10751379059c276"
+  integrity sha512-Ue1Km1W4w7J8ZYH+qqLgEPyk6j7TOz6Tn94yDPac30oDo3hauJDSH35wZRbwcJBc8hlKPCtqAEXSvtcx42pcig==
 
 "@guardian/consent-management-platform@^13.0.2":
   version "13.0.2"