@guardian/commercial-core 4.1.0 → 4.2.1

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

@@ -25,7 +25,7 @@ declare class AdSize extends Array<number> {
     get height(): number;
 }
 declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
-declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'survey';
+declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'merchandising-high-lucky' | 'survey' | 'im' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
 declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
 declare type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;
 declare type SlotSizeMappings = Record<SlotName, SizeMapping>;

package/dist/cjs/ad-sizes.js

@@ -79,6 +79,31 @@ exports.adSizes = adSizes;
  * these were originally from DCR, create-ad-slot.ts ones were in frontend.
  **/
 const slotSizeMappings = {
+    inline: {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.outstreamMobile,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.fluid,
+        ],
+        phablet: [
+            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,
@@ -118,6 +143,14 @@ const slotSizeMappings = {
         ],
     },
     'top-above-nav': {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.fabric,
+            adSizes.outstreamMobile,
+            adSizes.mpu,
+            adSizes.fluid,
+        ],
         tablet: [
             adSizes.outOfPage,
             adSizes.empty,
@@ -171,6 +204,14 @@ const slotSizeMappings = {
             adSizes.fluid,
         ],
     },
+    im: {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.inlineMerchandising,
+            adSizes.fluid,
+        ],
+    },
     'merchandising-high': {
         mobile: [
             adSizes.outOfPage,
@@ -179,6 +220,9 @@ const slotSizeMappings = {
             adSizes.fluid,
         ],
     },
+    'merchandising-high-lucky': {
+        mobile: [adSizes.outOfPage, adSizes.empty, adSizes.fluid],
+    },
     merchandising: {
         mobile: [
             adSizes.outOfPage,
@@ -190,6 +234,15 @@ const slotSizeMappings = {
     survey: {
         desktop: [adSizes.outOfPage],
     },
+    carrot: {
+        mobile: [adSizes.fluid],
+    },
+    epic: {
+        mobile: [adSizes.fluid],
+    },
+    'mobile-sticky': {
+        mobile: [adSizes.mobilesticky],
+    },
 };
 exports.slotSizeMappings = slotSizeMappings;
 const getAdSize = (size) => adSizes[size];

package/dist/cjs/create-ad-slot.js

@@ -3,127 +3,59 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAdSlot = void 0;
 const ad_sizes_1 = require("./ad-sizes");
 const adSlotIdPrefix = 'dfp-ad--';
-const commonSizeMappings = {
-    mobile: [
-        ad_sizes_1.adSizes.outOfPage,
-        ad_sizes_1.adSizes.empty,
-        ad_sizes_1.adSizes.outstreamMobile,
-        ad_sizes_1.adSizes.mpu,
-        ad_sizes_1.adSizes.googleCard,
-        ad_sizes_1.adSizes.fluid,
-    ],
-    phablet: [
-        ad_sizes_1.adSizes.outOfPage,
-        ad_sizes_1.adSizes.empty,
-        ad_sizes_1.adSizes.outstreamMobile,
-        ad_sizes_1.adSizes.mpu,
-        ad_sizes_1.adSizes.googleCard,
-        ad_sizes_1.adSizes.fluid,
-    ],
-    desktop: [
-        ad_sizes_1.adSizes.outOfPage,
-        ad_sizes_1.adSizes.empty,
-        ad_sizes_1.adSizes.mpu,
-        ad_sizes_1.adSizes.googleCard,
-        ad_sizes_1.adSizes.fluid,
-    ],
-};
-/**
- * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
- * Some of these may or may not need to be synced for with the sizes in ./ad-sizes.ts
- * these were originally from frontend, ad-sizes.ts ones were in DCR.
- **/
 const adSlotConfigs = {
     im: {
         label: false,
         refresh: false,
-        sizeMappings: {
-            mobile: [
-                ad_sizes_1.adSizes.outOfPage,
-                ad_sizes_1.adSizes.empty,
-                ad_sizes_1.adSizes.inlineMerchandising,
-                ad_sizes_1.adSizes.fluid,
-            ],
-        },
+        sizeMappings: ad_sizes_1.slotSizeMappings['im'],
     },
     'high-merch': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: {
-            mobile: [
-                ad_sizes_1.adSizes.outOfPage,
-                ad_sizes_1.adSizes.empty,
-                ad_sizes_1.adSizes.merchandisingHigh,
-                ad_sizes_1.adSizes.fluid,
-            ],
-        },
+        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
     },
     'high-merch-lucky': {
         label: false,
         refresh: false,
         name: 'merchandising-high-lucky',
-        sizeMappings: {
-            mobile: [ad_sizes_1.adSizes.outOfPage, ad_sizes_1.adSizes.empty, ad_sizes_1.adSizes.fluid],
-        },
+        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high-lucky'],
     },
     'high-merch-paid': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: {
-            mobile: [
-                ad_sizes_1.adSizes.outOfPage,
-                ad_sizes_1.adSizes.empty,
-                ad_sizes_1.adSizes.merchandisingHighAdFeature,
-                ad_sizes_1.adSizes.fluid,
-            ],
-        },
+        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
     },
     inline: {
-        sizeMappings: commonSizeMappings,
+        sizeMappings: ad_sizes_1.slotSizeMappings['inline'],
     },
     mostpop: {
-        sizeMappings: commonSizeMappings,
+        sizeMappings: ad_sizes_1.slotSizeMappings['mostpop'],
     },
     comments: {
-        sizeMappings: commonSizeMappings,
+        sizeMappings: ad_sizes_1.slotSizeMappings['comments'],
     },
     'top-above-nav': {
-        sizeMappings: {
-            mobile: [
-                ad_sizes_1.adSizes.outOfPage,
-                ad_sizes_1.adSizes.empty,
-                ad_sizes_1.adSizes.fabric,
-                ad_sizes_1.adSizes.outstreamMobile,
-                ad_sizes_1.adSizes.mpu,
-                ad_sizes_1.adSizes.fluid,
-            ],
-        },
+        sizeMappings: ad_sizes_1.slotSizeMappings['top-above-nav'],
     },
     carrot: {
         label: false,
         refresh: false,
         name: 'carrot',
-        sizeMappings: {
-            mobile: [ad_sizes_1.adSizes.fluid],
-        },
+        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
     },
     epic: {
         label: false,
         refresh: false,
         name: 'epic',
-        sizeMappings: {
-            mobile: [ad_sizes_1.adSizes.fluid],
-        },
+        sizeMappings: ad_sizes_1.slotSizeMappings['epic'],
     },
     'mobile-sticky': {
         label: true,
         refresh: true,
         name: 'mobile-sticky',
-        sizeMappings: {
-            mobile: [ad_sizes_1.adSizes.mobilesticky],
-        },
+        sizeMappings: ad_sizes_1.slotSizeMappings['mobile-sticky'],
     },
 };
 /**

package/dist/cjs/index.d.ts

@@ -14,6 +14,7 @@ export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments,
 export { initTrackScrollDepth } from './track-scroll-depth';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
+export { createAdSlot } from './create-ad-slot';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';
 export type { ContentTargeting } from './targeting/content';

package/dist/cjs/index.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = exports.EventTimer = exports.remarketing = exports.inizio = exports.twitter = exports.fbPixel = exports.permutive = exports.ias = void 0;
+exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.createAdSlot = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = exports.EventTimer = exports.remarketing = exports.inizio = exports.twitter = exports.fbPixel = exports.permutive = exports.ias = void 0;
 var ias_1 = require("./third-party-tags/ias");
 Object.defineProperty(exports, "ias", { enumerable: true, get: function () { return ias_1.ias; } });
 var permutive_1 = require("./third-party-tags/permutive");
@@ -60,6 +60,8 @@ Object.defineProperty(exports, "initTrackGpcSignal", { enumerable: true, get: fu
 var ad_targeting_youtube_1 = require("./ad-targeting-youtube");
 Object.defineProperty(exports, "buildAdsConfigWithConsent", { enumerable: true, get: function () { return ad_targeting_youtube_1.buildAdsConfigWithConsent; } });
 Object.defineProperty(exports, "disabledAds", { enumerable: true, get: function () { return ad_targeting_youtube_1.disabledAds; } });
+var create_ad_slot_1 = require("./create-ad-slot");
+Object.defineProperty(exports, "createAdSlot", { enumerable: true, get: function () { return create_ad_slot_1.createAdSlot; } });
 exports.constants = __importStar(require("./constants"));
 var content_1 = require("./targeting/content");
 Object.defineProperty(exports, "getContentTargeting", { enumerable: true, get: function () { return content_1.getContentTargeting; } });

package/dist/cjs/send-commercial-metrics.js

@@ -83,9 +83,9 @@ const listener = (e) => {
 };
 const addVisibilityListeners = () => {
     // Report all available metrics when the page is unloaded or in background.
-    window.addEventListener('visibilitychange', listener);
+    window.addEventListener('visibilitychange', listener, { once: true });
     // Safari does not reliably fire the `visibilitychange` on page unload.
-    window.addEventListener('pagehide', listener);
+    window.addEventListener('pagehide', listener, { once: true });
 };
 const checkConsent = async () => {
     const consentState = await (0, consent_management_platform_1.onConsent)();

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

@@ -25,7 +25,7 @@ declare class AdSize extends Array<number> {
     get height(): number;
 }
 declare type SizeKeys = '160x600' | '300x1050' | '300x250' | '300x600' | '728x90' | '970x250' | 'billboard' | 'empty' | 'fabric' | 'fluid' | 'googleCard' | 'halfPage' | 'inlineMerchandising' | 'leaderboard' | 'merchandising' | 'merchandisingHigh' | 'merchandisingHighAdFeature' | 'mobilesticky' | 'mpu' | 'outOfPage' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'portrait' | 'skyscraper';
-declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'survey';
+declare type SlotName = 'right' | 'comments' | 'top-above-nav' | 'mostpop' | 'merchandising' | 'merchandising-high' | 'merchandising-high-lucky' | 'survey' | 'im' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
 declare type Breakpoint = 'mobile' | 'desktop' | 'phablet' | 'tablet';
 declare type SizeMapping = Partial<Record<Breakpoint, AdSize[]>>;
 declare type SlotSizeMappings = Record<SlotName, SizeMapping>;

package/dist/esm/ad-sizes.js

@@ -74,6 +74,31 @@ const adSizes = {
  * these were originally from DCR, create-ad-slot.ts ones were in frontend.
  **/
 const slotSizeMappings = {
+    inline: {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.outstreamMobile,
+            adSizes.mpu,
+            adSizes.googleCard,
+            adSizes.fluid,
+        ],
+        phablet: [
+            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,
@@ -113,6 +138,14 @@ const slotSizeMappings = {
         ],
     },
     'top-above-nav': {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.fabric,
+            adSizes.outstreamMobile,
+            adSizes.mpu,
+            adSizes.fluid,
+        ],
         tablet: [
             adSizes.outOfPage,
             adSizes.empty,
@@ -166,6 +199,14 @@ const slotSizeMappings = {
             adSizes.fluid,
         ],
     },
+    im: {
+        mobile: [
+            adSizes.outOfPage,
+            adSizes.empty,
+            adSizes.inlineMerchandising,
+            adSizes.fluid,
+        ],
+    },
     'merchandising-high': {
         mobile: [
             adSizes.outOfPage,
@@ -174,6 +215,9 @@ const slotSizeMappings = {
             adSizes.fluid,
         ],
     },
+    'merchandising-high-lucky': {
+        mobile: [adSizes.outOfPage, adSizes.empty, adSizes.fluid],
+    },
     merchandising: {
         mobile: [
             adSizes.outOfPage,
@@ -185,6 +229,15 @@ const slotSizeMappings = {
     survey: {
         desktop: [adSizes.outOfPage],
     },
+    carrot: {
+        mobile: [adSizes.fluid],
+    },
+    epic: {
+        mobile: [adSizes.fluid],
+    },
+    'mobile-sticky': {
+        mobile: [adSizes.mobilesticky],
+    },
 };
 const getAdSize = (size) => adSizes[size];
 // Export for testing

package/dist/esm/create-ad-slot.js

@@ -1,126 +1,58 @@
-import { adSizes } from './ad-sizes';
+import { slotSizeMappings } from './ad-sizes';
 const adSlotIdPrefix = 'dfp-ad--';
-const commonSizeMappings = {
-    mobile: [
-        adSizes.outOfPage,
-        adSizes.empty,
-        adSizes.outstreamMobile,
-        adSizes.mpu,
-        adSizes.googleCard,
-        adSizes.fluid,
-    ],
-    phablet: [
-        adSizes.outOfPage,
-        adSizes.empty,
-        adSizes.outstreamMobile,
-        adSizes.mpu,
-        adSizes.googleCard,
-        adSizes.fluid,
-    ],
-    desktop: [
-        adSizes.outOfPage,
-        adSizes.empty,
-        adSizes.mpu,
-        adSizes.googleCard,
-        adSizes.fluid,
-    ],
-};
-/**
- * mark: 432b3a46-90c1-4573-90d3-2400b51af8d0
- * Some of these may or may not need to be synced for with the sizes in ./ad-sizes.ts
- * these were originally from frontend, ad-sizes.ts ones were in DCR.
- **/
 const adSlotConfigs = {
     im: {
         label: false,
         refresh: false,
-        sizeMappings: {
-            mobile: [
-                adSizes.outOfPage,
-                adSizes.empty,
-                adSizes.inlineMerchandising,
-                adSizes.fluid,
-            ],
-        },
+        sizeMappings: slotSizeMappings['im'],
     },
     'high-merch': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: {
-            mobile: [
-                adSizes.outOfPage,
-                adSizes.empty,
-                adSizes.merchandisingHigh,
-                adSizes.fluid,
-            ],
-        },
+        sizeMappings: slotSizeMappings['merchandising-high'],
     },
     'high-merch-lucky': {
         label: false,
         refresh: false,
         name: 'merchandising-high-lucky',
-        sizeMappings: {
-            mobile: [adSizes.outOfPage, adSizes.empty, adSizes.fluid],
-        },
+        sizeMappings: slotSizeMappings['merchandising-high-lucky'],
     },
     'high-merch-paid': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: {
-            mobile: [
-                adSizes.outOfPage,
-                adSizes.empty,
-                adSizes.merchandisingHighAdFeature,
-                adSizes.fluid,
-            ],
-        },
+        sizeMappings: slotSizeMappings['merchandising-high'],
     },
     inline: {
-        sizeMappings: commonSizeMappings,
+        sizeMappings: slotSizeMappings['inline'],
     },
     mostpop: {
-        sizeMappings: commonSizeMappings,
+        sizeMappings: slotSizeMappings['mostpop'],
     },
     comments: {
-        sizeMappings: commonSizeMappings,
+        sizeMappings: slotSizeMappings['comments'],
     },
     'top-above-nav': {
-        sizeMappings: {
-            mobile: [
-                adSizes.outOfPage,
-                adSizes.empty,
-                adSizes.fabric,
-                adSizes.outstreamMobile,
-                adSizes.mpu,
-                adSizes.fluid,
-            ],
-        },
+        sizeMappings: slotSizeMappings['top-above-nav'],
     },
     carrot: {
         label: false,
         refresh: false,
         name: 'carrot',
-        sizeMappings: {
-            mobile: [adSizes.fluid],
-        },
+        sizeMappings: slotSizeMappings['merchandising-high'],
     },
     epic: {
         label: false,
         refresh: false,
         name: 'epic',
-        sizeMappings: {
-            mobile: [adSizes.fluid],
-        },
+        sizeMappings: slotSizeMappings['epic'],
     },
     'mobile-sticky': {
         label: true,
         refresh: true,
         name: 'mobile-sticky',
-        sizeMappings: {
-            mobile: [adSizes.mobilesticky],
-        },
+        sizeMappings: slotSizeMappings['mobile-sticky'],
     },
 };
 /**

package/dist/esm/index.d.ts

@@ -14,6 +14,7 @@ export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments,
 export { initTrackScrollDepth } from './track-scroll-depth';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
+export { createAdSlot } from './create-ad-slot';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';
 export type { ContentTargeting } from './targeting/content';

package/dist/esm/index.js

@@ -13,6 +13,7 @@ export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments,
 export { initTrackScrollDepth } from './track-scroll-depth';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
+export { createAdSlot } from './create-ad-slot';
 import * as constants_1 from './constants';
 export { constants_1 as constants };
 export { getContentTargeting } from './targeting/content';

package/dist/esm/send-commercial-metrics.js

@@ -80,9 +80,9 @@ const listener = (e) => {
 };
 const addVisibilityListeners = () => {
     // Report all available metrics when the page is unloaded or in background.
-    window.addEventListener('visibilitychange', listener);
+    window.addEventListener('visibilitychange', listener, { once: true });
     // Safari does not reliably fire the `visibilitychange` on page unload.
-    window.addEventListener('pagehide', listener);
+    window.addEventListener('pagehide', listener, { once: true });
 };
 const checkConsent = async () => {
     const consentState = await onConsent();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/commercial-core",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "description": "Guardian advertising business logic",
   "homepage": "https://github.com/guardian/commercial-core#readme",
   "bugs": {