@guardian/commercial-core 7.1.0 → 27.1.0

package/dist/esm/messenger.js

@@ -1,274 +0,0 @@
-import { postMessage } from './messenger/post-message';
-const LISTENERS = {};
-let REGISTERED_LISTENERS = 0;
-let reportError = () => {
-    // not set yet
-};
-const error405 = {
-    code: 405,
-    message: 'Service %% not implemented',
-};
-const error500 = {
-    code: 500,
-    message: 'Internal server error\n\n%%',
-};
-/**
- * Determine if an unknown payload has the shape of a programmatic message
- *
- * @param payload The unknown message payload
- */
-const isProgrammaticMessage = (payload) => {
-    const payloadToCheck = payload;
-    return (payloadToCheck.type === 'set-ad-height' &&
-        ('id' in payloadToCheck.value || 'slotId' in payloadToCheck.value) &&
-        'height' in payloadToCheck.value);
-};
-/**
- * Convert a legacy programmatic message to a standard message
- *
- * Note that this only applies to specific resize programmatic messages
- * (these include specific width and height values)
- */
-const toStandardMessage = (payload) => ({
-    id: 'aaaa0000-bb11-cc22-dd33-eeeeee444444',
-    type: 'resize',
-    iframeId: payload.value.id,
-    slotId: payload.value.slotId,
-    value: {
-        height: payload.value.height,
-        width: payload.value.width,
-    },
-});
-/**
- * Retrieve a reference to the calling iFrame
- *
- * Attempts the following strategies to find the correct iframe:
- * - using the slotId from the incoming message
- * - using the iframeId from the incoming message
- * - checking message event.source (i.e. window) against all page level iframe contentWindows
- *
- * Listeners can then use the iFrame to determine the slot making the postMessage call
- */
-const getIframe = (message, messageEventSource) => {
-    if (message.slotId) {
-        const container = document.getElementById(`dfp-ad--${message.slotId}`);
-        return container?.querySelector('iframe') ?? undefined;
-    }
-    else if (message.iframeId) {
-        const el = document.getElementById(message.iframeId);
-        return el instanceof HTMLIFrameElement ? el : undefined;
-    }
-    else if (messageEventSource) {
-        const iframes = document.querySelectorAll('iframe');
-        return Array.from(iframes).find((iframe) => iframe.contentWindow === messageEventSource);
-    }
-};
-// Regex for testing validity of message ids
-const validMessageRegex = /^[a-f0-9]{8}-([a-f0-9]{4}-){3}[a-f0-9]{12}$/;
-/**
- * Narrow an `unknown` payload to the standard message format
- *
- * Until DFP provides a way for us to identify with 100% certainty our
- * in-house creatives, we are left with doing some basic tests
- * such as validating the anatomy of the payload and whitelisting
- * event type
- */
-const isValidPayload = (payload) => {
-    const payloadToCheck = payload;
-    return ('type' in payloadToCheck &&
-        'value' in payloadToCheck &&
-        'id' in payloadToCheck &&
-        payloadToCheck.type in LISTENERS &&
-        validMessageRegex.test(payloadToCheck.id));
-};
-/**
- * Cheap string formatting function
- *
- * @param error An object `{ code, message }`. `message` is a string where successive
- * occurrences of %% will be replaced by the following arguments
- * @param args Arguments that will replace %%
- *
- * @example
- * formatError({ message: "%%, you are so %%" }, "Regis", "lovely")
- * => { message: "Regis, you are so lovely" }
- */
-const formatError = (error, ...args) => args.reduce((e, arg) => {
-    e.message = e.message.replace('%%', arg);
-    return e;
-}, error);
-/**
- * Convert a posted message to our StandardMessage format
- *
- * @param event The message event received on the window
- * @returns A message with the `StandardMessage` format, or null if the conversion was unsuccessful
- */
-const eventToStandardMessage = (event) => {
-    try {
-        // Currently all non-string messages are discarded here since parsing throws an error
-        // TODO Review whether this is the desired outcome
-        const data = JSON.parse(event.data);
-        const message = isProgrammaticMessage(data)
-            ? toStandardMessage(data)
-            : data;
-        if (isValidPayload(message)) {
-            return message;
-        }
-    }
-    catch (ex) {
-        // Do nothing
-    }
-};
-/**
- * Respond to the original iframe with the result of calling the
- * persistent listener / listener chain
- */
-const respond = (id, target, error, result) => {
-    postMessage({
-        id,
-        error,
-        result,
-    }, target ?? window);
-};
-/**
- * Callback that is fired when an arbitrary message is received on the window
- *
- * @param event The message event received on the window
- */
-const onMessage = async (event) => {
-    const message = eventToStandardMessage(event);
-    if (!message) {
-        return;
-    }
-    const listener = LISTENERS[message.type];
-    if (Array.isArray(listener) && listener.length) {
-        // Because any listener can have side-effects (by unregistering itself),
-        // we run the promise chain on a copy of the `LISTENERS` array.
-        // Hat tip @piuccio
-        const promise = 
-        // We offer, but don't impose, the possibility that a listener returns
-        // a value that must be sent back to the calling frame. To do this,
-        // we pass the cumulated returned value as a second argument to each
-        // listener. Notice we don't try some clever way to compose the result
-        // value ourselves, this would only make the solution more complex.
-        // That means a listener can ignore the cumulated return value and
-        // return something else entirely—life is unfair.
-        // We don't know what each callack will be made of, we don't want to.
-        // And so we wrap each call in a promise chain, in case one drops the
-        // occasional fastdom bomb in the middle.
-        listener.reduce((func, listener) => func.then((ret) => {
-            const thisRet = listener(message.value, ret, getIframe(message, event.source));
-            return thisRet === undefined ? ret : thisRet;
-        }), Promise.resolve());
-        return promise
-            .then((response) => {
-            respond(message.id, event.source, null, response);
-        })
-            .catch((ex) => {
-            reportError(ex, {
-                feature: 'native-ads',
-            });
-            respond(message.id, event.source, formatError(error500, ex.toString()), null);
-        });
-    }
-    else if (typeof listener === 'function') {
-        // We found a persistent listener, to which we just delegate
-        // responsibility to write something. Anything. Really.
-        // The listener writes something by being given the `respond` function as the spec
-        listener(
-        // TODO change the arguments expected by persistent listeners to avoid this
-        (error, result) => respond(message.id, event.source, error, result), message.value, getIframe(message, event.source));
-    }
-    else {
-        // If there is no routine attached to this event type, we just answer
-        // with an error code
-        respond(message.id, event.source, formatError(error405, message.type), null);
-    }
-};
-const on = (window) => {
-    window.addEventListener('message', (event) => void onMessage(event));
-};
-const off = (window) => {
-    window.removeEventListener('message', (event) => void onMessage(event));
-};
-/**
- * Register a listener for a given type of iframe message
- *
- * @param type The `type` of message to register against
- * @param callback The listener callback to register that will receive messages of the given type
- * @param options Options for the target window
- */
-export const register = (type, callback, options) => {
-    if (REGISTERED_LISTENERS === 0) {
-        on(options?.window ?? window);
-    }
-    const listeners = LISTENERS[type] ?? [];
-    if (Array.isArray(listeners) && !listeners.includes(callback)) {
-        LISTENERS[type] = [...listeners, callback];
-        REGISTERED_LISTENERS += 1;
-    }
-};
-/**
- * Register a persistent listener for a given type of iframe message
- *
- * @param type The `type` of message to register against
- * @param callback The persistent listener callback to register that will receive messages of the given type
- * @param options Options for the target window and whether the callback is persistent
- */
-export const registerPersistentListener = (type, callback, options) => {
-    if (REGISTERED_LISTENERS === 0) {
-        on(options?.window ?? window);
-    }
-    LISTENERS[type] = callback;
-    REGISTERED_LISTENERS += 1;
-};
-/**
- * Unregister a callback for a given type
- *
- * @param type The type of message to unregister against. An iframe will send
- * messages annotated with the type
- * @param callback Optionally include the original callback. If this is included
- * for a persistent callback this function will be unregistered. If it's
- * included for a non-persistent callback only the matching callback is removed,
- * otherwise all callbacks for that type will be unregistered
- * @param options Option for the target window
- */
-export const unregister = (type, callback, options) => {
-    const listeners = LISTENERS[type];
-    if (listeners === undefined) {
-        throw new Error(formatError(error405, type).message);
-    }
-    else if (listeners === callback) {
-        LISTENERS[type] = undefined;
-        REGISTERED_LISTENERS -= 1;
-    }
-    else if (Array.isArray(listeners)) {
-        if (callback === undefined) {
-            LISTENERS[type] = [];
-            REGISTERED_LISTENERS -= listeners.length;
-        }
-        else {
-            LISTENERS[type] = listeners.filter((cb) => {
-                const callbacksEqual = cb === callback;
-                if (callbacksEqual) {
-                    REGISTERED_LISTENERS -= 1;
-                }
-                return !callbacksEqual;
-            });
-        }
-    }
-    if (REGISTERED_LISTENERS === 0) {
-        off(options?.window ?? window);
-    }
-};
-/**
- * Initialize an array of listener callbacks in a batch
- *
- * @param listeners The listener registration functions
- * @param persistentListeners The persistent listener registration functions
- */
-export const init = (listeners, persistentListeners, errorHandler) => {
-    reportError = errorHandler;
-    listeners.forEach((moduleInit) => moduleInit(register, errorHandler));
-    persistentListeners.forEach((moduleInit) => moduleInit(registerPersistentListener, errorHandler));
-};
-export const _ = { onMessage };

