@guardian/commercial-core 0.39.0 → 1.0.0

package/dist/cjs/EventTimer.d.ts

@@ -19,7 +19,9 @@ interface SlotEventStatus {
 }
 interface PageEventStatus {
     commercialStart: boolean;
-    commercialEnd: boolean;
+    commercialExtraModulesLoaded: boolean;
+    commercialBaseModulesLoaded: boolean;
+    commercialModulesLoaded: boolean;
 }
 export declare class EventTimer {
     private _events;

package/dist/cjs/EventTimer.js

@@ -29,7 +29,9 @@ class EventTimer {
             },
             page: {
                 commercialStart: false,
-                commercialEnd: false,
+                commercialExtraModulesLoaded: false,
+                commercialBaseModulesLoaded: false,
+                commercialModulesLoaded: false,
             },
         };
         this.gaConfig = {
@@ -45,7 +47,7 @@ class EventTimer {
                     timingLabel: 'Commercial start parse time',
                 },
                 {
-                    timingVariable: 'commercialEnd',
+                    timingVariable: 'commercialModulesLoaded',
                     timingLabel: 'Commercial end parse time',
                 },
             ],

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

@@ -4,7 +4,7 @@ export declare type AdSize = Readonly<{
     height: number;
     toString: () => AdSizeString;
 }>;
-export declare type SizeKeys = 'billboard' | 'leaderboard' | 'mpu' | 'halfPage' | 'portrait' | 'skyscraper' | 'mobilesticky' | 'fluid' | 'outOfPage' | 'googleCard' | 'video' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'merchandisingHighAdFeature' | 'merchandisingHigh' | 'merchandising' | 'inlineMerchandising' | 'fabric' | 'empty' | '970x250' | '728x90' | '300x250' | '300x600' | '300x1050' | '160x600';
+export 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' | 'video';
 export declare const adSizes: Record<SizeKeys, AdSize>;
 export declare const getAdSize: (size: SizeKeys) => AdSize;
 export declare const _: {

package/dist/cjs/ad-sizes.js

@@ -12,27 +12,27 @@ const createAdSize = (width, height) => {
 const adSizesPartial = {
     // standard ad sizes
     billboard: createAdSize(970, 250),
+    halfPage: createAdSize(300, 600),
     leaderboard: createAdSize(728, 90),
+    mobilesticky: createAdSize(320, 50),
     mpu: createAdSize(300, 250),
-    halfPage: createAdSize(300, 600),
     portrait: createAdSize(300, 1050),
     skyscraper: createAdSize(160, 600),
-    mobilesticky: createAdSize(320, 50),
     // dfp proprietary ad sizes
     fluid: createAdSize(0, 0),
-    outOfPage: createAdSize(1, 1),
     googleCard: createAdSize(300, 274),
+    outOfPage: createAdSize(1, 1),
     // guardian proprietary ad sizes
-    video: createAdSize(620, 1),
+    empty: createAdSize(2, 2),
+    fabric: createAdSize(88, 71),
+    inlineMerchandising: createAdSize(88, 85),
+    merchandising: createAdSize(88, 88),
+    merchandisingHigh: createAdSize(88, 87),
+    merchandisingHighAdFeature: createAdSize(88, 89),
     outstreamDesktop: createAdSize(620, 350),
     outstreamGoogleDesktop: createAdSize(550, 310),
     outstreamMobile: createAdSize(300, 197),
-    merchandisingHighAdFeature: createAdSize(88, 89),
-    merchandisingHigh: createAdSize(88, 87),
-    merchandising: createAdSize(88, 88),
-    inlineMerchandising: createAdSize(88, 85),
-    fabric: createAdSize(88, 71),
-    empty: createAdSize(2, 2),
+    video: createAdSize(620, 1),
 };
 exports.adSizes = {
     ...adSizesPartial,

package/dist/cjs/index.d.ts

@@ -5,7 +5,7 @@ export { twitter } from './third-party-tags/twitter-uwt';
 export { inizio } from './third-party-tags/inizio';
 export { remarketing } from './third-party-tags/remarketing';
 export { EventTimer } from './EventTimer';
-export { sendCommercialMetrics } from './sendCommercialMetrics';
+export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './sendCommercialMetrics';
 export type { ThirdPartyTag } from './types';
 export { adSizes, getAdSize } from './ad-sizes';
 export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
@@ -14,3 +14,14 @@ export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments,
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';
+export type { ContentTargeting } from './targeting/content';
+export { getContentTargeting } from './targeting/content';
+export type { PersonalisedTargeting } from './targeting/personalised';
+export { getPersonalisedTargeting } from './targeting/personalised';
+export type { SessionTargeting } from './targeting/session';
+export { getSessionTargeting } from './targeting/session';
+export type { SharedTargeting } from './targeting/shared';
+export { getSharedTargeting } from './targeting/shared';
+export type { ViewportTargeting } from './targeting/viewport';
+export { getViewportTargeting } from './targeting/viewport';
+export { pickTargetingValues } from './targeting/pick-targeting-values';

package/dist/cjs/index.js

@@ -20,7 +20,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.constants = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.getAdSize = exports.adSizes = exports.sendCommercialMetrics = 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.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = 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");
@@ -36,7 +36,8 @@ Object.defineProperty(exports, "remarketing", { enumerable: true, get: function
 var EventTimer_1 = require("./EventTimer");
 Object.defineProperty(exports, "EventTimer", { enumerable: true, get: function () { return EventTimer_1.EventTimer; } });
 var sendCommercialMetrics_1 = require("./sendCommercialMetrics");
-Object.defineProperty(exports, "sendCommercialMetrics", { enumerable: true, get: function () { return sendCommercialMetrics_1.sendCommercialMetrics; } });
+Object.defineProperty(exports, "bypassCommercialMetricsSampling", { enumerable: true, get: function () { return sendCommercialMetrics_1.bypassCommercialMetricsSampling; } });
+Object.defineProperty(exports, "initCommercialMetrics", { enumerable: true, get: function () { return sendCommercialMetrics_1.initCommercialMetrics; } });
 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; } });
@@ -50,3 +51,15 @@ 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; } });
 exports.constants = __importStar(require("./constants"));
