@guardian/commercial-core 3.3.0 → 4.0.0

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

@@ -11,7 +11,7 @@ interface SizeMapping {
     phablet?: AdSize[];
     tablet?: AdSize[];
 }
-interface SizeMappings {
+interface SlotSizeMappings {
     right: SizeMapping;
     comments: SizeMapping;
     'top-above-nav': SizeMapping;
@@ -21,10 +21,10 @@ interface SizeMappings {
     survey: SizeMapping;
 }
 declare const adSizes: Record<SizeKeys, AdSize>;
-declare const sizeMappings: SizeMappings;
+declare const slotSizeMappings: SlotSizeMappings;
 declare const getAdSize: (size: SizeKeys) => AdSize;
 export declare const _: {
     createAdSize: (width: number, height: number) => AdSize;
 };
-export type { AdSizeString, AdSize, SizeKeys };
-export { adSizes, getAdSize, sizeMappings };
+export type { AdSizeString, AdSize, SizeKeys, SizeMapping };
+export { adSizes, getAdSize, slotSizeMappings };

package/dist/cjs/ad-sizes.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sizeMappings = exports.getAdSize = exports.adSizes = exports._ = void 0;
+exports.slotSizeMappings = exports.getAdSize = exports.adSizes = exports._ = void 0;
 const createAdSize = (width, height) => {
     const toString = () => width === 0 && height === 0 ? 'fluid' : `${width},${height}`;
     return Object.freeze({
@@ -43,7 +43,7 @@ const adSizes = {
     '160x600': adSizesPartial.skyscraper,
 };
 exports.adSizes = adSizes;
-const sizeMappings = {
+const slotSizeMappings = {
     right: {
         mobile: [
             adSizes.outOfPage,
@@ -156,7 +156,7 @@ const sizeMappings = {
         desktop: [adSizes.outOfPage],
     },
 };
-exports.sizeMappings = sizeMappings;
+exports.slotSizeMappings = slotSizeMappings;
 const getAdSize = (size) => adSizes[size];
 exports.getAdSize = getAdSize;
 // Export for testing

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

@@ -0,0 +1,9 @@
+import type { AdSize } 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[]>;
+};
+export declare const createAdSlot: (name: SlotName, options?: CreateSlotOptions) => HTMLElement;
+export {};

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

@@ -0,0 +1,229 @@
+"use strict";
+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
+
+    The ad sizes which are hardcoded here are also hardcoded in the source code of
+    dotcom-rendering.
+
+    If/when this file is modified, please make sure that updates, if any, are reported to DCR.
+
+    TODO use a map type??
+    want to assert that values are of type AdSlotConfig
+ */
+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,
+            ],
+        },
+    },
+    '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,
+            ],
+        },
+    },
+    '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],
+        },
+    },
+    '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,
+            ],
+        },
+    },
+    inline: {
+        sizeMappings: commonSizeMappings,
+    },
+    mostpop: {
+        sizeMappings: commonSizeMappings,
+    },
+    comments: {
+        sizeMappings: commonSizeMappings,
+    },
+    '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,
+            ],
+        },
+    },
+    carrot: {
+        label: false,
+        refresh: false,
+        name: 'carrot',
+        sizeMappings: {
+            mobile: [ad_sizes_1.adSizes.fluid],
+        },
+    },
+    epic: {
+        label: false,
+        refresh: false,
+        name: 'epic',
+        sizeMappings: {
+            mobile: [ad_sizes_1.adSizes.fluid],
+        },
+    },
+    'mobile-sticky': {
+        label: true,
+        refresh: true,
+        name: 'mobile-sticky',
+        sizeMappings: {
+            mobile: [ad_sizes_1.adSizes.mobilesticky],
+        },
+    },
+};
+/**
+  Returns an adSlot HTMLElement which is the main DFP slot.
+
+  Insert that element as siblings at the place you want adverts to appear.
+
+  Note that for the DFP slot to be filled by GTP, you'll have to
+  use addSlot from add-slot.js
+*/
+const createAdSlotElement = (name, attrs, classes) => {
+    const id = `${adSlotIdPrefix}${name}`;
+    // 3562dc07-78e9-4507-b922-78b979d4c5cb
+    if (window.guardian.config?.isDotcomRendering && name === 'top-above-nav') {
+        // This is to prevent a problem that appeared with DCR.
+        // We are simply making sure that if we are about to
+        // introduce dfp-ad--top-above-nav then there isn't already one.
+        const node = document.getElementById(id);
+        if (node?.parentNode) {
+            const pnode = node.parentNode;
+            console.log(`warning: cleaning up dom node id: dfp-ad--${name}`);
+            pnode.removeChild(node);
+        }
+    }
+    // The 'main' adSlot
+    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.setAttribute('aria-hidden', 'true');
+    Object.entries(attrs).forEach(([k, v]) => adSlot.setAttribute(k, v));
+    return adSlot;
+};
+/**
+ * Split class names and prefix all with ad-slot--${className}
+ */
+const createClasses = (slotName, classes) => [...(classes?.split(' ') ?? []), slotName].map((className) => `ad-slot--${className}`);
+/**
+ * Given default size mappings and additional size mappings from
+ * the createAdSlot options parameter.
+ *
+ * 1. Check that the options size mappings use known device names
+ * 2. If so concat the size mappings
+ *
+ */
+const concatSizeMappings = (defaultSizeMappings, optionSizeMappings) => {
+    if (!optionSizeMappings)
+        return defaultSizeMappings;
+    const concatenatedSizeMappings = { ...defaultSizeMappings };
+    const optionDevices = Object.keys(optionSizeMappings); // ['mobile', 'desktop']
+    for (let i = 0; i < optionDevices.length; i++) {
+        const device = optionDevices[i];
+        if (optionSizeMappings[device] && defaultSizeMappings[device]) {
+            const optionSizeMappingsForDevice = optionSizeMappings[device];
+            const defaultSizeMappingsForDevice = defaultSizeMappings[device];
+            if (defaultSizeMappingsForDevice && optionSizeMappingsForDevice) {
+                // TODO can we do concatenatedSizeMappings[device]?.concat ?
+                concatenatedSizeMappings[device] = (concatenatedSizeMappings[device] ?? []).concat(optionSizeMappingsForDevice);
+            }
+        }
+    }
+    return concatenatedSizeMappings;
+};
+/**
+ * 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 slotName = options.name ?? adSlotConfig.name ?? name;
+    const sizeMappings = concatSizeMappings(adSlotConfig.sizeMappings, options.sizes);
+    const attributes = covertSizeMappingsToStrings(sizeMappings);
+    if (adSlotConfig.label === false) {
+        attributes.label = 'false';
+    }
+    if (adSlotConfig.refresh === false) {
+        attributes.refresh = 'false';
+    }
+    return createAdSlotElement(slotName, createDataAttributes(attributes), createClasses(slotName, options.classes));
+};
+exports.createAdSlot = createAdSlot;

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

@@ -30,6 +30,7 @@ interface EventTimerProperties {
     adSlotsInline?: number;
     adSlotsTotal?: number;
     pageHeightVH?: number;
+    gpcSignal?: number;
     lazyLoadMarginPercent?: number;
 }
 export declare class EventTimer {
@@ -71,7 +72,7 @@ export declare class EventTimer {
      * @param {string} name - the property's name
      * @param {value} number - the property's value
      */