package/dist/esm/targeting/build-page-targeting-consentless.d.ts

@@ -1,15 +0,0 @@
-import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
-import type { PageTargeting } from './build-page-targeting';
-declare const consentlessTargetingKeys: readonly ["ab", "at", "bl", "bp", "br", "cc", "ct", "dcre", "edition", "k", "rc", "rp", "s", "se", "sens", "sh", "si", "skinsize", "su", "tn", "url", "urlkw"];
-type ConsentlessTargetingKeys = (typeof consentlessTargetingKeys)[number];
-type ConsentlessPageTargeting = Partial<Pick<PageTargeting, ConsentlessTargetingKeys>>;
-/**
- * Call buildPageTargeting then filter out the keys that are not needed for
- * consentless targeting.
- *
- * @param  {ConsentState} consentState
- * @param  {boolean} adFree
- * @returns ConsentlessPageTargeting
- */
-declare const buildPageTargetingConsentless: (consentState: ConsentState, adFree: boolean) => ConsentlessPageTargeting;
-export { buildPageTargetingConsentless };

package/dist/esm/targeting/build-page-targeting-consentless.js

@@ -1,43 +0,0 @@
-import { buildPageTargeting } from './build-page-targeting';
-const consentlessTargetingKeys = [
-    'ab',
-    'at',
-    'bl',
-    'bp',
-    'br',
-    'cc',
-    'ct',
-    'dcre',
-    'edition',
-    'k',
-    'rc',
-    'rp',
-    's',
-    'se',
-    'sens',
-    'sh',
-    'si',
-    'skinsize',
-    'su',
-    'tn',
-    'url',
-    'urlkw',
-];
-const isConsentlessKey = (key) => consentlessTargetingKeys.includes(key);
-/**
- * Call buildPageTargeting then filter out the keys that are not needed for
- * consentless targeting.
- *
- * @param  {ConsentState} consentState
- * @param  {boolean} adFree
- * @returns ConsentlessPageTargeting
- */
-const buildPageTargetingConsentless = (consentState, adFree) => {
-    const consentedPageTargeting = buildPageTargeting({
-        adFree,
-        consentState,
-        clientSideParticipations: {},
-    });
-    return Object.fromEntries(Object.entries(consentedPageTargeting).filter(([k]) => isConsentlessKey(k)));
-};
-export { buildPageTargetingConsentless };

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