+var content_1 = require("./targeting/content");
+Object.defineProperty(exports, "getContentTargeting", { enumerable: true, get: function () { return content_1.getContentTargeting; } });
+var personalised_1 = require("./targeting/personalised");
+Object.defineProperty(exports, "getPersonalisedTargeting", { enumerable: true, get: function () { return personalised_1.getPersonalisedTargeting; } });
+var session_1 = require("./targeting/session");
+Object.defineProperty(exports, "getSessionTargeting", { enumerable: true, get: function () { return session_1.getSessionTargeting; } });
+var shared_1 = require("./targeting/shared");
+Object.defineProperty(exports, "getSharedTargeting", { enumerable: true, get: function () { return shared_1.getSharedTargeting; } });
+var viewport_1 = require("./targeting/viewport");
+Object.defineProperty(exports, "getViewportTargeting", { enumerable: true, get: function () { return viewport_1.getViewportTargeting; } });
+var pick_targeting_values_1 = require("./targeting/pick-targeting-values");
+Object.defineProperty(exports, "pickTargetingValues", { enumerable: true, get: function () { return pick_targeting_values_1.pickTargetingValues; } });

package/dist/cjs/sendCommercialMetrics.d.ts

@@ -1 +1,43 @@
-export declare function sendCommercialMetrics(pageViewId: string, browserId: string | undefined, isDev: boolean, adBlockerInUse?: boolean): boolean;
+declare type Metric = {
+    name: string;
+    value: number;
+};
+declare type Property = {
+    name: string;
+    value: string;
+};
+declare type TimedEvent = {
+    name: string;
+    ts: number;
+};
+declare type EventProperties = {
+    type?: ConnectionType;
+    downlink?: number;
+    effectiveType?: string;
+};
+declare enum Endpoints {
+    CODE = "//performance-events.code.dev-guardianapis.com/commercial-metrics",
+    PROD = "//performance-events.guardianapis.com/commercial-metrics"
+}
+/**
+ * A method to asynchronously send metrics after initialization.
+ */
+export declare function bypassCommercialMetricsSampling(): void;
+/**
+ * A method to initialise metrics.
+ * @param init.pageViewId - identifies the page view. Usually available on `guardian.config.ophan.pageViewId`. Defaults to `null`
+ * @param init.browserId - identifies the browser. Usually available via `getCookie({ name: 'bwid' })`. Defaults to `null`
+ * @param init.isDev - used to determine whether to use CODE or PROD endpoints.
+ * @param init.adBlockerInUse - indicates whether or not ann adblocker is being used.
+ */
+export declare function initCommercialMetrics(pageViewId: string, browserId: string | undefined, isDev: boolean, adBlockerInUse?: boolean, sampling?: number): 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]>;
+    reset: () => void;
+};
+export type { Property, TimedEvent, Metric };

package/dist/cjs/sendCommercialMetrics.js

@@ -1,44 +1,150 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sendCommercialMetrics = void 0;
+exports._ = exports.initCommercialMetrics = exports.bypassCommercialMetricsSampling = void 0;
 const libs_1 = require("@guardian/libs");
 const EventTimer_1 = require("./EventTimer");