-    setProperty(name: 'adSlotsInline' | 'adSlotsTotal' | 'pageHeightVH' | 'lazyLoadMarginPercent', value: number): void;
+    setProperty(name: 'adSlotsInline' | 'adSlotsTotal' | 'pageHeightVH' | 'gpcSignal' | 'lazyLoadMarginPercent', value: number): void;
     /**
      * Creates a new performance mark
      * For slot events also ensures each TYPE of event event is marked only once for 'first'

package/dist/cjs/index.d.ts

@@ -7,11 +7,12 @@ export { remarketing } from './third-party-tags/remarketing';
 export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
 export type { ThirdPartyTag } from './types';
-export { adSizes, getAdSize, sizeMappings } from './ad-sizes';
+export { adSizes, getAdSize, slotSizeMappings } from './ad-sizes';
 export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
+export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';

package/dist/cjs/index.js

@@ -2,7 +2,11 @@
 /* istanbul ignore file -- there's no point check this for test coverage */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -20,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.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.sizeMappings = 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.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackGpcSignal = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = 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");
@@ -41,7 +45,7 @@ Object.defineProperty(exports, "initCommercialMetrics", { enumerable: true, get:
 var ad_sizes_1 = require("./ad-sizes");
 Object.defineProperty(exports, "adSizes", { enumerable: true, get: function () { return ad_sizes_1.adSizes; } });
 Object.defineProperty(exports, "getAdSize", { enumerable: true, get: function () { return ad_sizes_1.getAdSize; } });
-Object.defineProperty(exports, "sizeMappings", { enumerable: true, get: function () { return ad_sizes_1.sizeMappings; } });
+Object.defineProperty(exports, "slotSizeMappings", { enumerable: true, get: function () { return ad_sizes_1.slotSizeMappings; } });
 var detect_ad_blocker_1 = require("./detect-ad-blocker");
 Object.defineProperty(exports, "isAdBlockInUse", { enumerable: true, get: function () { return detect_ad_blocker_1.isAdBlockInUse; } });
 var permutive_2 = require("./permutive");
@@ -50,6 +54,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_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");
 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; } });