@@ -1,13 +0,0 @@
-import type { Participations } from '@guardian/ab-core';
-import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
-import type { AdsConfig, AdsConfigDisabled, CustomParams } from '../types';
-declare const disabledAds: AdsConfigDisabled;
-type BuildAdsConfigWithConsent = {
-    isAdFreeUser: boolean;
-    adUnit: string;
-    customParams: CustomParams;
-    consentState: ConsentState;
-    clientSideParticipations: Participations;
-};
-declare const buildAdsConfigWithConsent: ({ adUnit, clientSideParticipations, consentState, customParams, isAdFreeUser, }: BuildAdsConfigWithConsent) => AdsConfig;
-export { buildAdsConfigWithConsent, disabledAds };

package/dist/esm/targeting/youtube.js

@@ -1,60 +0,0 @@
-import { constructQuery } from '../lib/construct-query';
-import { buildPageTargeting } from './build-page-targeting';
-const disabledAds = { disableAds: true };
-const buildAdsConfig = (cmpConsent, adUnit, customParams, clientSideParticipations) => {
-    const mergedCustomParams = {
-        ...customParams,
-        ...buildPageTargeting({
-            adFree: false,
-            clientSideParticipations,
-            consentState: cmpConsent,
-            youtube: true,
-        }),
-        // 19/04/2023 This is a temporary update to assist reporting for a YouTube IMA test
-        yt_embed_ima: '0',
-    };
-    const defaultAdsConfig = {
-        adTagParameters: {
-            iu: adUnit,
-            // TODO: Why are we double encoding? Following Frontend process for now
-            cust_params: encodeURIComponent(constructQuery(mergedCustomParams)),
-        },
-    };
-    if (cmpConsent.ccpa) {
-        const canTarget = !cmpConsent.ccpa.doNotSell;
-        return {
-            ...defaultAdsConfig,
-            restrictedDataProcessor: !canTarget,
-        };
-    }
-    if (cmpConsent.aus) {
-        const canTarget = cmpConsent.aus.personalisedAdvertising;
-        return {
-            ...defaultAdsConfig,
-            restrictedDataProcessor: !canTarget,
-        };
-    }
-    if (cmpConsent.tcfv2) {
-        const tcfData = cmpConsent.tcfv2;
-        const canTarget = Object.values(tcfData.consents).every(Boolean);
-        const mergedAdTagParameters = {
-            ...defaultAdsConfig.adTagParameters,
-            cmpGdpr: tcfData.gdprApplies ? 1 : 0,
-            cmpGvcd: tcfData.addtlConsent,
-            cmpVcd: tcfData.tcString,
-        };
-        return {
-            adTagParameters: mergedAdTagParameters,
-            nonPersonalizedAd: !canTarget,
-        };
-    }
-    // Shouldn't happen but handle if no matching framework
-    return disabledAds;
-};
-const buildAdsConfigWithConsent = ({ adUnit, clientSideParticipations, consentState, customParams, isAdFreeUser, }) => {
-    if (isAdFreeUser) {
-        return disabledAds;
-    }
-    return buildAdsConfig(consentState, adUnit, customParams, clientSideParticipations);
-};
-export { buildAdsConfigWithConsent, disabledAds };

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