-function sendCommercialMetrics(pageViewId, browserId, isDev, adBlockerInUse) {
-    const devProperties = isDev
-        ? [{ name: 'isDev', value: window.location.hostname }]
-        : [];
-    const adBlockerProperties = adBlockerInUse !== undefined
-        ? [
-            {
-                name: 'adBlockerInUse',
-                value: adBlockerInUse.toString(),
-            },
-        ]
-        : [];
-    const endpoint = isDev
-        ? '//performance-events.code.dev-guardianapis.com/commercial-metrics'
-        : '//performance-events.guardianapis.com/commercial-metrics';
-    if (document.visibilityState !== 'hidden')
-        return false;
-    const eventTimer = EventTimer_1.EventTimer.get();
-    const events = eventTimer.events;
-    const properties = Object.entries(eventTimer.properties)
-        .filter(([, value]) => typeof value !== 'undefined')
-        .map(([name, value]) => ({ name, value: String(value) }))
-        .concat(devProperties)
-        .concat(adBlockerProperties);
-    const metrics = events.map(({ name, ts }) => ({
+var Endpoints;
+(function (Endpoints) {
+    Endpoints["CODE"] = "//performance-events.code.dev-guardianapis.com/commercial-metrics";
+    Endpoints["PROD"] = "//performance-events.guardianapis.com/commercial-metrics";
+})(Endpoints || (Endpoints = {}));
+let commercialMetricsPayload = {
+    page_view_id: undefined,
+    browser_id: undefined,
+    platform: 'NEXT_GEN',
+    metrics: [],
+    properties: [],
+};
+let devProperties = [];
+let adBlockerProperties = [];
+let initialised = false;
+let endpoint;
+const setEndpoint = (isDev) => (endpoint = isDev ? Endpoints.CODE : Endpoints.PROD);
+const setDevProperties = (isDev) => (devProperties = isDev
+    ? [{ name: 'isDev', value: window.location.hostname }]
+    : []);
+const setAdBlockerProperties = (adBlockerInUse) => {
+    adBlockerProperties =
+        adBlockerInUse !== undefined
+            ? [
+                {
+                    name: 'adBlockerInUse',
+                    value: adBlockerInUse.toString(),
+                },
+            ]
+            : [];
+};
+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),
+        value: String(value),
+    }));
+};
+const roundTimeStamp = (events) => {
+    return events.map(({ name, ts }) => ({
         name,
         value: Math.ceil(ts),
     }));
-    const commercialMetrics = {
-        browser_id: browserId,
-        page_view_id: pageViewId,
-        platform: 'NEXT_GEN',
-        metrics,
-        properties,
-    };
-    (0, libs_1.log)('commercial', 'About to send commercial metrics', commercialMetrics);
-    return navigator.sendBeacon(endpoint, JSON.stringify(commercialMetrics));
+};
+function sendMetrics() {
+    (0, libs_1.log)('commercial', 'About to send commercial metrics', commercialMetricsPayload);
+    return navigator.sendBeacon(endpoint, JSON.stringify(commercialMetricsPayload));
+}
+function gatherMetricsOnPageUnload() {
+    // Assemble commercial properties and metrics
+    const eventTimer = EventTimer_1.EventTimer.get();
+    const transformedEntries = transformToObjectEntries(eventTimer.properties);
+    const filteredEventTimerProperties = filterUndefinedProperties(transformedEntries);
+    const mappedEventTimerProperties = mapEventTimerPropertiesToString(filteredEventTimerProperties);
+    const properties = mappedEventTimerProperties
+        .concat(devProperties)
+        .concat(adBlockerProperties);
+    commercialMetricsPayload.properties = properties;
+    const metrics = roundTimeStamp(eventTimer.events);
+    commercialMetricsPayload.metrics = metrics;
+    sendMetrics();
+}
+const listener = (e) => {
+    switch (e.type) {
+        case 'visibilitychange':
+            if (document.visibilityState === 'hidden') {
+                gatherMetricsOnPageUnload();
+            }
+            return;
+        case 'pagehide':
+            gatherMetricsOnPageUnload();
+            return;
+    }
+};
+const addVisibilityListeners = () => {
+    // Report all available metrics when the page is unloaded or in background.
+    window.addEventListener('visibilitychange', listener);
+    // Safari does not reliably fire the `visibilitychange` on page unload.
+    window.addEventListener('pagehide', listener);
+};
+/**
+ * A method to asynchronously send metrics after initialization.
+ */
+function bypassCommercialMetricsSampling() {
+    if (!initialised) {
+        console.warn('initCommercialMetrics not yet initialised');
+        return;
+    }
+    addVisibilityListeners();
+}
+exports.bypassCommercialMetricsSampling = bypassCommercialMetricsSampling;
+/**
+ * A method to initialise metrics.
+ * @param init.pageViewId - identifies the page view. Usually available on `guardian.config.ophan.pageViewId`. Defaults to `null`
+ * @param init.browserId - identifies the browser. Usually available via `getCookie({ name: 'bwid' })`. Defaults to `null`
+ * @param init.isDev - used to determine whether to use CODE or PROD endpoints.
+ * @param init.adBlockerInUse - indicates whether or not ann adblocker is being used.
+ */
+function initCommercialMetrics(pageViewId, browserId, isDev, adBlockerInUse, sampling = 1 / 100) {
+    commercialMetricsPayload.page_view_id = pageViewId;
+    commercialMetricsPayload.browser_id = browserId;
+    setEndpoint(isDev);
+    setDevProperties(isDev);
+    setAdBlockerProperties(adBlockerInUse);
+    if (initialised) {
+        return false;
+    }
+    initialised = true;
+    const userIsInSamplingGroup = Math.random() <= sampling;
+    if (isDev || userIsInSamplingGroup) {
+        addVisibilityListeners();
+        return true;
+    }
+    return false;
 }
-exports.sendCommercialMetrics = sendCommercialMetrics;
+exports.initCommercialMetrics = initCommercialMetrics;
+exports._ = {
+    Endpoints,
+    setEndpoint,
+    filterUndefinedProperties,
+    mapEventTimerPropertiesToString,
+    roundTimeStamp,
+    transformToObjectEntries,
+    reset: () => {
+        initialised = false;
+        commercialMetricsPayload = {
+            page_view_id: undefined,
+            browser_id: undefined,
+            platform: 'NEXT_GEN',
+            metrics: [],
+            properties: [],
+        };
+        removeEventListener('visibilitychange', listener);
+        removeEventListener('pagehide', listener);
+    },
+};

