@guardian/commercial-core 4.6.0 → 4.9.0

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

@@ -22,6 +22,7 @@ declare class AdSize extends Array<number> {
     readonly [1]: number;
     constructor([width, height]: [number, number]);
     toString(): AdSizeString;
+    toArray(): number[];
     get width(): number;
     get height(): number;
 }

package/dist/cjs/ad-sizes.js

@@ -21,13 +21,17 @@ exports.createAdSize = exports.slotSizeMappings = exports.getAdSize = exports.ad
 class AdSize extends Array {
     constructor([width, height]) {
         super();
-        this.push(width, height);
+        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]];
+    }
     get width() {
         return this[0];
     }

package/dist/cjs/create-ad-slot.d.ts

@@ -1,9 +1,8 @@
-import type { AdSize, SizeMapping } from './ad-sizes';
+import type { SizeMapping } from './ad-sizes';
 declare type SlotName = 'im' | 'high-merch' | 'high-merch-lucky' | 'high-merch-paid' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
 declare type CreateSlotOptions = {
     classes?: string;
     name?: string;
-    sizes?: Record<string, AdSize[]>;
 };
 /**
  * Given default size mappings and additional size mappings from

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

@@ -1,62 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.concatSizeMappings = exports.createAdSlot = void 0;
-const ad_sizes_1 = require("./ad-sizes");
 const breakpoint_1 = require("./lib/breakpoint");
 const adSlotIdPrefix = 'dfp-ad--';
 const adSlotConfigs = {
     im: {
         label: false,
         refresh: false,
-        sizeMappings: ad_sizes_1.slotSizeMappings['im'],
     },
     'high-merch': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
     },
     'high-merch-lucky': {
         label: false,
         refresh: false,
         name: 'merchandising-high-lucky',
-        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high-lucky'],
     },
     'high-merch-paid': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
-    },
-    inline: {
-        sizeMappings: ad_sizes_1.slotSizeMappings['inline'],
-    },
-    mostpop: {
-        sizeMappings: ad_sizes_1.slotSizeMappings['mostpop'],
-    },
-    comments: {
-        sizeMappings: ad_sizes_1.slotSizeMappings['comments'],
-    },
-    'top-above-nav': {
-        sizeMappings: ad_sizes_1.slotSizeMappings['top-above-nav'],
     },
     carrot: {
         label: false,
         refresh: false,
         name: 'carrot',
-        sizeMappings: ad_sizes_1.slotSizeMappings['merchandising-high'],
     },
     epic: {
         label: false,
         refresh: false,
         name: 'epic',
-        sizeMappings: ad_sizes_1.slotSizeMappings['epic'],
     },
     'mobile-sticky': {
         label: true,
         refresh: true,
         name: 'mobile-sticky',
-        sizeMappings: ad_sizes_1.slotSizeMappings['mobile-sticky'],
     },
 };
 /**
@@ -85,10 +65,10 @@ const createAdSlotElement = (name, attrs, classes) => {
     const adSlot = document.createElement('div');
     adSlot.id = id;
     adSlot.className = `js-ad-slot ad-slot ${classes.join(' ')}`;
-    adSlot.setAttribute('data-link-name', `ad slot ${name}`);
-    adSlot.setAttribute('data-name', name);
+    adSlot.dataset.linkName = `ad slot ${name}`;
+    adSlot.dataset.name = name;
     adSlot.setAttribute('aria-hidden', 'true');
-    Object.entries(attrs).forEach(([k, v]) => adSlot.setAttribute(k, v));
+    Object.entries(attrs).forEach(([k, v]) => (adSlot.dataset[k] = v));
     return adSlot;
 };
 /**
@@ -112,35 +92,16 @@ const concatSizeMappings = (defaultSizeMappings, optionSizeMappings = {}) => Obj
     return sizeMappings;
 }, { ...defaultSizeMappings });
 exports.concatSizeMappings = concatSizeMappings;
-/**
- * Convert size mappings to a string that will be added to the ad slot
- * data attributes.
- *
- * e.g. { desktop: [[320,250], [320, 280]] } => { desktop: '320,250|320,280' }
- *
- */
-const covertSizeMappingsToStrings = (sizeMappings) => Object.entries(sizeMappings).reduce((result, [device, sizes]) => {
-    result[device] = sizes.join('|');
-    return result;
-}, {});
-/**
- * Prefix all object keys with data-${key}
- */
-const createDataAttributes = (attrs) => Object.entries(attrs).reduce((result, [key, value]) => {
-    result[`data-${key}`] = value;
-    return result;
-}, {});
 const createAdSlot = (name, options = {}) => {
-    const adSlotConfig = adSlotConfigs[name];
+    const adSlotConfig = adSlotConfigs[name] ?? {};
     const slotName = options.name ?? adSlotConfig.name ?? name;
-    const sizeMappings = concatSizeMappings(adSlotConfig.sizeMappings, options.sizes);
-    const attributes = covertSizeMappingsToStrings(sizeMappings);
+    const dataAttributes = {};
     if (adSlotConfig.label === false) {
-        attributes.label = 'false';
+        dataAttributes.label = 'false';
     }
     if (adSlotConfig.refresh === false) {
-        attributes.refresh = 'false';
+        dataAttributes.refresh = 'false';
     }
-    return createAdSlotElement(slotName, createDataAttributes(attributes), createClasses(slotName, options.classes));
+    return createAdSlotElement(slotName, dataAttributes, createClasses(slotName, options.classes));
 };
 exports.createAdSlot = createAdSlot;