@@ -1,7 +0,0 @@
-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,10 +0,0 @@
-/**
- * IAS script filters bad ads
- * https://integralads.com/uk/
- * @param  {} {shouldRun}
- */
-export const ias = ({ shouldRun }) => ({
-    shouldRun,
-    url: '//cdn.adsafeprotected.com/iasPET.1.js',
-    name: 'ias',
-});

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

@@ -1,13 +0,0 @@
-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;
-    handleQuerySurveyDone: (surveyAvailable: boolean, survey: {
-        measurementId: string;
-    }) => void;
-};

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

@@ -1,35 +0,0 @@
-const handleQuerySurveyDone = (surveyAvailable, survey) => {
-    if (surveyAvailable) {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- @types/googletag declares it, but it may be missing
-        if (window.googletag) {
-            window.googletag.cmd.push(() => {
-                window.googletag.pubads().setTargeting('inizio', 't');
-            });
-        }
-        console.log(`surveyAvailable: ${survey.measurementId}`);
-    }
-};
-const onLoad = () => {
-    window._brandmetrics || (window._brandmetrics = []);
-    window._brandmetrics.push({
-        cmd: '_querySurvey',
-        val: {
-            callback: handleQuerySurveyDone,
-        },
-    });
-};
-/**
- * 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',
-    name: 'inizio',
-    onLoad,
-});
-export const _ = {
-    onLoad,
-    handleQuerySurveyDone,
-};

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

@@ -1,6 +0,0 @@
-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,9 +0,0 @@
-/**
- * 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',
-    name: 'permutive',
-});

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

@@ -1,7 +0,0 @@
-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

@@ -1,18 +0,0 @@
-const onLoad = () => {
-    window.google_trackConversion?.({
-        google_conversion_id: 971225648,
-        google_custom_params: window.google_tag_params,
-        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',
-    name: 'remarketing',
-    onLoad,
-});

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

@@ -1,7 +0,0 @@
-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,11 +0,0 @@
-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',
-    insertSnippet,
-});

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

@@ -1,7 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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/track-labs-container.d.ts

@@ -1,7 +0,0 @@
-/**
- * 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

@@ -1,32 +0,0 @@
-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 labsUrl = document
-        .querySelector('h1.dumathoin__title a')
-        ?.getAttribute('href');
-    if (labsUrl === null)
-        return;
-    const eventTimer = EventTimer.get();
-    log('commercial', 'Page has labs container');
-    eventTimer.setProperty('hasLabsContainer', true);
-    eventTimer.setProperty('labsUrl', labsUrl);
-    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/dist/esm/track-scroll-depth.d.ts

@@ -1,8 +0,0 @@
-/**
- * Collect commercial metrics on scroll depth
- * Insert hidden elements at intervals of 1 viewport height
- * then use an intersection observer to mark the time when the viewport intersects with these elements.
- * Approach inspired by https://gist.github.com/bgreater/2412517f5a3f9c6fc4cafeb1ca71384f
- */
-declare const initTrackScrollDepth: () => void;
-export { initTrackScrollDepth };

