@guardian/commercial-core 0.0.0-beta-20250716121613

package/dist/esm/ad-sizes.d.ts

@@ -0,0 +1,202 @@
+import type { Breakpoint } from './breakpoint';
+type AdSizeString = 'fluid' | `${number},${number}`;
+/**
+ * Store ad sizes in a way that is compatible with google-tag but also accessible via
+ * more semantic `width`/`height` properties and keep things readonly.
+ *
+ * example:
+ * const size = new AdSize([300, 250]);
+ *
+ * size.width === 300; // true
+ * size[0] === 300; // true
+ *
+ * size.height === 250; // true
+ * size[1] === 250; // true
+ *
+ * size[0] = 200; // throws error
+ * size.width = 200; // throws error
+ *
+ */
+declare class AdSize extends Array<number> {
+    readonly [0]: number;
+    readonly [1]: number;
+    constructor([width, height]: [number, number]);
+    toString(): AdSizeString;
+    toArray(): number[];
+    isProxy(): boolean;
+    get width(): number;
+    get height(): number;
+}
+type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'cascade' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'portraitInterstitial' | 'pubmaticInterscroller' | 'skyscraper' | 'sponsorLogo';
+type SlotName = 'article-end' | 'carrot' | 'comments-expanded' | 'comments' | 'crossword-banner-mobile' | 'exclusion' | 'external' | 'fronts-banner' | 'inline' | 'liveblog-top' | 'merchandising-high' | 'merchandising' | 'mobile-sticky' | 'football-right' | 'mostpop' | 'right' | 'sponsor-logo' | 'survey' | 'top-above-nav' | 'interactive';
+type SizeMapping = Partial<Record<Breakpoint, readonly AdSize[]>>;
+type SlotSizeMappings = Record<SlotName, SizeMapping>;
+declare const createAdSize: (width: number, height: number) => AdSize;
+declare const standardAdSizes: {
+    '970x250': AdSize;
+    '300x600': AdSize;
+    '728x90': AdSize;
+    '300x250': AdSize;
+    '300x1050': AdSize;
+    '160x600': AdSize;
+};
+declare const outstreamSizes: {
+    outstreamDesktop: AdSize;
+    outstreamGoogleDesktop: AdSize;
+    outstreamMobile: AdSize;
+};
+declare const adSizes: {
+    readonly empty: AdSize;
+    readonly fabric: AdSize;
+    readonly merchandising: AdSize;
+    readonly merchandisingHigh: AdSize;
+    readonly merchandisingHighAdFeature: AdSize;
+    readonly sponsorLogo: AdSize;
+    readonly fluid: AdSize;
+    readonly googleCard: AdSize;
+    readonly outOfPage: AdSize;
+    readonly pubmaticInterscroller: AdSize;
+    readonly outstreamDesktop: AdSize;
+    readonly outstreamGoogleDesktop: AdSize;
+    readonly outstreamMobile: AdSize;
+    readonly '970x250': AdSize;
+    readonly '300x600': AdSize;
+    readonly '728x90': AdSize;
+    readonly '300x250': AdSize;
+    readonly '300x1050': AdSize;
+    readonly '160x600': AdSize;
+    readonly billboard: AdSize;
+    readonly halfPage: AdSize;
+    readonly leaderboard: AdSize;
+    readonly mobilesticky: AdSize;
+    readonly mpu: AdSize;
+    readonly portrait: AdSize;
+    readonly skyscraper: AdSize;
+    readonly cascade: AdSize;
+    readonly portraitInterstitial: AdSize;
+};
+/**
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
+ * Some of these may or may not need to be synced for with the sizes in ./create-ad-slot.ts
+ * these were originally from DCR, create-ad-slot.ts ones were in frontend.
+ *
+ * Note:
+ * If a breakpoint is not defined in a size mapping for a slot, that breakpoint will use the sizes
+ * of the next breakpoint down that has a size mapping. For example, if only "mobile" and "phablet" sizes
+ * are defined for a slot, all breakpoints larger than "phablet" will use the mapping for "phablet".
+ *
+ * In another example, if a slot has only "tablet" as a size mapping defined,
+ * then "desktop" will use the size mapping for "tablet". "mobile" and "phablet"
+ * will have no size mapping. This type of example may be used in cases where
+ * we only want the slot to appear on the "tablet" size or greater.
+ **/
+declare const slotSizeMappings: {
+    readonly inline: {
+        readonly mobile: readonly [AdSize, AdSize, AdSize, AdSize, AdSize, AdSize];
+        readonly desktop: readonly [AdSize, AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly right: {
+        readonly mobile: readonly [AdSize, AdSize, AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly comments: {
+        readonly mobile: readonly [AdSize, AdSize, AdSize, AdSize, AdSize, AdSize];
+        readonly desktop: readonly [AdSize, AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly 'comments-expanded': {
+        readonly mobile: readonly [AdSize, AdSize];
+        readonly desktop: readonly [AdSize, AdSize, AdSize, AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly 'top-above-nav': {
+        readonly mobile: readonly [AdSize, AdSize, AdSize, AdSize, AdSize, AdSize];
+        readonly tablet: readonly [AdSize, AdSize, AdSize, AdSize, AdSize];
+        readonly desktop: readonly [AdSize, AdSize, AdSize, AdSize, AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly 'fronts-banner': {
+        readonly tablet: readonly [AdSize, AdSize];
+        readonly desktop: readonly [AdSize, AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly mostpop: {
+        readonly mobile: readonly [AdSize, AdSize, AdSize, AdSize, AdSize];
+        readonly phablet: readonly [AdSize, AdSize, AdSize, AdSize, AdSize, AdSize, AdSize];
+        readonly tablet: readonly [AdSize, AdSize, AdSize, AdSize, AdSize, AdSize];
+        readonly desktop: readonly [AdSize, AdSize, AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly 'liveblog-top': {
+        readonly mobile: readonly [AdSize, AdSize, AdSize, AdSize];
+        readonly tablet: readonly [];
+        readonly desktop: readonly [];
+    };
+    readonly 'merchandising-high': {
+        readonly mobile: readonly [AdSize, AdSize, AdSize, AdSize, AdSize];
+        readonly tablet: readonly [AdSize, AdSize, AdSize, AdSize];
+        readonly desktop: readonly [AdSize, AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly merchandising: {
+        readonly mobile: readonly [AdSize, AdSize, AdSize, AdSize, AdSize];
+        readonly tablet: readonly [AdSize, AdSize, AdSize, AdSize];
+        readonly desktop: readonly [AdSize, AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly survey: {
+        readonly desktop: readonly [AdSize];
+    };
+    readonly carrot: {
+        readonly mobile: readonly [AdSize];
+    };
+    readonly 'mobile-sticky': {
+        readonly mobile: readonly [AdSize, AdSize, AdSize];
+    };
+    readonly 'crossword-banner-mobile': {
+        readonly mobile: readonly [AdSize];
+    };
+    readonly 'football-right': {
+        readonly desktop: readonly [AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly 'article-end': {
+        readonly mobile: readonly [];
+    };
+    readonly exclusion: {
+        readonly mobile: readonly [AdSize];
+    };
+    /**
+     * @deprecated Use `slotSizeMappings['sponsor-logo']` instead
+     */
+    readonly external: {
+        readonly mobile: readonly [AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly 'sponsor-logo': {
+        readonly mobile: readonly [AdSize, AdSize, AdSize, AdSize];
+    };
+    readonly interactive: {
+        readonly mobile: readonly [AdSize, AdSize];
+        readonly tablet: readonly [AdSize, AdSize];
+        readonly desktop: readonly [AdSize, AdSize];
+    };
+};
+declare const getAdSize: (size: SizeKeys) => AdSize;
+/**
+ * Finds the ad sizes that will be used for a breakpoint given a size mapping
+ *
+ * If ad sizes are defined in the size mapping for the specified breakpoint, we use that.
+ * If no sizes are defined for the breakpoint, use the next smallest breakpoint with defined ad sizes.
+ * If no smaller breakpoints have defined ad sizes, return an empty array
+ *
+ * Example:
+ * For the following slotSizeMappings:
+ *     inline: {
+ *         phablet: [adSizes.mpu],
+ *         desktop: [adSizes.billboard]
+ *     }
+ * the applied sizes for each breakpoint for the "inline" slot will be:
+ *     mobile: []
+ *     phablet: [adSizes.mpu]
+ *     tablet: [adSizes.mpu]
+ *     desktop: [adSizes.billboard]
+ *
+ * See ad-sizes.test.ts for more examples
+ */
+declare const findAppliedSizesForBreakpoint: (sizeMappings: SizeMapping, breakpoint: Breakpoint) => readonly AdSize[];
+export declare const _: {
+    createAdSize: (width: number, height: number) => AdSize;
+};
+export type { AdSizeString, SizeKeys, SizeMapping, SlotSizeMappings, SlotName };
+export { AdSize, adSizes, standardAdSizes, outstreamSizes, getAdSize, slotSizeMappings, createAdSize, findAppliedSizesForBreakpoint, };

package/dist/esm/ad-sizes.js

@@ -0,0 +1,390 @@
+import { breakpoints, isBreakpoint } from './breakpoint';
+/**
+ * Store ad sizes in a way that is compatible with google-tag but also accessible via
+ * more semantic `width`/`height` properties and keep things readonly.
+ *
+ * example:
+ * const size = new AdSize([300, 250]);
+ *
+ * size.width === 300; // true
+ * size[0] === 300; // true
+ *
+ * size.height === 250; // true
+ * size[1] === 250; // true
+ *
+ * size[0] = 200; // throws error
+ * size.width = 200; // throws error
+ *
+ */
+class AdSize extends Array {
+    [0];
+    [1];
+    constructor([width, height]) {
+        super();
+        this[0] = width;
+        this[1] = height;
+    }
+    toString() {
+        return this.width === 0 && this.height === 0
+            ? 'fluid'
+            : `${this.width},${this.height}`;
+    }
+    toArray() {
+        return [this[0], this[1]];
+    }
+    // The advert size is not reflective of the actual size of the advert.
+    // For example, fluid ads and Guardian merch ads are larger than the dimensions
+    isProxy() {
+        const isOutOfPage = this.width === 1 && this.height === 1;
+        const isEmpty = this.width === 2 && this.height === 2;
+        const isFluid = this.toString() === 'fluid';
+        const isMerch = this.width === 88;
+        const isSponsorLogo = this.width === 3 && this.height === 3;
+        return isOutOfPage || isEmpty || isFluid || isMerch || isSponsorLogo;
+    }
+    get width() {
+        return this[0];
+    }
+    get height() {
+        return this[1];
+    }
+}
+const createAdSize = (width, height) => {
+    return new AdSize([width, height]);
+};
+const namedStandardAdSizes = {
+    billboard: createAdSize(970, 250),
+    halfPage: createAdSize(300, 600),
+    leaderboard: createAdSize(728, 90),
+    mobilesticky: createAdSize(320, 50),
+    mpu: createAdSize(300, 250),
+    portrait: createAdSize(300, 1050),
+    skyscraper: createAdSize(160, 600),
+    cascade: createAdSize(940, 230),
+    portraitInterstitial: createAdSize(320, 480),
+};
+const standardAdSizes = {
+    '970x250': namedStandardAdSizes.billboard,
+    '300x600': namedStandardAdSizes.halfPage,
+    '728x90': namedStandardAdSizes.leaderboard,
+    '300x250': namedStandardAdSizes.mpu,
+    '300x1050': namedStandardAdSizes.portrait,
+    '160x600': namedStandardAdSizes.skyscraper,
+};
+const outstreamSizes = {
+    outstreamDesktop: createAdSize(620, 350),
+    outstreamGoogleDesktop: createAdSize(550, 310),
+    outstreamMobile: createAdSize(300, 197),
+};
+/**
+ * Ad sizes commonly associated with third parties
+ */
+const proprietaryAdSizes = {
+    fluid: createAdSize(0, 0),
+    googleCard: createAdSize(300, 274),
+    outOfPage: createAdSize(1, 1),
+    pubmaticInterscroller: createAdSize(371, 660), // pubmatic only mobile size
+};
+/**
+ * Ad sizes associated with in-house formats
+ */
+const guardianProprietaryAdSizes = {
+    empty: createAdSize(2, 2),
+    fabric: createAdSize(88, 71),
+    merchandising: createAdSize(88, 88),
+    merchandisingHigh: createAdSize(88, 87),
+    merchandisingHighAdFeature: createAdSize(88, 89),
+    /**
+     * This is a proxy size (not the true size of the rendered creative)
+     * that can be used to ensure that no other high priority line items
+     * fill a certain slot.
+     */
+    sponsorLogo: createAdSize(3, 3),
+};
+const adSizes = {
+    ...namedStandardAdSizes,
+    ...standardAdSizes,
+    ...outstreamSizes,
+    ...proprietaryAdSizes,
+    ...guardianProprietaryAdSizes,
+};
+/**
+ * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
+ * Some of these may or may not need to be synced for with the sizes in ./create-ad-slot.ts
+ * these were originally from DCR, create-ad-slot.ts ones were in frontend.
+ *
+ * Note:
+ * If a breakpoint is not defined in a size mapping for a slot, that breakpoint will use the sizes
+ * of the next breakpoint down that has a size mapping. For example, if only "mobile" and "phablet" sizes
+ * are defined for a slot, all breakpoints larger than "phablet" will use the mapping for "phablet".
+ *
+ * In another example, if a slot has only "tablet" as a size mapping defined,
+ * then "desktop" will use the size mapping for "tablet". "mobile" and "phablet"
+ * will have no size mapping. This type of example may be used in cases where
+ * we only want the slot to appear on the "tablet" size or greater.
+ **/
+const slotSizeMappings = {
+    inline: {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.outstreamMobile,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.fluid,
+        ],
+        desktop: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.fluid,
+        ],
+    },
+    right: {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.halfPage,
+            adSizes.fluid,
+        ],
+    },
+    comments: {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.outstreamMobile,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.fluid,
+        ],
+        desktop: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.fluid,
+        ],
+    },
+    'comments-expanded': {
+        mobile: [adSizes.mpu, adSizes.empty],
+        desktop: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.fluid,
+            adSizes.skyscraper,
+            adSizes.halfPage,
+        ],
+    },
+    'top-above-nav': {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.fabric,
+            adSizes.outstreamMobile,
+            adSizes.mpu,
+            adSizes.fluid,
+        ],
+        tablet: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.fabric,
+            adSizes.fluid,
+            adSizes.leaderboard,
+        ],
+        desktop: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.leaderboard,
+            createAdSize(940, 230),
+            createAdSize(900, 250),
+            adSizes.billboard,
+            adSizes.fabric,
+            adSizes.fluid,
+        ],
+    },
+    'fronts-banner': {
+        tablet: [adSizes.empty, adSizes.leaderboard],
+        desktop: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.billboard,
+            adSizes.merchandisingHigh,
+            adSizes.fluid,
+        ],
+    },
+    mostpop: {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.fluid,
+        ],
+        phablet: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.outstreamMobile,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.halfPage,
+            adSizes.fluid,
+        ],
+        tablet: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.halfPage,
+            adSizes.fluid,
+        ],
+        desktop: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.halfPage,
+            adSizes.fluid,
+        ],
+    },
+    'liveblog-top': {
+        mobile: [adSizes.outOfPage, adSizes.empty, adSizes.mpu, adSizes.fluid],
+        tablet: [],
+        desktop: [],
+    },
+    'merchandising-high': {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.merchandisingHigh,
+            adSizes.fluid,
+            adSizes.mpu,
+        ],
+        tablet: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.merchandisingHigh,
+            adSizes.fluid,
+        ],
+        desktop: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.merchandisingHigh,
+            adSizes.fluid,
+            adSizes.billboard,
+        ],
+    },
+    merchandising: {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.merchandising,
+            adSizes.fluid,
+            adSizes.mpu,
+        ],
+        tablet: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.merchandising,
+            adSizes.fluid,
+        ],
+        desktop: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.merchandising,
+            adSizes.fluid,
+            adSizes.billboard,
+        ],
+    },
+    survey: {
+        desktop: [adSizes.outOfPage],
+    },
+    carrot: {
+        mobile: [adSizes.fluid],
+    },
+    'mobile-sticky': {
+        mobile: [adSizes.mobilesticky, adSizes.empty, createAdSize(300, 50)],
+    },
+    'crossword-banner-mobile': {
+        mobile: [adSizes.mobilesticky],
+    },
+    'football-right': {
+        desktop: [
+            adSizes.empty,
+            adSizes.mpu,
+            adSizes.skyscraper,
+            adSizes.halfPage,
+        ],
+    },
+    'article-end': {
+        mobile: [], // Mappings are dynamically added for this slot using additionalSizes
+    },
+    exclusion: {
+        mobile: [adSizes.empty],
+    },
+    /**
+     * @deprecated Use `slotSizeMappings['sponsor-logo']` instead
+     */
+    external: {
+        mobile: [adSizes.outOfPage, adSizes.empty, adSizes.fluid, adSizes.mpu],
+    },
+    'sponsor-logo': {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.fluid,
+            adSizes.sponsorLogo,
+        ],
+    },
+    interactive: {
+        // Mappings are dynamically added for this slot using data attributes
+        mobile: [adSizes.outOfPage, adSizes.empty],
+        tablet: [adSizes.outOfPage, adSizes.empty],
+        desktop: [adSizes.outOfPage, adSizes.empty],
+    },
+};
+const getAdSize = (size) => adSizes[size];
+/**
+ * Finds the ad sizes that will be used for a breakpoint given a size mapping
+ *
+ * If ad sizes are defined in the size mapping for the specified breakpoint, we use that.
+ * If no sizes are defined for the breakpoint, use the next smallest breakpoint with defined ad sizes.
+ * If no smaller breakpoints have defined ad sizes, return an empty array
+ *
+ * Example:
+ * For the following slotSizeMappings:
+ *     inline: {
+ *         phablet: [adSizes.mpu],
+ *         desktop: [adSizes.billboard]
+ *     }
+ * the applied sizes for each breakpoint for the "inline" slot will be:
+ *     mobile: []
+ *     phablet: [adSizes.mpu]
+ *     tablet: [adSizes.mpu]
+ *     desktop: [adSizes.billboard]
+ *
+ * See ad-sizes.test.ts for more examples
+ */
+const findAppliedSizesForBreakpoint = (sizeMappings, breakpoint) => {
+    if (!isBreakpoint(breakpoint)) {
+        return [];
+    }
+    let breakpointIndex = breakpoints.findIndex((b) => b === breakpoint);
+    while (breakpointIndex >= 0) {
+        const breakpointToTry = breakpoints[breakpointIndex];
+        const sizeMapping = sizeMappings[breakpointToTry];
+        if (sizeMapping?.length) {
+            return sizeMapping;
+        }
+        breakpointIndex--;
+    }
+    // There are no size mappings defined for any size smaller than the breakpoint
+    return [];
+};
+// Export for testing
+export const _ = { createAdSize };
+export { AdSize, adSizes, standardAdSizes, outstreamSizes, getAdSize, slotSizeMappings, createAdSize, findAppliedSizesForBreakpoint, };

package/dist/esm/breakpoint.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Breakpoints ordered from smallest to largest
+ */
+declare const breakpoints: readonly ["mobile", "phablet", "tablet", "desktop", "wide"];
+type Breakpoint = (typeof breakpoints)[number];
+declare const isBreakpoint: (s: string) => s is Breakpoint;
+export type { Breakpoint };
+export { breakpoints, isBreakpoint };

package/dist/esm/breakpoint.js

@@ -0,0 +1,6 @@
+/**
+ * Breakpoints ordered from smallest to largest
+ */
+const breakpoints = ['mobile', 'phablet', 'tablet', 'desktop', 'wide'];
+const isBreakpoint = (s) => breakpoints.includes(s);
+export { breakpoints, isBreakpoint };

package/dist/esm/constants/ad-label-height.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Unit: pixels
+ */
+export declare const AD_LABEL_HEIGHT = 24;

package/dist/esm/constants/ad-label-height.js

@@ -0,0 +1,4 @@
+/**
+ * Unit: pixels
+ */
+export const AD_LABEL_HEIGHT = 24;

package/dist/esm/constants/index.d.ts

@@ -0,0 +1,3 @@
+export { AD_LABEL_HEIGHT } from './ad-label-height';
+export { PREBID_TIMEOUT } from './prebid-timeout';
+export { TOP_ABOVE_NAV_HEIGHT } from './top-above-nav-height';

package/dist/esm/constants/index.js

@@ -0,0 +1,3 @@
+export { AD_LABEL_HEIGHT } from './ad-label-height';
+export { PREBID_TIMEOUT } from './prebid-timeout';
+export { TOP_ABOVE_NAV_HEIGHT } from './top-above-nav-height';

package/dist/esm/constants/prebid-timeout.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Unit: milliseconds
+ */
+export declare const PREBID_TIMEOUT = 1500;

package/dist/esm/constants/prebid-timeout.js

@@ -0,0 +1,4 @@
+/**
+ * Unit: milliseconds
+ */
+export const PREBID_TIMEOUT = 1500;

package/dist/esm/constants/top-above-nav-height.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Unit: pixels.
+ *
+ * The majority of ads in the top banner are 250px high. We ran an experiment
+ * in October 2021 to set the minimum height to 250, and let smaller ads be
+ * centred in the space. We did not process with this option, as it had a
+ * negative impact on viewability and revenue.
+ *
+ */
+export declare const TOP_ABOVE_NAV_HEIGHT = 90;

package/dist/esm/constants/top-above-nav-height.js

@@ -0,0 +1,45 @@
+/**
+ * Unit: pixels.
+ *
+ * The majority of ads in the top banner are 250px high. We ran an experiment
+ * in October 2021 to set the minimum height to 250, and let smaller ads be
+ * centred in the space. We did not process with this option, as it had a
+ * negative impact on viewability and revenue.
+ *
+ */
+export const TOP_ABOVE_NAV_HEIGHT = 90;
+/*
+Further Notes
+=============
+
+There was a very positive impact on CLS (Cumulative Layout Shift), which is good
+for UX. However, the negative commercial impact meant we kept a height of 90px.
+
+We ran a 1% server-side experiment to measure CLS when dedicating 250px for the
+topAboveNav. The experiment showed this change has a significant positive impact
+on CLS, and moves average CLS for the page from 0.09 to 0.07 (a 26% improvement
+from this one change). The other way we sliced the data was to look at the
+percent of pages that Google categorised as having 'good', 'needs improvement'
+or 'poor' CLS scores. The viewability for the page dropped by about 1%, and for
+that specific slot, by 4-6%.
+
+When the experiment ran, the breakdown was as follows:
+
+- 74% of our pages have a “good” CLS score
+- 12% have a “poor” CLS score.
+- 70% viewability for top-above-nav
+
+This change resulted in:
+
+- 84% “good”
+- 4% “poor”
+- 64% viewability for top-above-nav
+
+Relevant Pull Requests
+----------------------
+
+- https://github.com/guardian/frontend/pull/24095
+- https://github.com/guardian/dotcom-rendering/pull/3497
+- https://github.com/guardian/dotcom-rendering/pull/3340
+
+*/