package/dist/cjs/send-commercial-metrics.d.ts

@@ -22,7 +22,7 @@ declare enum Endpoints {
 /**
  * A method to asynchronously send metrics after initialization.
  */
-declare function bypassCommercialMetricsSampling(): void;
+declare function bypassCommercialMetricsSampling(): Promise<void>;
 interface InitCommercialMetricsArgs {
     pageViewId: string;
     browserId: string | undefined;
@@ -38,11 +38,10 @@ interface InitCommercialMetricsArgs {
  * @param init.adBlockerInUse - indicates whether or not an adblocker is being used.
  * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-declare function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling, }: InitCommercialMetricsArgs): boolean;
+declare function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling, }: InitCommercialMetricsArgs): Promise<boolean>;
 export declare const _: {
     Endpoints: typeof Endpoints;
     setEndpoint: (isDev: boolean) => Endpoints;
-    filterUndefinedProperties: <T>(transformedProperties: [string, T | undefined][]) => [string, T][];
     mapEventTimerPropertiesToString: (properties: Array<[string, string | number]>) => Property[];
     roundTimeStamp: (events: TimedEvent[]) => Metric[];
     transformToObjectEntries: (eventTimerProperties: EventProperties) => Array<[string, string | number | undefined]>;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = exports._ = void 0;
+const consent_management_platform_1 = require("@guardian/consent-management-platform");
 const libs_1 = require("@guardian/libs");
 const event_timer_1 = require("./event-timer");
 var Endpoints;
@@ -38,12 +39,6 @@ const transformToObjectEntries = (eventTimerProperties) => {
     // Transforms object {key: value} pairs into an array of [key, value] arrays
     return Object.entries(eventTimerProperties);
 };
-const filterUndefinedProperties = (transformedProperties) => transformedProperties.reduce((acc, [key, value]) => {
-    if (typeof value !== 'undefined') {
-        acc.push([key, value]);
-    }
-    return acc;
-}, []);
 const mapEventTimerPropertiesToString = (properties) => {
     return properties.map(([name, value]) => ({
         name: String(name),
@@ -64,7 +59,7 @@ function gatherMetricsOnPageUnload() {
     // Assemble commercial properties and metrics
     const eventTimer = event_timer_1.EventTimer.get();
     const transformedEntries = transformToObjectEntries(eventTimer.properties);
-    const filteredEventTimerProperties = filterUndefinedProperties(transformedEntries);
+    const filteredEventTimerProperties = transformedEntries.filter((item) => typeof item[1] !== 'undefined');
     const mappedEventTimerProperties = mapEventTimerPropertiesToString(filteredEventTimerProperties);
     const properties = mappedEventTimerProperties
         .concat(devProperties)
@@ -92,15 +87,32 @@ const addVisibilityListeners = () => {
     // Safari does not reliably fire the `visibilitychange` on page unload.
     window.addEventListener('pagehide', listener);
 };
+const checkConsent = async () => {
+    const consentState = await (0, consent_management_platform_1.onConsent)();
+    if (consentState.tcfv2) {
+        // TCFv2 mode - check for consent
+        const consents = consentState.tcfv2.consents;
+        const REQUIRED_CONSENTS = [7, 8];
+        return REQUIRED_CONSENTS.every((consent) => consents[consent]);
+    }
+    // non-TCFv2 mode - don't check for consent
+    return true;
+};
 /**
  * A method to asynchronously send metrics after initialization.
  */
-function bypassCommercialMetricsSampling() {
+async function bypassCommercialMetricsSampling() {
     if (!initialised) {
         console.warn('initCommercialMetrics not yet initialised');
         return;
     }
-    addVisibilityListeners();
+    const consented = await checkConsent();
+    if (consented) {
+        addVisibilityListeners();
+    }
+    else {
+        (0, libs_1.log)('commercial', "Metrics won't be sent because consent wasn't given");
+    }
 }
 exports.bypassCommercialMetricsSampling = bypassCommercialMetricsSampling;
 /**
@@ -111,7 +123,7 @@ exports.bypassCommercialMetricsSampling = bypassCommercialMetricsSampling;
  * @param init.adBlockerInUse - indicates whether or not an adblocker is being used.
  * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling = 1 / 100, }) {
+async function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling = 1 / 100, }) {
     commercialMetricsPayload.page_view_id = pageViewId;
     commercialMetricsPayload.browser_id = browserId;
     setEndpoint(isDev);
@@ -123,8 +135,14 @@ function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, s
     initialised = true;
     const userIsInSamplingGroup = Math.random() <= sampling;
     if (isDev || userIsInSamplingGroup) {
-        addVisibilityListeners();
-        return true;
+        const consented = await checkConsent();
+        if (consented) {
+            addVisibilityListeners();
+            return true;
+        }
+        else {
+            (0, libs_1.log)('commercial', "Metrics won't be sent because consent wasn't given");
+        }
     }
     return false;
 }
@@ -132,7 +150,6 @@ exports.initCommercialMetrics = initCommercialMetrics;
 exports._ = {
     Endpoints,
     setEndpoint,
-    filterUndefinedProperties,
     mapEventTimerPropertiesToString,
     roundTimeStamp,
     transformToObjectEntries,

package/dist/cjs/track-gpc-signal.d.ts

@@ -0,0 +1,7 @@
+import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
+/**
+ * Collect metrics on gpcSignal presence and value
+ * https://globalprivacycontrol.github.io/gpc-spec/
+ */
+declare const initTrackGpcSignal: (consentState: ConsentState) => void;
+export { initTrackGpcSignal };

package/dist/cjs/track-gpc-signal.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initTrackGpcSignal = void 0;
+const libs_1 = require("@guardian/libs");
+const event_timer_1 = require("./event-timer");
+/**
+ * Collect metrics on gpcSignal presence and value
+ * https://globalprivacycontrol.github.io/gpc-spec/
+ */
+const initTrackGpcSignal = (consentState) => {
+    // If undefined we set the property value to -1, false is 0, true is 1
+    const gpcSignal = consentState.gpcSignal === undefined ? -1 : +consentState.gpcSignal;
+    const eventTimer = event_timer_1.EventTimer.get();
+    (0, libs_1.log)('commercial', `gpcSignal ${gpcSignal}`);
+    eventTimer.setProperty('gpcSignal', gpcSignal);
+};
+exports.initTrackGpcSignal = initTrackGpcSignal;

package/dist/cjs/types.d.ts

@@ -23,6 +23,7 @@ export declare type GuardianAnalyticsConfig = {
 };
 export declare type GuardianWindowConfig = {
     googleAnalytics?: GuardianAnalyticsConfig;
+    isDotcomRendering?: boolean;
 };
 export declare type GoogleTagParams = unknown;
 export declare type GoogleTrackConversionObject = {

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

@@ -11,7 +11,7 @@ interface SizeMapping {
     phablet?: AdSize[];
     tablet?: AdSize[];
 }
-interface SizeMappings {
+interface SlotSizeMappings {
     right: SizeMapping;
     comments: SizeMapping;
     'top-above-nav': SizeMapping;
@@ -21,10 +21,10 @@ interface SizeMappings {
     survey: SizeMapping;
 }
 declare const adSizes: Record<SizeKeys, AdSize>;
-declare const sizeMappings: SizeMappings;
+declare const slotSizeMappings: SlotSizeMappings;
 declare const getAdSize: (size: SizeKeys) => AdSize;
 export declare const _: {
     createAdSize: (width: number, height: number) => AdSize;
 };
-export type { AdSizeString, AdSize, SizeKeys };
-export { adSizes, getAdSize, sizeMappings };
+export type { AdSizeString, AdSize, SizeKeys, SizeMapping };
+export { adSizes, getAdSize, slotSizeMappings };

package/dist/esm/ad-sizes.js

@@ -39,7 +39,7 @@ const adSizes = {
     '300x1050': adSizesPartial.portrait,
     '160x600': adSizesPartial.skyscraper,
 };
-const sizeMappings = {
+const slotSizeMappings = {
     right: {
         mobile: [
             adSizes.outOfPage,
@@ -155,4 +155,4 @@ const sizeMappings = {
 const getAdSize = (size) => adSizes[size];
 // Export for testing
 export const _ = { createAdSize };
-export { adSizes, getAdSize, sizeMappings };
+export { adSizes, getAdSize, slotSizeMappings };

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

@@ -0,0 +1,9 @@
+import type { AdSize } 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[]>;
+};
+export declare const createAdSlot: (name: SlotName, options?: CreateSlotOptions) => HTMLElement;
+export {};

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

@@ -0,0 +1,225 @@
+import { adSizes } 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
+
+    The ad sizes which are hardcoded here are also hardcoded in the source code of
+    dotcom-rendering.
+
+    If/when this file is modified, please make sure that updates, if any, are reported to DCR.
+
+    TODO use a map type??
+    want to assert that values are of type AdSlotConfig
+ */
+const adSlotConfigs = {
+    im: {
+        label: false,
+        refresh: false,
+        sizeMappings: {
+            mobile: [
+                adSizes.outOfPage,
+                adSizes.empty,
+                adSizes.inlineMerchandising,
+                adSizes.fluid,
+            ],
+        },
+    },
+    'high-merch': {
+        label: false,
+        refresh: false,
+        name: 'merchandising-high',
+        sizeMappings: {
+            mobile: [
+                adSizes.outOfPage,
+                adSizes.empty,
+                adSizes.merchandisingHigh,
+                adSizes.fluid,
+            ],
+        },
+    },
+    'high-merch-lucky': {
+        label: false,
+        refresh: false,
+        name: 'merchandising-high-lucky',
+        sizeMappings: {
+            mobile: [adSizes.outOfPage, adSizes.empty, adSizes.fluid],
+        },
+    },
+    'high-merch-paid': {
+        label: false,
+        refresh: false,
+        name: 'merchandising-high',
+        sizeMappings: {
+            mobile: [
+                adSizes.outOfPage,
+                adSizes.empty,
+                adSizes.merchandisingHighAdFeature,
+                adSizes.fluid,
+            ],
+        },
+    },
+    inline: {
+        sizeMappings: commonSizeMappings,
+    },
+    mostpop: {
+        sizeMappings: commonSizeMappings,
+    },
+    comments: {
+        sizeMappings: commonSizeMappings,
+    },
+    'top-above-nav': {
+        sizeMappings: {
+            mobile: [
+                adSizes.outOfPage,
+                adSizes.empty,
+                adSizes.fabric,
+                adSizes.outstreamMobile,
+                adSizes.mpu,
+                adSizes.fluid,
+            ],
+        },
+    },
+    carrot: {
+        label: false,
+        refresh: false,
+        name: 'carrot',
+        sizeMappings: {
+            mobile: [adSizes.fluid],
+        },
+    },
+    epic: {
+        label: false,
+        refresh: false,
+        name: 'epic',
+        sizeMappings: {
+            mobile: [adSizes.fluid],
+        },
+    },
+    'mobile-sticky': {
+        label: true,
+        refresh: true,
+        name: 'mobile-sticky',
+        sizeMappings: {
+            mobile: [adSizes.mobilesticky],
+        },
+    },
+};
+/**
+  Returns an adSlot HTMLElement which is the main DFP slot.
+
+  Insert that element as siblings at the place you want adverts to appear.
+
+  Note that for the DFP slot to be filled by GTP, you'll have to
+  use addSlot from add-slot.js
+*/
+const createAdSlotElement = (name, attrs, classes) => {
+    const id = `${adSlotIdPrefix}${name}`;
+    // 3562dc07-78e9-4507-b922-78b979d4c5cb
+    if (window.guardian.config?.isDotcomRendering && name === 'top-above-nav') {
+        // This is to prevent a problem that appeared with DCR.
+        // We are simply making sure that if we are about to
+        // introduce dfp-ad--top-above-nav then there isn't already one.
+        const node = document.getElementById(id);
+        if (node?.parentNode) {
+            const pnode = node.parentNode;
+            console.log(`warning: cleaning up dom node id: dfp-ad--${name}`);
+            pnode.removeChild(node);
+        }
+    }
+    // The 'main' adSlot
+    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.setAttribute('aria-hidden', 'true');
+    Object.entries(attrs).forEach(([k, v]) => adSlot.setAttribute(k, v));
+    return adSlot;
+};
+/**
+ * Split class names and prefix all with ad-slot--${className}
+ */
+const createClasses = (slotName, classes) => [...(classes?.split(' ') ?? []), slotName].map((className) => `ad-slot--${className}`);
+/**
+ * Given default size mappings and additional size mappings from
+ * the createAdSlot options parameter.
+ *
+ * 1. Check that the options size mappings use known device names
+ * 2. If so concat the size mappings
+ *
+ */
+const concatSizeMappings = (defaultSizeMappings, optionSizeMappings) => {
+    if (!optionSizeMappings)
+        return defaultSizeMappings;
+    const concatenatedSizeMappings = { ...defaultSizeMappings };
+    const optionDevices = Object.keys(optionSizeMappings); // ['mobile', 'desktop']
+    for (let i = 0; i < optionDevices.length; i++) {
+        const device = optionDevices[i];
+        if (optionSizeMappings[device] && defaultSizeMappings[device]) {
+            const optionSizeMappingsForDevice = optionSizeMappings[device];
+            const defaultSizeMappingsForDevice = defaultSizeMappings[device];
+            if (defaultSizeMappingsForDevice && optionSizeMappingsForDevice) {
+                // TODO can we do concatenatedSizeMappings[device]?.concat ?
+                concatenatedSizeMappings[device] = (concatenatedSizeMappings[device] ?? []).concat(optionSizeMappingsForDevice);
+            }
+        }
+    }
+    return concatenatedSizeMappings;
+};
+/**
+ * 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;
+}, {});
+export const createAdSlot = (name, options = {}) => {
+    const adSlotConfig = adSlotConfigs[name];
+    const slotName = options.name ?? adSlotConfig.name ?? name;
+    const sizeMappings = concatSizeMappings(adSlotConfig.sizeMappings, options.sizes);
+    const attributes = covertSizeMappingsToStrings(sizeMappings);
+    if (adSlotConfig.label === false) {
+        attributes.label = 'false';
+    }
+    if (adSlotConfig.refresh === false) {
+        attributes.refresh = 'false';
+    }
+    return createAdSlotElement(slotName, createDataAttributes(attributes), createClasses(slotName, options.classes));
+};

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

@@ -30,6 +30,7 @@ interface EventTimerProperties {
     adSlotsInline?: number;
     adSlotsTotal?: number;
     pageHeightVH?: number;
+    gpcSignal?: number;
     lazyLoadMarginPercent?: number;
 }
 export declare class EventTimer {
@@ -71,7 +72,7 @@ export declare class EventTimer {
      * @param {string} name - the property's name
      * @param {value} number - the property's value
      */
-    setProperty(name: 'adSlotsInline' | 'adSlotsTotal' | 'pageHeightVH' | 'lazyLoadMarginPercent', value: number): void;
+    setProperty(name: 'adSlotsInline' | 'adSlotsTotal' | 'pageHeightVH' | 'gpcSignal' | 'lazyLoadMarginPercent', value: number): void;
     /**
      * Creates a new performance mark
      * For slot events also ensures each TYPE of event event is marked only once for 'first'

package/dist/esm/index.d.ts

@@ -7,11 +7,12 @@ export { remarketing } from './third-party-tags/remarketing';
 export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
 export type { ThirdPartyTag } from './types';
-export { adSizes, getAdSize, sizeMappings } from './ad-sizes';
+export { adSizes, getAdSize, slotSizeMappings } from './ad-sizes';
 export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
+export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';

package/dist/esm/index.js

@@ -7,10 +7,11 @@ export { inizio } from './third-party-tags/inizio';
 export { remarketing } from './third-party-tags/remarketing';
 export { EventTimer } from './event-timer';
 export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './send-commercial-metrics';
-export { adSizes, getAdSize, sizeMappings } from './ad-sizes';
+export { adSizes, getAdSize, slotSizeMappings } from './ad-sizes';
 export { isAdBlockInUse } from './detect-ad-blocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { initTrackScrollDepth } from './track-scroll-depth';
+export { initTrackGpcSignal } from './track-gpc-signal';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 import * as constants_1 from './constants';
 export { constants_1 as constants };

package/dist/esm/send-commercial-metrics.d.ts

@@ -22,7 +22,7 @@ declare enum Endpoints {
 /**
  * A method to asynchronously send metrics after initialization.
  */
-declare function bypassCommercialMetricsSampling(): void;
+declare function bypassCommercialMetricsSampling(): Promise<void>;
 interface InitCommercialMetricsArgs {
     pageViewId: string;
     browserId: string | undefined;
@@ -38,11 +38,10 @@ interface InitCommercialMetricsArgs {
  * @param init.adBlockerInUse - indicates whether or not an adblocker is being used.
  * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-declare function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling, }: InitCommercialMetricsArgs): boolean;
+declare function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling, }: InitCommercialMetricsArgs): Promise<boolean>;
 export declare const _: {
     Endpoints: typeof Endpoints;
     setEndpoint: (isDev: boolean) => Endpoints;
-    filterUndefinedProperties: <T>(transformedProperties: [string, T | undefined][]) => [string, T][];
     mapEventTimerPropertiesToString: (properties: Array<[string, string | number]>) => Property[];
     roundTimeStamp: (events: TimedEvent[]) => Metric[];
     transformToObjectEntries: (eventTimerProperties: EventProperties) => Array<[string, string | number | undefined]>;

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

@@ -1,3 +1,4 @@
+import { onConsent } from '@guardian/consent-management-platform';
 import { log } from '@guardian/libs';
 import { EventTimer } from './event-timer';
 var Endpoints;
@@ -35,12 +36,6 @@ const transformToObjectEntries = (eventTimerProperties) => {
     // Transforms object {key: value} pairs into an array of [key, value] arrays
     return Object.entries(eventTimerProperties);
 };
-const filterUndefinedProperties = (transformedProperties) => transformedProperties.reduce((acc, [key, value]) => {
-    if (typeof value !== 'undefined') {
-        acc.push([key, value]);
-    }
-    return acc;
-}, []);
 const mapEventTimerPropertiesToString = (properties) => {
     return properties.map(([name, value]) => ({
         name: String(name),
@@ -61,7 +56,7 @@ function gatherMetricsOnPageUnload() {
     // Assemble commercial properties and metrics
     const eventTimer = EventTimer.get();
     const transformedEntries = transformToObjectEntries(eventTimer.properties);
-    const filteredEventTimerProperties = filterUndefinedProperties(transformedEntries);
+    const filteredEventTimerProperties = transformedEntries.filter((item) => typeof item[1] !== 'undefined');
     const mappedEventTimerProperties = mapEventTimerPropertiesToString(filteredEventTimerProperties);
     const properties = mappedEventTimerProperties
         .concat(devProperties)
@@ -89,15 +84,32 @@ const addVisibilityListeners = () => {
     // Safari does not reliably fire the `visibilitychange` on page unload.
     window.addEventListener('pagehide', listener);
 };
+const checkConsent = async () => {
+    const consentState = await onConsent();
+    if (consentState.tcfv2) {
+        // TCFv2 mode - check for consent
+        const consents = consentState.tcfv2.consents;
+        const REQUIRED_CONSENTS = [7, 8];
+        return REQUIRED_CONSENTS.every((consent) => consents[consent]);
+    }
+    // non-TCFv2 mode - don't check for consent
+    return true;
+};
 /**
  * A method to asynchronously send metrics after initialization.
  */
-function bypassCommercialMetricsSampling() {
+async function bypassCommercialMetricsSampling() {
     if (!initialised) {
         console.warn('initCommercialMetrics not yet initialised');
         return;
     }
-    addVisibilityListeners();
+    const consented = await checkConsent();
+    if (consented) {
+        addVisibilityListeners();
+    }
+    else {
+        log('commercial', "Metrics won't be sent because consent wasn't given");
+    }
 }
 /**
  * A method to initialise metrics.
@@ -107,7 +119,7 @@ function bypassCommercialMetricsSampling() {
  * @param init.adBlockerInUse - indicates whether or not an adblocker is being used.
  * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling = 1 / 100, }) {
+async function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling = 1 / 100, }) {
     commercialMetricsPayload.page_view_id = pageViewId;
     commercialMetricsPayload.browser_id = browserId;
     setEndpoint(isDev);
@@ -119,15 +131,20 @@ function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, s
     initialised = true;
     const userIsInSamplingGroup = Math.random() <= sampling;
     if (isDev || userIsInSamplingGroup) {
-        addVisibilityListeners();
-        return true;
+        const consented = await checkConsent();
+        if (consented) {
+            addVisibilityListeners();
+            return true;
+        }
+        else {
+            log('commercial', "Metrics won't be sent because consent wasn't given");
+        }
     }
     return false;
 }
 export const _ = {
     Endpoints,
     setEndpoint,
-    filterUndefinedProperties,
     mapEventTimerPropertiesToString,
     roundTimeStamp,
     transformToObjectEntries,

package/dist/esm/track-gpc-signal.d.ts

@@ -0,0 +1,7 @@
+import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
+/**
+ * Collect metrics on gpcSignal presence and value
+ * https://globalprivacycontrol.github.io/gpc-spec/
+ */
+declare const initTrackGpcSignal: (consentState: ConsentState) => void;
+export { initTrackGpcSignal };

package/dist/esm/track-gpc-signal.js

@@ -0,0 +1,14 @@
+import { log } from '@guardian/libs';
+import { EventTimer } from './event-timer';
+/**
+ * Collect metrics on gpcSignal presence and value
+ * https://globalprivacycontrol.github.io/gpc-spec/
+ */
+const initTrackGpcSignal = (consentState) => {
+    // If undefined we set the property value to -1, false is 0, true is 1
+    const gpcSignal = consentState.gpcSignal === undefined ? -1 : +consentState.gpcSignal;
+    const eventTimer = EventTimer.get();
+    log('commercial', `gpcSignal ${gpcSignal}`);
+    eventTimer.setProperty('gpcSignal', gpcSignal);
+};
+export { initTrackGpcSignal };

package/dist/esm/types.d.ts

@@ -23,6 +23,7 @@ export declare type GuardianAnalyticsConfig = {
 };
 export declare type GuardianWindowConfig = {
     googleAnalytics?: GuardianAnalyticsConfig;
+    isDotcomRendering?: boolean;
 };
 export declare type GoogleTagParams = unknown;
 export declare type GoogleTrackConversionObject = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/commercial-core",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "Guardian advertising business logic",
   "homepage": "https://github.com/guardian/commercial-core#readme",
   "bugs": {
@@ -43,16 +43,16 @@
   "prettier": "@guardian/prettier",
   "devDependencies": {
     "@commitlint/cli": "^16.1.0",
-    "@commitlint/config-conventional": "^16.0.0",
+    "@commitlint/config-conventional": "^17.0.0",
     "@guardian/ab-core": "^2.0.0",
-    "@guardian/consent-management-platform": "^10.1.0",
+    "@guardian/consent-management-platform": "^10.6.0",
     "@guardian/eslint-config-typescript": "^1.0.0",
-    "@guardian/libs": "3.6.1",
-    "@guardian/prettier": "^0.7.0",
+    "@guardian/libs": "5.1.0",
+    "@guardian/prettier": "^1.0.0",
     "@octokit/core": "^3.5.1",
     "@semantic-release/github": "^8.0.2",
     "@types/google.analytics": "^0.0.42",
-    "@types/googletag": "^1.1.4",
+    "@types/googletag": "^2.0.0",
     "@types/jest": "^27.0.3",
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "^5.5.0",
@@ -63,15 +63,15 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jest": "^25.3.0",
+    "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-prettier": "^4.0.0",
-    "husky": "^7.0.4",
+    "husky": "^8.0.1",
     "jest": "^27.4.1",
     "lint-staged": "^12.1.2",
     "mockdate": "^3.0.5",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.0",
-    "semantic-release": "^18.0.1",
+    "semantic-release": "^19.0.2",
     "ts-jest": "^27.0.7",
     "type-fest": "^2.8.0",
     "typescript": "^4.5.2",