@guardian/commercial-core 0.0.0-beta-20250716121613

package/dist/cjs/ad-sizes.js

@@ -0,0 +1,400 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findAppliedSizesForBreakpoint = exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.outstreamSizes = exports.standardAdSizes = exports.adSizes = exports.AdSize = exports._ = void 0;
+const breakpoint_1 = require("./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];
+    }
+}
+exports.AdSize = AdSize;
+const createAdSize = (width, height) => {
+    return new AdSize([width, height]);
+};
+exports.createAdSize = createAdSize;
+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,
+};
+exports.standardAdSizes = standardAdSizes;
+const outstreamSizes = {
+    outstreamDesktop: createAdSize(620, 350),
+    outstreamGoogleDesktop: createAdSize(550, 310),
+    outstreamMobile: createAdSize(300, 197),
+};
+exports.outstreamSizes = outstreamSizes;
+/**
+ * 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,
+};
+exports.adSizes = adSizes;
+/**
+ * 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],
+    },
+};
+exports.slotSizeMappings = slotSizeMappings;
+const getAdSize = (size) => adSizes[size];
+exports.getAdSize = getAdSize;
+/**
+ * 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 (!(0, breakpoint_1.isBreakpoint)(breakpoint)) {
+        return [];
+    }
+    let breakpointIndex = breakpoint_1.breakpoints.findIndex((b) => b === breakpoint);
+    while (breakpointIndex >= 0) {
+        const breakpointToTry = breakpoint_1.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 [];
+};
+exports.findAppliedSizesForBreakpoint = findAppliedSizesForBreakpoint;
+// Export for testing
+exports._ = { createAdSize };

package/dist/cjs/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/cjs/breakpoint.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBreakpoint = exports.breakpoints = void 0;
+/**
+ * Breakpoints ordered from smallest to largest
+ */
+const breakpoints = ['mobile', 'phablet', 'tablet', 'desktop', 'wide'];
+exports.breakpoints = breakpoints;
+const isBreakpoint = (s) => breakpoints.includes(s);
+exports.isBreakpoint = isBreakpoint;

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AD_LABEL_HEIGHT = void 0;
+/**
+ * Unit: pixels
+ */
+exports.AD_LABEL_HEIGHT = 24;

package/dist/cjs/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/cjs/constants/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOP_ABOVE_NAV_HEIGHT = exports.PREBID_TIMEOUT = exports.AD_LABEL_HEIGHT = void 0;
+var ad_label_height_1 = require("./ad-label-height");
+Object.defineProperty(exports, "AD_LABEL_HEIGHT", { enumerable: true, get: function () { return ad_label_height_1.AD_LABEL_HEIGHT; } });
+var prebid_timeout_1 = require("./prebid-timeout");
+Object.defineProperty(exports, "PREBID_TIMEOUT", { enumerable: true, get: function () { return prebid_timeout_1.PREBID_TIMEOUT; } });
+var top_above_nav_height_1 = require("./top-above-nav-height");
+Object.defineProperty(exports, "TOP_ABOVE_NAV_HEIGHT", { enumerable: true, get: function () { return top_above_nav_height_1.TOP_ABOVE_NAV_HEIGHT; } });

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREBID_TIMEOUT = void 0;
+/**
+ * Unit: milliseconds
+ */
+exports.PREBID_TIMEOUT = 1500;

package/dist/cjs/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/cjs/constants/top-above-nav-height.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOP_ABOVE_NAV_HEIGHT = void 0;
+/**
+ * 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.
+ *
+ */
+exports.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
+
+*/

package/dist/cjs/detect-ad-blocker.d.ts

@@ -0,0 +1,12 @@
+/**
+Detect whether or not the user has an ad blocking extension enabled.
+A few ad blockers are not detectable with this approach e.g. Safari / Adblock
+Code inspired by just-detect-adblock's:
+https://github.com/wmcmurray/just-detect-adblock/blob/master/src/helpers.js
+*/
+/**
+ * Determines whether or not the user has an ad blocking extension enabled.
+ * Note: positive results can be considered reliable while negative ones may not be.
+ * @returns Promise
+ */
+export declare function isAdBlockInUse(): Promise<boolean>;

package/dist/cjs/detect-ad-blocker.js

@@ -0,0 +1,61 @@
+"use strict";
+/**
+Detect whether or not the user has an ad blocking extension enabled.
+A few ad blockers are not detectable with this approach e.g. Safari / Adblock
+Code inspired by just-detect-adblock's:
+https://github.com/wmcmurray/just-detect-adblock/blob/master/src/helpers.js
+*/
+/*istanbul ignore file -- adElementBlocked can't be tested without patching each of the properties of
+HTMLElement.prototype that it accesses, defeating the purpose of the test! */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAdBlockInUse = isAdBlockInUse;
+let adBlockInUse = undefined;
+function adElementBlocked(ad) {
+    if (ad.offsetParent === null ||
+        ad.offsetHeight === 0 ||
+        ad.offsetLeft === 0 ||
+        ad.offsetTop === 0 ||
+        ad.offsetWidth === 0 ||
+        ad.clientHeight === 0 ||
+        ad.clientWidth === 0) {
+        return true;
+    }
+    const adStyles = window.getComputedStyle(ad);
+    if (adStyles.getPropertyValue('display') === 'none')
+        return true;
+    if (adStyles.getPropertyValue('visibility') === 'hidden')
+        return true;
+    const mozBindingProp = adStyles.getPropertyValue('-moz-binding');
+    if (mozBindingProp.includes('about:'))
+        return true;
+    return false;
+}
+/**
+ * Determines whether or not the user has an ad blocking extension enabled.
+ * Note: positive results can be considered reliable while negative ones may not be.
+ * @returns Promise
+ */
+function isAdBlockInUse() {
+    if (adBlockInUse !== undefined) {
+        return Promise.resolve(adBlockInUse);
+    }
+    if (typeof window.getComputedStyle !== 'function') {
+        // Old browsers not supporting getComputedStyle most likely won't have adBlockers
+        adBlockInUse = false;
+        return Promise.resolve(adBlockInUse);
+    }
+    return new Promise((resolve) => {
+        window.requestAnimationFrame(() => {
+            // create a fake ad element and append it to the document
+            const ad = document.createElement('div');
+            ad.setAttribute('class', 'ad_unit pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links ad-text adSense adBlock adContent adBanner');
+            ad.setAttribute('style', 'width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;');
+            document.body.appendChild(ad);
+            // avoid a forced layout
+            window.requestAnimationFrame(() => {
+                // if the ad element has been hidden, an ad blocker is enabled.
+                resolve(adElementBlocked(ad));
+            });
+        });
+    });
+}