package/dist/cjs/targeting/viewport.d.ts

@@ -39,4 +39,9 @@ export declare type ViewportTargeting = {
      */
     skinsize: 'l' | 's';
 };
-export declare const getViewportTargeting: (viewPortWidth: number, cmpBannerWillShow: boolean) => ViewportTargeting;
+declare type Viewport = {
+    viewPortWidth: number;
+    cmpBannerWillShow: boolean;
+};
+export declare const getViewportTargeting: ({ viewPortWidth, cmpBannerWillShow, }: Viewport) => ViewportTargeting;
+export {};

package/dist/cjs/targeting/viewport.js

@@ -5,12 +5,11 @@ exports.getViewportTargeting = void 0;
 const findBreakpoint = (width) => {
     if (width >= 980)
         return 'desktop';
-    if (width >= 740)
+    if (width >= 660)
         return 'tablet';
     return 'mobile';
 };
-/* -- Targeting -- */
-const getViewportTargeting = (viewPortWidth, cmpBannerWillShow) => {
+const getViewportTargeting = ({ viewPortWidth, cmpBannerWillShow, }) => {
     // Don’t show inskin if if a privacy message will be shown
     const inskin = cmpBannerWillShow ? 'f' : 't';
     return {

package/dist/cjs/third-party-tags/facebook-pixel.d.ts

@@ -1,2 +1,7 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * tracking pixel
+ * https://en-gb.facebook.com/business/learn/facebook-ads-pixel
+ * @param  {} {shouldRun}
+ */
 export declare const fbPixel: GetThirdPartyTag;

package/dist/cjs/third-party-tags/facebook-pixel.js

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fbPixel = void 0;
+/**
+ * tracking pixel
+ * https://en-gb.facebook.com/business/learn/facebook-ads-pixel
+ * @param  {} {shouldRun}
+ */
 const fbPixel = ({ shouldRun }) => ({
     shouldRun,
     url: `https://www.facebook.com/tr?id=279880532344561&ev=PageView&noscript=1`,

package/dist/cjs/third-party-tags/ias.d.ts

@@ -1,2 +1,7 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * IAS script filters bad ads
+ * https://integralads.com/uk/
+ * @param  {} {shouldRun}
+ */
 export declare const ias: GetThirdPartyTag;

package/dist/cjs/third-party-tags/ias.js

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ias = void 0;
+/**
+ * IAS script filters bad ads
+ * https://integralads.com/uk/
+ * @param  {} {shouldRun}
+ */
 const ias = ({ shouldRun }) => ({
     shouldRun,
     url: '//cdn.adsafeprotected.com/iasPET.1.js',

package/dist/cjs/third-party-tags/inizio.d.ts

@@ -1,4 +1,9 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * Allows creatives to show survey
+ * https://trello.com/c/wHffHVF1/171-integrate-and-test-inizio
+ * @param  {} {shouldRun}
+ */
 export declare const inizio: GetThirdPartyTag;
 export declare const _: {
     onLoad: () => void;

package/dist/cjs/third-party-tags/inizio.js

@@ -21,6 +21,11 @@ const onLoad = () => {
         },
     });
 };
+/**
+ * Allows creatives to show survey
+ * https://trello.com/c/wHffHVF1/171-integrate-and-test-inizio
+ * @param  {} {shouldRun}
+ */
 const inizio = ({ shouldRun }) => ({
     shouldRun,
     url: '//cdn.brandmetrics.com/survey/script/e96d04c832084488a841a06b49b8fb2d.js',

package/dist/cjs/third-party-tags/permutive.d.ts

@@ -1,2 +1,6 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * Permutive script updates local user segmentation data
+ * @param  {} {shouldRun}
+ */
 export declare const permutive: GetThirdPartyTag;

package/dist/cjs/third-party-tags/permutive.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.permutive = void 0;
+/**
+ * Permutive script updates local user segmentation data
+ * @param  {} {shouldRun}
+ */
 const permutive = ({ shouldRun }) => ({
     shouldRun,
     url: '//cdn.permutive.com/d6691a17-6fdb-4d26-85d6-b3dd27f55f08-web.js',

package/dist/cjs/third-party-tags/remarketing.d.ts

@@ -1,2 +1,7 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * Google conversion tracking
+ * https://support.google.com/google-ads/answer/6095821
+ * @param  {} {shouldRun}
+ */
 export declare const remarketing: GetThirdPartyTag;

package/dist/cjs/third-party-tags/remarketing.js

@@ -8,6 +8,11 @@ const onLoad = () => {
         google_remarketing_only: true,
     });
 };
+/**
+ * Google conversion tracking
+ * https://support.google.com/google-ads/answer/6095821
+ * @param  {} {shouldRun}
+ */
 const remarketing = ({ shouldRun }) => ({
     shouldRun,
     url: '//www.googleadservices.com/pagead/conversion_async.js',

package/dist/cjs/third-party-tags/twitter-uwt.d.ts

@@ -1,2 +1,7 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * tracking pixel
+ * https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html
+ * @param  {} {shouldRun}
+ */
 export declare const twitter: GetThirdPartyTag;

package/dist/cjs/third-party-tags/twitter-uwt.js

@@ -2,6 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.twitter = void 0;
 const twitter_script_1 = require("../__vendor/twitter-script");
+/**
+ * tracking pixel
+ * https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html
+ * @param  {} {shouldRun}
+ */
 const twitter = ({ shouldRun }) => ({
     shouldRun,
     name: 'twitter',

package/dist/esm/EventTimer.d.ts

@@ -19,7 +19,9 @@ interface SlotEventStatus {
 }
 interface PageEventStatus {
     commercialStart: boolean;
-    commercialEnd: boolean;
+    commercialExtraModulesLoaded: boolean;
+    commercialBaseModulesLoaded: boolean;
+    commercialModulesLoaded: boolean;
 }
 export declare class EventTimer {
     private _events;

package/dist/esm/EventTimer.js

@@ -26,7 +26,9 @@ export class EventTimer {
             },
             page: {
                 commercialStart: false,
-                commercialEnd: false,
+                commercialExtraModulesLoaded: false,
+                commercialBaseModulesLoaded: false,
+                commercialModulesLoaded: false,
             },
         };
         this.gaConfig = {
@@ -42,7 +44,7 @@ export class EventTimer {
                     timingLabel: 'Commercial start parse time',
                 },
                 {
-                    timingVariable: 'commercialEnd',
+                    timingVariable: 'commercialModulesLoaded',
                     timingLabel: 'Commercial end parse time',
                 },
             ],

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

@@ -4,7 +4,7 @@ export declare type AdSize = Readonly<{
     height: number;
     toString: () => AdSizeString;
 }>;
-export declare type SizeKeys = 'billboard' | 'leaderboard' | 'mpu' | 'halfPage' | 'portrait' | 'skyscraper' | 'mobilesticky' | 'fluid' | 'outOfPage' | 'googleCard' | 'video' | 'outstreamDesktop' | 'outstreamGoogleDesktop' | 'outstreamMobile' | 'merchandisingHighAdFeature' | 'merchandisingHigh' | 'merchandising' | 'inlineMerchandising' | 'fabric' | 'empty' | '970x250' | '728x90' | '300x250' | '300x600' | '300x1050' | '160x600';
+export 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' | 'video';
 export declare const adSizes: Record<SizeKeys, AdSize>;
 export declare const getAdSize: (size: SizeKeys) => AdSize;
 export declare const _: {

package/dist/esm/ad-sizes.js

@@ -9,27 +9,27 @@ const createAdSize = (width, height) => {
 const adSizesPartial = {
     // standard ad sizes
     billboard: createAdSize(970, 250),
+    halfPage: createAdSize(300, 600),
     leaderboard: createAdSize(728, 90),
+    mobilesticky: createAdSize(320, 50),
     mpu: createAdSize(300, 250),
-    halfPage: createAdSize(300, 600),
     portrait: createAdSize(300, 1050),
     skyscraper: createAdSize(160, 600),
-    mobilesticky: createAdSize(320, 50),
     // dfp proprietary ad sizes
     fluid: createAdSize(0, 0),
-    outOfPage: createAdSize(1, 1),
     googleCard: createAdSize(300, 274),
+    outOfPage: createAdSize(1, 1),
     // guardian proprietary ad sizes
-    video: createAdSize(620, 1),
+    empty: createAdSize(2, 2),
+    fabric: createAdSize(88, 71),
+    inlineMerchandising: createAdSize(88, 85),
+    merchandising: createAdSize(88, 88),
+    merchandisingHigh: createAdSize(88, 87),
+    merchandisingHighAdFeature: createAdSize(88, 89),
     outstreamDesktop: createAdSize(620, 350),
     outstreamGoogleDesktop: createAdSize(550, 310),
     outstreamMobile: createAdSize(300, 197),
-    merchandisingHighAdFeature: createAdSize(88, 89),
-    merchandisingHigh: createAdSize(88, 87),
-    merchandising: createAdSize(88, 88),
-    inlineMerchandising: createAdSize(88, 85),
-    fabric: createAdSize(88, 71),
-    empty: createAdSize(2, 2),
+    video: createAdSize(620, 1),
 };
 export const adSizes = {
     ...adSizesPartial,

package/dist/esm/index.d.ts

@@ -5,7 +5,7 @@ export { twitter } from './third-party-tags/twitter-uwt';
 export { inizio } from './third-party-tags/inizio';
 export { remarketing } from './third-party-tags/remarketing';
 export { EventTimer } from './EventTimer';
-export { sendCommercialMetrics } from './sendCommercialMetrics';
+export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './sendCommercialMetrics';
 export type { ThirdPartyTag } from './types';
 export { adSizes, getAdSize } from './ad-sizes';
 export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
@@ -14,3 +14,14 @@ export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments,
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';
+export type { ContentTargeting } from './targeting/content';
+export { getContentTargeting } from './targeting/content';
+export type { PersonalisedTargeting } from './targeting/personalised';
+export { getPersonalisedTargeting } from './targeting/personalised';
+export type { SessionTargeting } from './targeting/session';
+export { getSessionTargeting } from './targeting/session';
+export type { SharedTargeting } from './targeting/shared';
+export { getSharedTargeting } from './targeting/shared';
+export type { ViewportTargeting } from './targeting/viewport';
+export { getViewportTargeting } from './targeting/viewport';
+export { pickTargetingValues } from './targeting/pick-targeting-values';

package/dist/esm/index.js

@@ -6,10 +6,16 @@ export { twitter } from './third-party-tags/twitter-uwt';
 export { inizio } from './third-party-tags/inizio';
 export { remarketing } from './third-party-tags/remarketing';
 export { EventTimer } from './EventTimer';
-export { sendCommercialMetrics } from './sendCommercialMetrics';
+export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './sendCommercialMetrics';
 export { adSizes, getAdSize } from './ad-sizes';
 export { isAdBlockInUse } from './detectAdBlocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 import * as constants_1 from './constants';
 export { constants_1 as constants };
+export { getContentTargeting } from './targeting/content';
+export { getPersonalisedTargeting } from './targeting/personalised';
+export { getSessionTargeting } from './targeting/session';
+export { getSharedTargeting } from './targeting/shared';
+export { getViewportTargeting } from './targeting/viewport';
+export { pickTargetingValues } from './targeting/pick-targeting-values';

package/dist/esm/sendCommercialMetrics.d.ts

@@ -1 +1,43 @@
-export declare function sendCommercialMetrics(pageViewId: string, browserId: string | undefined, isDev: boolean, adBlockerInUse?: boolean): boolean;
+declare type Metric = {
+    name: string;
+    value: number;
+};
+declare type Property = {
+    name: string;
+    value: string;
+};
+declare type TimedEvent = {
+    name: string;
+    ts: number;
+};
+declare type EventProperties = {
+    type?: ConnectionType;
+    downlink?: number;
+    effectiveType?: string;
+};
+declare enum Endpoints {
+    CODE = "//performance-events.code.dev-guardianapis.com/commercial-metrics",
+    PROD = "//performance-events.guardianapis.com/commercial-metrics"
+}
+/**
+ * A method to asynchronously send metrics after initialization.
+ */
+export declare function bypassCommercialMetricsSampling(): void;
+/**
+ * A method to initialise metrics.
+ * @param init.pageViewId - identifies the page view. Usually available on `guardian.config.ophan.pageViewId`. Defaults to `null`
+ * @param init.browserId - identifies the browser. Usually available via `getCookie({ name: 'bwid' })`. Defaults to `null`
+ * @param init.isDev - used to determine whether to use CODE or PROD endpoints.
+ * @param init.adBlockerInUse - indicates whether or not ann adblocker is being used.
+ */
+export declare function initCommercialMetrics(pageViewId: string, browserId: string | undefined, isDev: boolean, adBlockerInUse?: boolean, sampling?: number): 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]>;
+    reset: () => void;
+};
+export type { Property, TimedEvent, Metric };

package/dist/esm/sendCommercialMetrics.js

@@ -1,40 +1,145 @@
 import { log } from '@guardian/libs';
 import { EventTimer } from './EventTimer';
-export function sendCommercialMetrics(pageViewId, browserId, isDev, adBlockerInUse) {
-    const devProperties = isDev
-        ? [{ name: 'isDev', value: window.location.hostname }]
-        : [];
-    const adBlockerProperties = adBlockerInUse !== undefined
-        ? [
-            {
-                name: 'adBlockerInUse',
-                value: adBlockerInUse.toString(),
-            },
-        ]
-        : [];
-    const endpoint = isDev
-        ? '//performance-events.code.dev-guardianapis.com/commercial-metrics'
-        : '//performance-events.guardianapis.com/commercial-metrics';
-    if (document.visibilityState !== 'hidden')
-        return false;
-    const eventTimer = EventTimer.get();
-    const events = eventTimer.events;
-    const properties = Object.entries(eventTimer.properties)
-        .filter(([, value]) => typeof value !== 'undefined')
-        .map(([name, value]) => ({ name, value: String(value) }))
-        .concat(devProperties)
-        .concat(adBlockerProperties);
-    const metrics = events.map(({ name, ts }) => ({
+var Endpoints;
+(function (Endpoints) {
+    Endpoints["CODE"] = "//performance-events.code.dev-guardianapis.com/commercial-metrics";
+    Endpoints["PROD"] = "//performance-events.guardianapis.com/commercial-metrics";
+})(Endpoints || (Endpoints = {}));
+let commercialMetricsPayload = {
+    page_view_id: undefined,
+    browser_id: undefined,
+    platform: 'NEXT_GEN',
+    metrics: [],
+    properties: [],
+};
+let devProperties = [];
+let adBlockerProperties = [];
+let initialised = false;
+let endpoint;
+const setEndpoint = (isDev) => (endpoint = isDev ? Endpoints.CODE : Endpoints.PROD);
+const setDevProperties = (isDev) => (devProperties = isDev
+    ? [{ name: 'isDev', value: window.location.hostname }]
+    : []);
+const setAdBlockerProperties = (adBlockerInUse) => {
+    adBlockerProperties =
+        adBlockerInUse !== undefined
+            ? [
+                {
+                    name: 'adBlockerInUse',
+                    value: adBlockerInUse.toString(),
+                },
+            ]
+            : [];
+};
+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),
+        value: String(value),
+    }));
+};
+const roundTimeStamp = (events) => {
+    return events.map(({ name, ts }) => ({
         name,
         value: Math.ceil(ts),
     }));
-    const commercialMetrics = {
-        browser_id: browserId,
-        page_view_id: pageViewId,
-        platform: 'NEXT_GEN',
-        metrics,
-        properties,
-    };
-    log('commercial', 'About to send commercial metrics', commercialMetrics);
-    return navigator.sendBeacon(endpoint, JSON.stringify(commercialMetrics));
+};
+function sendMetrics() {
+    log('commercial', 'About to send commercial metrics', commercialMetricsPayload);
+    return navigator.sendBeacon(endpoint, JSON.stringify(commercialMetricsPayload));
+}
+function gatherMetricsOnPageUnload() {
+    // Assemble commercial properties and metrics
+    const eventTimer = EventTimer.get();
+    const transformedEntries = transformToObjectEntries(eventTimer.properties);
+    const filteredEventTimerProperties = filterUndefinedProperties(transformedEntries);
+    const mappedEventTimerProperties = mapEventTimerPropertiesToString(filteredEventTimerProperties);
+    const properties = mappedEventTimerProperties
+        .concat(devProperties)
+        .concat(adBlockerProperties);
+    commercialMetricsPayload.properties = properties;
+    const metrics = roundTimeStamp(eventTimer.events);
+    commercialMetricsPayload.metrics = metrics;
+    sendMetrics();
+}
+const listener = (e) => {
+    switch (e.type) {
+        case 'visibilitychange':
+            if (document.visibilityState === 'hidden') {
+                gatherMetricsOnPageUnload();
+            }
+            return;
+        case 'pagehide':
+            gatherMetricsOnPageUnload();
+            return;
+    }
+};
+const addVisibilityListeners = () => {
+    // Report all available metrics when the page is unloaded or in background.
+    window.addEventListener('visibilitychange', listener);
+    // Safari does not reliably fire the `visibilitychange` on page unload.
+    window.addEventListener('pagehide', listener);
+};
+/**
+ * A method to asynchronously send metrics after initialization.
+ */
+export function bypassCommercialMetricsSampling() {
+    if (!initialised) {
+        console.warn('initCommercialMetrics not yet initialised');
+        return;
+    }
+    addVisibilityListeners();
+}
+/**
+ * A method to initialise metrics.
+ * @param init.pageViewId - identifies the page view. Usually available on `guardian.config.ophan.pageViewId`. Defaults to `null`
+ * @param init.browserId - identifies the browser. Usually available via `getCookie({ name: 'bwid' })`. Defaults to `null`
+ * @param init.isDev - used to determine whether to use CODE or PROD endpoints.
+ * @param init.adBlockerInUse - indicates whether or not ann adblocker is being used.
+ */
+export function initCommercialMetrics(pageViewId, browserId, isDev, adBlockerInUse, sampling = 1 / 100) {
+    commercialMetricsPayload.page_view_id = pageViewId;
+    commercialMetricsPayload.browser_id = browserId;
+    setEndpoint(isDev);
+    setDevProperties(isDev);
+    setAdBlockerProperties(adBlockerInUse);
+    if (initialised) {
+        return false;
+    }
+    initialised = true;
+    const userIsInSamplingGroup = Math.random() <= sampling;
+    if (isDev || userIsInSamplingGroup) {
+        addVisibilityListeners();
+        return true;
+    }
+    return false;
 }
+export const _ = {
+    Endpoints,
+    setEndpoint,
+    filterUndefinedProperties,
+    mapEventTimerPropertiesToString,
+    roundTimeStamp,
+    transformToObjectEntries,
+    reset: () => {
+        initialised = false;
+        commercialMetricsPayload = {
+            page_view_id: undefined,
+            browser_id: undefined,
+            platform: 'NEXT_GEN',
+            metrics: [],
+            properties: [],
+        };
+        removeEventListener('visibilitychange', listener);
+        removeEventListener('pagehide', listener);
+    },
+};

package/dist/esm/targeting/viewport.d.ts

@@ -39,4 +39,9 @@ export declare type ViewportTargeting = {
      */
     skinsize: 'l' | 's';
 };
-export declare const getViewportTargeting: (viewPortWidth: number, cmpBannerWillShow: boolean) => ViewportTargeting;
+declare type Viewport = {
+    viewPortWidth: number;
+    cmpBannerWillShow: boolean;
+};
+export declare const getViewportTargeting: ({ viewPortWidth, cmpBannerWillShow, }: Viewport) => ViewportTargeting;
+export {};

package/dist/esm/targeting/viewport.js

@@ -2,12 +2,11 @@
 const findBreakpoint = (width) => {
     if (width >= 980)
         return 'desktop';
-    if (width >= 740)
+    if (width >= 660)
         return 'tablet';
     return 'mobile';
 };
-/* -- Targeting -- */
-export const getViewportTargeting = (viewPortWidth, cmpBannerWillShow) => {
+export const getViewportTargeting = ({ viewPortWidth, cmpBannerWillShow, }) => {
     // Don’t show inskin if if a privacy message will be shown
     const inskin = cmpBannerWillShow ? 'f' : 't';
     return {

package/dist/esm/third-party-tags/facebook-pixel.d.ts

@@ -1,2 +1,7 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * tracking pixel
+ * https://en-gb.facebook.com/business/learn/facebook-ads-pixel
+ * @param  {} {shouldRun}
+ */
 export declare const fbPixel: GetThirdPartyTag;

package/dist/esm/third-party-tags/facebook-pixel.js

@@ -1,3 +1,8 @@
+/**
+ * tracking pixel
+ * https://en-gb.facebook.com/business/learn/facebook-ads-pixel
+ * @param  {} {shouldRun}
+ */
 export const fbPixel = ({ shouldRun }) => ({
     shouldRun,
     url: `https://www.facebook.com/tr?id=279880532344561&ev=PageView&noscript=1`,

package/dist/esm/third-party-tags/ias.d.ts

@@ -1,2 +1,7 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * IAS script filters bad ads
+ * https://integralads.com/uk/
+ * @param  {} {shouldRun}
+ */
 export declare const ias: GetThirdPartyTag;

package/dist/esm/third-party-tags/ias.js

@@ -1,3 +1,8 @@
+/**
+ * IAS script filters bad ads
+ * https://integralads.com/uk/
+ * @param  {} {shouldRun}
+ */
 export const ias = ({ shouldRun }) => ({
     shouldRun,
     url: '//cdn.adsafeprotected.com/iasPET.1.js',

package/dist/esm/third-party-tags/inizio.d.ts

@@ -1,4 +1,9 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * Allows creatives to show survey
+ * https://trello.com/c/wHffHVF1/171-integrate-and-test-inizio
+ * @param  {} {shouldRun}
+ */
 export declare const inizio: GetThirdPartyTag;
 export declare const _: {
     onLoad: () => void;

package/dist/esm/third-party-tags/inizio.js

@@ -18,6 +18,11 @@ const onLoad = () => {
         },
     });
 };
+/**
+ * Allows creatives to show survey
+ * https://trello.com/c/wHffHVF1/171-integrate-and-test-inizio
+ * @param  {} {shouldRun}
+ */
 export const inizio = ({ shouldRun }) => ({
     shouldRun,
     url: '//cdn.brandmetrics.com/survey/script/e96d04c832084488a841a06b49b8fb2d.js',

package/dist/esm/third-party-tags/permutive.d.ts

@@ -1,2 +1,6 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * Permutive script updates local user segmentation data
+ * @param  {} {shouldRun}
+ */
 export declare const permutive: GetThirdPartyTag;

package/dist/esm/third-party-tags/permutive.js

@@ -1,3 +1,7 @@
+/**
+ * Permutive script updates local user segmentation data
+ * @param  {} {shouldRun}
+ */
 export const permutive = ({ shouldRun }) => ({
     shouldRun,
     url: '//cdn.permutive.com/d6691a17-6fdb-4d26-85d6-b3dd27f55f08-web.js',

package/dist/esm/third-party-tags/remarketing.d.ts

@@ -1,2 +1,7 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * Google conversion tracking
+ * https://support.google.com/google-ads/answer/6095821
+ * @param  {} {shouldRun}
+ */
 export declare const remarketing: GetThirdPartyTag;

package/dist/esm/third-party-tags/remarketing.js

@@ -5,6 +5,11 @@ const onLoad = () => {
         google_remarketing_only: true,
     });
 };
+/**
+ * Google conversion tracking
+ * https://support.google.com/google-ads/answer/6095821
+ * @param  {} {shouldRun}
+ */
 export const remarketing = ({ shouldRun }) => ({
     shouldRun,
     url: '//www.googleadservices.com/pagead/conversion_async.js',

package/dist/esm/third-party-tags/twitter-uwt.d.ts

@@ -1,2 +1,7 @@
 import type { GetThirdPartyTag } from '../types';
+/**
+ * tracking pixel
+ * https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html
+ * @param  {} {shouldRun}
+ */
 export declare const twitter: GetThirdPartyTag;

package/dist/esm/third-party-tags/twitter-uwt.js

@@ -1,4 +1,9 @@
 import { twitterScript as insertSnippet } from '../__vendor/twitter-script';
+/**
+ * tracking pixel
+ * https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html
+ * @param  {} {shouldRun}
+ */
 export const twitter = ({ shouldRun }) => ({
     shouldRun,
     name: 'twitter',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/commercial-core",
-  "version": "0.39.0",
+  "version": "1.0.0",
   "description": "Guardian advertising business logic",
   "homepage": "https://github.com/guardian/commercial-core#readme",
   "bugs": {
@@ -26,6 +26,7 @@
     "precommit:lint": "lint-staged",
     "prepush:test": "jest --verbose --runInBand --onlyChanged",
     "test": "jest",
+    "test:watch": "jest --watch",
     "test:ci": "jest --coverage --ci",
     "tsc": "tsc --noEmit",
     "validate": "npm-run-all tsc lint test build",
@@ -41,12 +42,12 @@
   },
   "prettier": "@guardian/prettier",
   "devDependencies": {
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^15.0.0",
+    "@commitlint/cli": "^16.1.0",
+    "@commitlint/config-conventional": "^16.0.0",
     "@guardian/ab-core": "^2.0.0",
     "@guardian/consent-management-platform": "^10.1.0",
-    "@guardian/eslint-config-typescript": "^0.7.0",
-    "@guardian/libs": "3.5.1",
+    "@guardian/eslint-config-typescript": "^1.0.0",
+    "@guardian/libs": "3.6.1",
     "@guardian/prettier": "^0.7.0",
     "@octokit/core": "^3.5.1",
     "@semantic-release/github": "^8.0.2",