package/dist/esm/track-scroll-depth.js

@@ -1,38 +0,0 @@
-import { log } from '@guardian/libs';
-import { EventTimer } from './event-timer';
-/**
- * Collect commercial metrics on scroll depth
- * Insert hidden elements at intervals of 1 viewport height
- * then use an intersection observer to mark the time when the viewport intersects with these elements.
- * Approach inspired by https://gist.github.com/bgreater/2412517f5a3f9c6fc4cafeb1ca71384f
- */
-const initTrackScrollDepth = () => {
-    const pageHeight = document.body.offsetHeight;
-    const intViewportHeight = window.innerHeight;
-    // how many viewports tall is the page?
-    const pageHeightVH = Math.floor(pageHeight / intViewportHeight);
-    const eventTimer = EventTimer.get();
-    eventTimer.setProperty('pageHeightVH', pageHeightVH);
-    const observer = new IntersectionObserver(
-    /* istanbul ignore next */
-    (entries) => {
-        entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-                const currentDepthVH = String(entry.target.getAttribute('data-depth'));
-                log('commercial', `current scroll depth ${currentDepthVH}`);
-                eventTimer.trigger(`scroll-depth-vh-${currentDepthVH}`);
-                observer.unobserve(entry.target);
-            }
-        });
-    });
-    for (let depth = 1; depth <= pageHeightVH; depth++) {
-        const div = document.createElement('div');
-        div.dataset.depth = String(depth);
-        div.style.top = String(100 * depth) + '%';
-        div.style.position = 'absolute';
-        div.className = 'scroll-depth-marker';
-        document.body.appendChild(div);
-        observer.observe(div);
-    }
-};
-export { initTrackScrollDepth };