@guardian/commercial-core 7.1.0 → 27.0.0

package/dist/esm/ad-sizes.js

@@ -1,3 +1,4 @@
+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.
@@ -16,6 +17,8 @@
  *
  */
 class AdSize extends Array {
+    [0];
+    [1];
     constructor([width, height]) {
         super();
         this[0] = width;
@@ -36,7 +39,8 @@ class AdSize extends Array {
         const isEmpty = this.width === 2 && this.height === 2;
         const isFluid = this.toString() === 'fluid';
         const isMerch = this.width === 88;
-        return isOutOfPage || isEmpty || isFluid || isMerch;
+        const isSponsorLogo = this.width === 3 && this.height === 3;
+        return isOutOfPage || isEmpty || isFluid || isMerch || isSponsorLogo;
     }
     get width() {
         return this[0];
@@ -79,6 +83,7 @@ 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
@@ -86,10 +91,15 @@ const proprietaryAdSizes = {
 const guardianProprietaryAdSizes = {
     empty: createAdSize(2, 2),
     fabric: createAdSize(88, 71),
-    inlineMerchandising: createAdSize(88, 85),
     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,
@@ -102,6 +112,16 @@ const 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: {
@@ -113,14 +133,6 @@ const slotSizeMappings = {
             adSizes.googleCard,
             adSizes.fluid,
         ],
-        phablet: [
-            adSizes.outOfPage,
-            adSizes.empty,
-            adSizes.outstreamMobile,
-            adSizes.mpu,
-            adSizes.googleCard,
-            adSizes.fluid,
-        ],
         desktop: [
             adSizes.outOfPage,
             adSizes.empty,
@@ -148,14 +160,6 @@ const slotSizeMappings = {
             adSizes.googleCard,
             adSizes.fluid,
         ],
-        phablet: [
-            adSizes.outOfPage,
-            adSizes.empty,
-            adSizes.outstreamMobile,
-            adSizes.mpu,
-            adSizes.googleCard,
-            adSizes.fluid,
-        ],
         desktop: [
             adSizes.outOfPage,
             adSizes.empty,
@@ -165,7 +169,8 @@ const slotSizeMappings = {
         ],
     },
     'comments-expanded': {
-        mobile: [
+        mobile: [adSizes.mpu, adSizes.empty],
+        desktop: [
             adSizes.outOfPage,
             adSizes.empty,
             adSizes.mpu,
@@ -203,11 +208,12 @@ const slotSizeMappings = {
         ],
     },
     'fronts-banner': {
+        tablet: [adSizes.empty, adSizes.leaderboard],
         desktop: [
             adSizes.outOfPage,
             adSizes.empty,
             adSizes.billboard,
-            adSizes.fabric,
+            adSizes.merchandisingHigh,
             adSizes.fluid,
         ],
     },
@@ -234,7 +240,6 @@ const slotSizeMappings = {
             adSizes.mpu,
             adSizes.googleCard,
             adSizes.halfPage,
-            adSizes.leaderboard,
             adSizes.fluid,
         ],
         desktop: [
@@ -246,24 +251,32 @@ const slotSizeMappings = {
             adSizes.fluid,
         ],
     },
-    im: {
+    'liveblog-top': {
+        mobile: [adSizes.outOfPage, adSizes.empty, adSizes.mpu, adSizes.fluid],
+        tablet: [],
+        desktop: [],
+    },
+    'merchandising-high': {
         mobile: [
             adSizes.outOfPage,
             adSizes.empty,
-            adSizes.inlineMerchandising,
+            adSizes.merchandisingHigh,
             adSizes.fluid,
+            adSizes.mpu,
         ],
-    },
-    'merchandising-high': {
-        mobile: [
+        tablet: [
             adSizes.outOfPage,
             adSizes.empty,
             adSizes.merchandisingHigh,
             adSizes.fluid,
         ],
-    },
-    'merchandising-high-lucky': {
-        mobile: [adSizes.outOfPage, adSizes.empty, adSizes.fluid],
+        desktop: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.merchandisingHigh,
+            adSizes.fluid,
+            adSizes.billboard,
+        ],
     },
     merchandising: {
         mobile: [
@@ -271,6 +284,20 @@ const slotSizeMappings = {
             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: {
@@ -279,23 +306,85 @@ const slotSizeMappings = {
     carrot: {
         mobile: [adSizes.fluid],
     },
-    epic: {
-        mobile: [adSizes.fluid],
-    },
     'mobile-sticky': {
+        mobile: [adSizes.mobilesticky, adSizes.empty, createAdSize(300, 50)],
+    },
+    'crossword-banner-mobile': {
         mobile: [adSizes.mobilesticky],
     },
-    'crossword-banner': {
-        phablet: [adSizes.outOfPage, adSizes.empty, adSizes.leaderboard],
-        tablet: [adSizes.outOfPage, adSizes.empty, adSizes.leaderboard],
+    '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],
-        phablet: [adSizes.empty],
-        desktop: [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 { adSizes, standardAdSizes, outstreamSizes, getAdSize, slotSizeMappings, 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/index.d.ts

@@ -1,3 +1,3 @@
-export { AD_LABEL_HEIGHT } from './adLabelHeight';
+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

@@ -1,3 +1,3 @@
-export { AD_LABEL_HEIGHT } from './adLabelHeight';
+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/event-timer.d.ts

@@ -1,51 +1,32 @@
 import type { ConnectionType } from './types';
-declare class Event {
-    name: string;
-    ts: DOMHighResTimeStamp;
-    constructor(name: string, mark: PerformanceEntry);
-}
-interface GALogEvent {
-    timingVariable: string;
-    timingLabel?: string;
-}
-interface GAConfig {
-    logEvents: GALogEvent[];
-}
-interface SlotEventStatus {
-    prebidStart: boolean;
-    prebidEnd: boolean;
-    slotInitialised: boolean;
-    slotReady: boolean;
-    adOnPage: boolean;
-}
-interface PageEventStatus {
-    commercialStart: boolean;
-    commercialExtraModulesLoaded: boolean;
-    commercialBaseModulesLoaded: boolean;
-    commercialModulesLoaded: boolean;
-}
+declare const supportsPerformanceAPI: () => boolean;
 interface EventTimerProperties {
     type?: ConnectionType;
     downlink?: number;
     effectiveType?: string;
     adSlotsInline?: number;
     adSlotsTotal?: number;
+    /** the height of the page / the viewport height  */
     pageHeightVH?: number;
     gpcSignal?: number;
+    /** distance in percentage of viewport height at which ads are lazy loaded */
     lazyLoadMarginPercent?: number;
     hasLabsContainer?: boolean;
     labsUrl?: string;
+    /** Record whether we've detected an ad blocker. This is intentionally
+     * distinct from the property we pass into commercial metrics, and in the
+     * future _could_ be removed in favour of this property */
+    detectedAdBlocker?: boolean;
+    /** Record whether we've shown the adblock as message */
+    didDisplayAdBlockAsk?: boolean;
+    /** creative ID of a video interscroller for video reporting metrics */
+    videoInterscrollerCreativeId?: number | null | undefined;
+    /** percentage progress of video interscroller on page unload */
+    videoInterscrollerPercentageProgress?: number;
 }
 declare class EventTimer {
-    private _events;
-    private static _externallyDefinedEventNames;
-    startTS: DOMHighResTimeStamp;
-    triggers: {
-        first: SlotEventStatus;
-        'top-above-nav': SlotEventStatus;
-        page: PageEventStatus;
-    };
-    gaConfig: GAConfig;
+    private _marks;
+    private _measures;
     properties: EventTimerProperties;
     /**
      * Initialise the EventTimer class on page.
@@ -53,7 +34,7 @@ declare class EventTimer {
      * to window.guardian.commercialTimer. If it's been previously
      * initialised and bound it returns the original instance
      * Note: We save to window.guardian.commercialTimer because
-     * different bundles (DCR / DCP) can use commercial core, and we want
+     * different bundles (DCR / DCP) can use commercial, and we want
      * all timer events saved to a single instance per-page
      * @returns {EventTimer} Instance of EventTimer
      */
@@ -64,28 +45,59 @@ declare class EventTimer {
      */
     static get(): EventTimer;
     /**
-     * Returns all commercial timers. CMP-related timers are not tracked
-     * by EventTimer so they need to be concatenated to EventTimer's private events array.
+     * These are marks that are not triggered by commercial but we are interested in
+     * tracking their performance. For example, CMP-related events.
+     **/
+    private get _externalMarks();
+    /**
+     * Returns all performance marks that should be saved as commercial metrics.
      */
-    get events(): Event[];
+    get marks(): {
+        name: string;
+        ts: number;
+    }[];
+    /**
+     * Returns all performance measures that should be saved as commercial metrics.
+     */
+    get measures(): {
+        name: string;
+        duration: number;
+    }[];
     private constructor();
     /**
-     * Adds an event timer property
+     * Adds a non timer measurement
      *
      * @param {string} name - the property's name
      * @param value - the property's value
      */
     setProperty<T extends keyof EventTimerProperties>(name: T, value: EventTimerProperties[T]): void;
     /**
-     * Creates a new performance mark
-     * For slot events also ensures each TYPE of event event is marked only once for 'first'
-     * (the first time that event is triggered for ANY slot) and once for topAboveNav
+     * Creates a new performance mark, and if the mark ends with 'End' it will
+     * create a performance measure between the start and end marks.
+     *
+     * Marks can  be triggered multiple times, but we only save the first
+     * instance of a mark, as things like ad refreshes can trigger the same mark.
      *
-     * @param {string} eventName - The short name applied to the mark
-     * @param {origin} [origin=page] - Either 'page' (default) or the name of the slot
+     * More info on the performance API:
+     * https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark
+     * https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure
+     *
+     * @todo more strict typing for eventName and origin
+     * @param eventName The short name applied to the mark
+     * @param origin - Either 'page' (default) or the name of the slot
      */
-    trigger(eventName: string, origin?: string): void;
-    private mark;
-    private trackInGA;
+    mark(eventName: string, origin?: string): void;
+    /**
+     * Creates a performance measure given the name of the end marks.
+     * The start mark is inferred from the end mark.
+     *
+     * @param endMark - The name of the mark that ends the measure
+     **/
+    private measure;
 }
-export { EventTimer };
+declare const _: {
+    slotMarks: readonly ["slotReady", "adRenderStart", "prebidStart", "adOnPage", "viewable"];
+    slotMeasures: readonly ["adRender", "defineSlot", "prepareSlot", "prebid", "fetchAd"];
+    trackedSlots: readonly ["top-above-nav", "inline1", "inline2", "fronts-banner-1", "fronts-banner-2"];
+};
+export { EventTimer, _, supportsPerformanceAPI };