package/dist/cjs/event-timer.d.ts

@@ -32,6 +32,7 @@ interface EventTimerProperties {
     pageHeightVH?: number;
     gpcSignal?: number;
     lazyLoadMarginPercent?: number;
+    hasLabsContainer?: boolean;
 }
 export declare class EventTimer {
     private _events;

package/dist/cjs/index.d.ts

@@ -14,6 +14,7 @@ export type { SizeKeys, AdSizeString, AdSize, SizeMapping, SlotSizeMappings, Slo
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
+export { initTrackLabsContainer } from './track-labs-container';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 export { createAdSlot, concatSizeMappings } from './create-ad-slot';

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.concatSizeMappings = exports.createAdSlot = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.isBreakpoint = 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.concatSizeMappings = exports.createAdSlot = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackLabsContainer = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.isBreakpoint = 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");
@@ -57,6 +57,8 @@ Object.defineProperty(exports, "getPermutiveSegments", { enumerable: true, get:
 Object.defineProperty(exports, "getPermutivePFPSegments", { enumerable: true, get: function () { return permutive_2.getPermutivePFPSegments; } });
 var track_scroll_depth_1 = require("./track-scroll-depth");
 Object.defineProperty(exports, "initTrackScrollDepth", { enumerable: true, get: function () { return track_scroll_depth_1.initTrackScrollDepth; } });
+var track_labs_container_1 = require("./track-labs-container");
+Object.defineProperty(exports, "initTrackLabsContainer", { enumerable: true, get: function () { return track_labs_container_1.initTrackLabsContainer; } });
 var track_gpc_signal_1 = require("./track-gpc-signal");
 Object.defineProperty(exports, "initTrackGpcSignal", { enumerable: true, get: function () { return track_gpc_signal_1.initTrackGpcSignal; } });
 var ad_targeting_youtube_1 = require("./ad-targeting-youtube");

package/dist/cjs/track-labs-container.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Collect commercial metrics on:
+ * - whether the page contains a Guardian Labs container element (aka 'dumathoin'), and if so
+ * - when the element is scrolled into view
+ */
+declare const initTrackLabsContainer: () => void;
+export { initTrackLabsContainer };

package/dist/cjs/track-labs-container.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initTrackLabsContainer = void 0;
+const libs_1 = require("@guardian/libs");
+const event_timer_1 = require("./event-timer");
+/**
+ * Collect commercial metrics on:
+ * - whether the page contains a Guardian Labs container element (aka 'dumathoin'), and if so
+ * - when the element is scrolled into view
+ */
+const initTrackLabsContainer = () => {
+    const target = document.querySelector('section.dumathoin');
+    if (target === null)
+        return;
+    const eventTimer = event_timer_1.EventTimer.get();
+    (0, libs_1.log)('commercial', 'Page has labs container');
+    eventTimer.properties['hasLabsContainer'] = true;
+    const observer = new IntersectionObserver((entries) => {
+        entries.map((entry) => {
+            if (entry.isIntersecting) {
+                (0, libs_1.log)('commercial', 'Labs container in view');
+                eventTimer.trigger('labsContainerInView');
+                observer.unobserve(entry.target);
+            }
+        });
+    });
+    observer.observe(target);
+};
+exports.initTrackLabsContainer = initTrackLabsContainer;

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

@@ -22,6 +22,7 @@ declare class AdSize extends Array<number> {
     readonly [1]: number;
     constructor([width, height]: [number, number]);
     toString(): AdSizeString;
+    toArray(): number[];
     get width(): number;
     get height(): number;
 }

package/dist/esm/ad-sizes.js

@@ -18,13 +18,17 @@
 class AdSize extends Array {
     constructor([width, height]) {
         super();
-        this.push(width, height);
+        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]];
+    }
     get width() {
         return this[0];
     }

package/dist/esm/create-ad-slot.d.ts

@@ -1,9 +1,8 @@
-import type { AdSize, SizeMapping } from './ad-sizes';
+import type { SizeMapping } from './ad-sizes';
 declare type SlotName = 'im' | 'high-merch' | 'high-merch-lucky' | 'high-merch-paid' | 'inline' | 'mostpop' | 'comments' | 'top-above-nav' | 'carrot' | 'epic' | 'mobile-sticky';
 declare type CreateSlotOptions = {
     classes?: string;
     name?: string;
-    sizes?: Record<string, AdSize[]>;
 };
 /**
  * Given default size mappings and additional size mappings from

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

@@ -1,59 +1,39 @@
-import { slotSizeMappings } from './ad-sizes';
 import { isBreakpoint } from './lib/breakpoint';
 const adSlotIdPrefix = 'dfp-ad--';
 const adSlotConfigs = {
     im: {
         label: false,
         refresh: false,
-        sizeMappings: slotSizeMappings['im'],
     },
     'high-merch': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: slotSizeMappings['merchandising-high'],
     },
     'high-merch-lucky': {
         label: false,
         refresh: false,
         name: 'merchandising-high-lucky',
-        sizeMappings: slotSizeMappings['merchandising-high-lucky'],
     },
     'high-merch-paid': {
         label: false,
         refresh: false,
         name: 'merchandising-high',
-        sizeMappings: slotSizeMappings['merchandising-high'],
-    },
-    inline: {
-        sizeMappings: slotSizeMappings['inline'],
-    },
-    mostpop: {
-        sizeMappings: slotSizeMappings['mostpop'],
-    },
-    comments: {
-        sizeMappings: slotSizeMappings['comments'],
-    },
-    'top-above-nav': {
-        sizeMappings: slotSizeMappings['top-above-nav'],
     },
     carrot: {
         label: false,
         refresh: false,
         name: 'carrot',
-        sizeMappings: slotSizeMappings['merchandising-high'],
     },
     epic: {
         label: false,
         refresh: false,
         name: 'epic',
-        sizeMappings: slotSizeMappings['epic'],
     },
     'mobile-sticky': {
         label: true,
         refresh: true,
         name: 'mobile-sticky',
-        sizeMappings: slotSizeMappings['mobile-sticky'],
     },
 };
 /**
@@ -82,10 +62,10 @@ const createAdSlotElement = (name, attrs, classes) => {
     const adSlot = document.createElement('div');
     adSlot.id = id;
     adSlot.className = `js-ad-slot ad-slot ${classes.join(' ')}`;
-    adSlot.setAttribute('data-link-name', `ad slot ${name}`);
-    adSlot.setAttribute('data-name', name);
+    adSlot.dataset.linkName = `ad slot ${name}`;
+    adSlot.dataset.name = name;
     adSlot.setAttribute('aria-hidden', 'true');
-    Object.entries(attrs).forEach(([k, v]) => adSlot.setAttribute(k, v));
+    Object.entries(attrs).forEach(([k, v]) => (adSlot.dataset[k] = v));
     return adSlot;
 };
 /**
@@ -108,35 +88,16 @@ const concatSizeMappings = (defaultSizeMappings, optionSizeMappings = {}) => Obj
     }
     return sizeMappings;
 }, { ...defaultSizeMappings });
-/**
- * Convert size mappings to a string that will be added to the ad slot
- * data attributes.
- *
- * e.g. { desktop: [[320,250], [320, 280]] } => { desktop: '320,250|320,280' }
- *
- */
-const covertSizeMappingsToStrings = (sizeMappings) => Object.entries(sizeMappings).reduce((result, [device, sizes]) => {
-    result[device] = sizes.join('|');
-    return result;
-}, {});
-/**
- * Prefix all object keys with data-${key}
- */
-const createDataAttributes = (attrs) => Object.entries(attrs).reduce((result, [key, value]) => {
-    result[`data-${key}`] = value;
-    return result;
-}, {});
 const createAdSlot = (name, options = {}) => {
-    const adSlotConfig = adSlotConfigs[name];
+    const adSlotConfig = adSlotConfigs[name] ?? {};
     const slotName = options.name ?? adSlotConfig.name ?? name;
-    const sizeMappings = concatSizeMappings(adSlotConfig.sizeMappings, options.sizes);
-    const attributes = covertSizeMappingsToStrings(sizeMappings);
+    const dataAttributes = {};
     if (adSlotConfig.label === false) {
-        attributes.label = 'false';
+        dataAttributes.label = 'false';
     }
     if (adSlotConfig.refresh === false) {
-        attributes.refresh = 'false';
+        dataAttributes.refresh = 'false';
     }
-    return createAdSlotElement(slotName, createDataAttributes(attributes), createClasses(slotName, options.classes));
+    return createAdSlotElement(slotName, dataAttributes, createClasses(slotName, options.classes));
 };
 export { createAdSlot, concatSizeMappings };

package/dist/esm/event-timer.d.ts

@@ -32,6 +32,7 @@ interface EventTimerProperties {
     pageHeightVH?: number;
     gpcSignal?: number;
     lazyLoadMarginPercent?: number;
+    hasLabsContainer?: boolean;
 }
 export declare class EventTimer {
     private _events;

package/dist/esm/index.d.ts

@@ -14,6 +14,7 @@ export type { SizeKeys, AdSizeString, AdSize, SizeMapping, SlotSizeMappings, Slo
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
+export { initTrackLabsContainer } from './track-labs-container';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 export { createAdSlot, concatSizeMappings } from './create-ad-slot';

package/dist/esm/index.js

@@ -12,6 +12,7 @@ export { isBreakpoint } from './lib/breakpoint';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
+export { initTrackLabsContainer } from './track-labs-container';
 export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 export { createAdSlot, concatSizeMappings } from './create-ad-slot';

package/dist/esm/track-labs-container.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Collect commercial metrics on:
+ * - whether the page contains a Guardian Labs container element (aka 'dumathoin'), and if so
+ * - when the element is scrolled into view
+ */
+declare const initTrackLabsContainer: () => void;
+export { initTrackLabsContainer };

package/dist/esm/track-labs-container.js

@@ -0,0 +1,26 @@
+import { log } from '@guardian/libs';
+import { EventTimer } from './event-timer';
+/**
+ * Collect commercial metrics on:
+ * - whether the page contains a Guardian Labs container element (aka 'dumathoin'), and if so
+ * - when the element is scrolled into view
+ */
+const initTrackLabsContainer = () => {
+    const target = document.querySelector('section.dumathoin');
+    if (target === null)
+        return;
+    const eventTimer = EventTimer.get();
+    log('commercial', 'Page has labs container');
+    eventTimer.properties['hasLabsContainer'] = true;
+    const observer = new IntersectionObserver((entries) => {
+        entries.map((entry) => {
+            if (entry.isIntersecting) {
+                log('commercial', 'Labs container in view');
+                eventTimer.trigger('labsContainerInView');
+                observer.unobserve(entry.target);
+            }
+        });
+    });
+    observer.observe(target);
+};
+export { initTrackLabsContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/commercial-core",
-  "version": "4.6.0",
+  "version": "4.9.0",
   "description": "Guardian advertising business logic",
   "homepage": "https://github.com/guardian/commercial-core#readme",
   "bugs": {
@@ -47,9 +47,9 @@
     "@guardian/ab-core": "^2.0.0",
     "@guardian/consent-management-platform": "^10.6.0",
     "@guardian/eslint-config-typescript": "^1.0.0",
-    "@guardian/libs": "5.1.0",
-    "@guardian/prettier": "^1.0.0",
-    "@octokit/core": "^3.5.1",
+    "@guardian/libs": "^7.1.3",
+    "@guardian/prettier": "^2.1.1",
+    "@octokit/core": "^4.0.5",
     "@semantic-release/github": "^8.0.2",
     "@types/google.analytics": "^0.0.42",
     "@types/googletag": "^2.0.0",
@@ -57,7 +57,7 @@
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "^5.5.0",
     "commitizen": "^4.2.4",
-    "conventional-changelog-conventionalcommits": "^4.6.3",
+    "conventional-changelog-conventionalcommits": "^5.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
@@ -82,6 +82,6 @@
   },
   "peerDependencies": {
     "@guardian/ab-core": "^2.0.0",
-    "@guardian/libs": "^3.3.0"
+    "@guardian/libs": ">6"
   }
 }