@guardian/commercial-core 0.28.0 → 0.32.0

package/README.md

@@ -24,7 +24,7 @@
 [![Generic badge](https://img.shields.io/badge/google-chat-259082.svg)](https://chat.google.com/room/AAAAPL2MBvE)
 
 ```bash
-pnpm add @guardian/commercial-core
+yarn add @guardian/commercial-core
 ```
 
 or
@@ -44,7 +44,7 @@ If your target environment does not support that, make sure you transpile this p
 ### Requirements
 
 1. [Node 14](https://nodejs.org/en/download/) ([nvm][] or [fnm][] recommended)
-2. [PNPM](https://pnpm.io/installation)
+2. [Yarn](https://classic.yarnpkg.com/en/docs/install/)
 
 [nvm]: https://github.com/nvm-sh/nvm
 [fnm]: https://github.com/Schniz/fnm

package/dist/cjs/EventTimer.d.ts

@@ -37,10 +37,10 @@ export declare class EventTimer {
         effectiveType?: string;
     };
     /**
-     * Initalise the EventTimer class on page.
+     * Initialise the EventTimer class on page.
      * Returns the singleton instance of the EventTimer class and binds
      * to window.guardian.commercialTimer. If it's been previously
-     * initalised and bound it returns the original instance
+     * initialised and bound it returns the original instance
      * Note: We save to window.guardian.commercialTimer because
      * different bundles (DCR / DCP) can use commercial core, and we want
      * all timer events saved to a single instance per-page
@@ -58,7 +58,6 @@ export declare class EventTimer {
      */
     get events(): Event[];
     constructor();
-    mark(name: string): void;
     /**
      * Creates a new performance mark
      * For slot events also ensures each TYPE of event event is marked only once for 'first'
@@ -68,6 +67,7 @@ export declare class EventTimer {
      * @param {origin} [origin=page] - Either 'page' (default) or the name of the slot
      */
     trigger(eventName: string, origin?: string): void;
-    trackInGA(eventName: string, label?: string): void;
+    private mark;
+    private trackInGA;
 }
 export {};

package/dist/cjs/EventTimer.js

@@ -66,10 +66,10 @@ class EventTimer {
                 : {};
     }
     /**
-     * Initalise the EventTimer class on page.
+     * Initialise the EventTimer class on page.
      * Returns the singleton instance of the EventTimer class and binds
      * to window.guardian.commercialTimer. If it's been previously
-     * initalised and bound it returns the original instance
+     * initialised and bound it returns the original instance
      * Note: We save to window.guardian.commercialTimer because
      * different bundles (DCR / DCP) can use commercial core, and we want
      * all timer events saved to a single instance per-page
@@ -102,20 +102,6 @@ class EventTimer {
             ]
             : this._events;
     }
-    mark(name) {
-        const longName = `gu.commercial.${name}`;
-        if (typeof window.performance !== 'undefined' &&
-            'mark' in window.performance) {
-            window.performance.mark(longName);
-            // Most recent mark with this name is the event we just created.
-            const mark = window.performance
-                .getEntriesByName(longName, 'mark')
-                .slice(-1)[0];
-            if (typeof mark !== 'undefined') {
-                this._events.push(new Event(name, mark));
-            }
-        }
-    }
     /**
      * Creates a new performance mark
      * For slot events also ensures each TYPE of event event is marked only once for 'first'
@@ -125,7 +111,7 @@ class EventTimer {
      * @param {origin} [origin=page] - Either 'page' (default) or the name of the slot
      */
     trigger(eventName, origin = 'page') {
-        const TRACKEDSLOTNAME = 'top-above-nav';
+        const TRACKED_SLOT_NAME = 'top-above-nav';
         if (origin === 'page' &&
             !this.triggers.page[eventName]) {
             this.mark(eventName);
@@ -139,12 +125,26 @@ class EventTimer {
             this.trackInGA(eventName, trackLabel);
             this.triggers.first[eventName] = true;
         }
-        if (origin === TRACKEDSLOTNAME) {
-            if (!this.triggers[TRACKEDSLOTNAME][eventName]) {
-                const trackLabel = `${TRACKEDSLOTNAME}-${eventName}`;
+        if (origin === TRACKED_SLOT_NAME) {
+            if (!this.triggers[TRACKED_SLOT_NAME][eventName]) {
+                const trackLabel = `${TRACKED_SLOT_NAME}-${eventName}`;
                 this.mark(trackLabel);
                 this.trackInGA(eventName, trackLabel);
-                this.triggers[TRACKEDSLOTNAME][eventName] = true;
+                this.triggers[TRACKED_SLOT_NAME][eventName] = true;
+            }
+        }
+    }
+    mark(name) {
+        const longName = `gu.commercial.${name}`;
+        if (typeof window.performance !== 'undefined' &&
+            'mark' in window.performance) {
+            window.performance.mark(longName);
+            // Most recent mark with this name is the event we just created.
+            const mark = window.performance
+                .getEntriesByName(longName, 'mark')
+                .slice(-1)[0];
+            if (typeof mark !== 'undefined') {
+                this._events.push(new Event(name, mark));
             }
         }
     }
@@ -159,9 +159,12 @@ class EventTimer {
 exports.EventTimer = EventTimer;
 EventTimer._externallyDefinedEventNames = [
     'cmp-tcfv2-init',
+    'cmp-tcfv2-ui-displayed',
     'cmp-tcfv2-got-consent',
     'cmp-ccpa-init',
+    'cmp-ccpa-ui-displayed',
     'cmp-ccpa-got-consent',
     'cmp-aus-init',
+    'cmp-aus-ui-displayed',
     'cmp-aus-got-consent',
 ];

package/dist/cjs/ad-targeting-youtube.js

@@ -5,6 +5,8 @@ const libs_1 = require("@guardian/libs");
 const can_use_dom_1 = require("./lib/can-use-dom");
 const construct_query_1 = require("./lib/construct-query");
 const permutive_1 = require("./permutive");
+const disabledAds = { disableAds: true };
+exports.disabledAds = disabledAds;
 const buildCustomParamsFromCookies = () => (0, can_use_dom_1.canUseDom)()
     ? {
         permutive: (0, permutive_1.getPermutivePFPSegments)(),
@@ -54,8 +56,6 @@ const buildAdsConfig = (cmpConsent, adUnit, customParams) => {
     // Shouldn't happen but handle if no matching framework
     return disabledAds;
 };
-const disabledAds = { disableAds: true };
-exports.disabledAds = disabledAds;
 const buildAdsConfigWithConsent = (isAdFreeUser, adUnit, customParamsToMerge, consentState) => {
     if (isAdFreeUser) {
         return disabledAds;

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

@@ -0,0 +1,78 @@
+import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
+import type { TCEventStatusCode } from '@guardian/consent-management-platform/dist/types/tcfv2';
+import type { False, NotApplicable, True } from '../types';
+declare const frequency: readonly ["0", "1", "2", "3", "4", "5", "6-9", "10-15", "16-19", "20-29", "30plus"];
+declare const adManagerGroups: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
+declare type AdManagerGroup = typeof adManagerGroups[number];
+/**
+ * Personalised Targeting requires user consent
+ *
+ * It allows or prevents personalised advertising, restrict data processing
+ * and handles access to cookies and local storage
+ */
+export declare type PersonalisedTargeting = {
+    /**
+     * **A**d **M**anager **T**argeting **Gr**ou**p** – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * Sample values:
+     * -
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=12318099
+     * */
+    amtgrp: AdManagerGroup | null;
+    /**
+     * Interaction with TCFv2 banner – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=12083384
+     */
+    cmp_interaction?: TCEventStatusCode | NotApplicable;
+    /**
+     * **TCFv2 Consent** to [all purposes] – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * [all purposes]: https://vendor-list.consensu.org/v2/vendor-list.json
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=12080297
+     * */
+    consent_tcfv2: True | False | NotApplicable;
+    /**
+     * **Fr**equency – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=214647
+     */
+    fr: typeof frequency[number];
+    /**
+     * **P**ersonalised **A**ds Consent – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=11701767
+     */
+    pa: True | False;
+    /**
+     * **Permutive** user segments – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * Values: 900+ number IDs
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=11958727
+     */
+    permutive: string[];
+    /**
+     * **R**estrict **D**ata **P**rocessing Flag – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=11701767
+     */
+    rdp: True | False | NotApplicable;
+};
+declare const getPersonalisedTargeting: (state: ConsentState) => PersonalisedTargeting;
+export { getPersonalisedTargeting };

package/dist/cjs/targeting/personalised.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPersonalisedTargeting = void 0;
+const libs_1 = require("@guardian/libs");
+const permutive_1 = require("../permutive");
+/* -- Types -- */
+const frequency = [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6-9',
+    '10-15',
+    '16-19',
+    '20-29',
+    '30plus',
+];
+const AMTGRP_STORAGE_KEY = 'gu.adManagerGroup';
+const adManagerGroups = [
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+];
+/* -- Methods -- */
+const getRawWithConsent = (key, state) => {
+    if (state.tcfv2) {
+        if (state.tcfv2.consents['1'])
+            return libs_1.storage.local.getRaw(key);
+    }
+    if (state.ccpa) {
+        if (!state.ccpa.doNotSell)
+            return libs_1.storage.local.getRaw(key);
+    }
+    if (state.aus) {
+        if (state.aus.personalisedAdvertising)
+            return libs_1.storage.local.getRaw(key);
+    }
+    return null;
+};
+const getFrequencyValue = (state) => {
+    const rawValue = getRawWithConsent('gu.alreadyVisited', state);
+    if (!rawValue)
+        return '0';
+    const visitCount = parseInt(rawValue, 10);
+    if (visitCount <= 5) {
+        return frequency[visitCount] ?? '0';
+    }
+    else if (visitCount >= 6 && visitCount <= 9) {
+        return '6-9';
+    }
+    else if (visitCount >= 10 && visitCount <= 15) {
+        return '10-15';
+    }
+    else if (visitCount >= 16 && visitCount <= 19) {
+        return '16-19';
+    }
+    else if (visitCount >= 20 && visitCount <= 29) {
+        return '20-29';
+    }
+    else if (visitCount >= 30) {
+        return '30plus';
+    }
+    return '0';
+};
+const tcfv2AllPurposesConsented = (consents) => Object.keys(consents).length > 0 && Object.values(consents).every(Boolean);
+const personalisedAdvertising = (state) => {
+    if (state.tcfv2)
+        return tcfv2AllPurposesConsented(state.tcfv2.consents);
+    if (state.ccpa)
+        return !state.ccpa.doNotSell;
+    if (state.aus)
+        return state.aus.personalisedAdvertising;
+    return false;
+};
+const getCMPTargeting = (state) => {
+    if (state.tcfv2) {
+        return {
+            cmp_interaction: state.tcfv2.eventStatus,
+            pa: tcfv2AllPurposesConsented(state.tcfv2.consents) ? 't' : 'f',
+            consent_tcfv2: tcfv2AllPurposesConsented(state.tcfv2.consents)
+                ? 't'
+                : 'f',
+            rdp: 'na',
+        };
+    }
+    if (state.ccpa) {
+        return {
+            consent_tcfv2: 'na',
+            rdp: state.ccpa.doNotSell ? 't' : 'f',
+            pa: state.ccpa.doNotSell ? 'f' : 't',
+        };
+    }
+    if (state.aus) {
+        return {
+            consent_tcfv2: 'na',
+            rdp: 'na',
+            pa: state.aus.personalisedAdvertising ? 't' : 'f',
+        };
+    }
+    return {
+        cmp_interaction: 'na',
+        consent_tcfv2: 'na',
+        rdp: 'na',
+        pa: 'f',
+    };
+};
+const isAdManagerGroup = (s) => adManagerGroups.some((g) => g === s);
+const createAdManagerGroup = () => {
+    const index = Math.floor(Math.random() * adManagerGroups.length);
+    const group = adManagerGroups[index] ?? '12';
+    libs_1.storage.local.setRaw(AMTGRP_STORAGE_KEY, group);
+    return group;
+};
+const getAdManagerGroup = (state) => {
+    if (!personalisedAdvertising(state)) {
+        libs_1.storage.local.remove(AMTGRP_STORAGE_KEY);
+        return null;
+    }
+    const existingGroup = libs_1.storage.local.getRaw(AMTGRP_STORAGE_KEY);
+    return isAdManagerGroup(existingGroup)
+        ? existingGroup
+        : createAdManagerGroup();
+};
+const getPermutiveWithState = (state) => {
+    if (personalisedAdvertising(state))
+        return (0, permutive_1.getPermutiveSegments)();
+    (0, permutive_1.clearPermutiveSegments)();
+    return [];
+};
+/* -- Targeting -- */
+const getPersonalisedTargeting = (state) => ({
+    amtgrp: getAdManagerGroup(state),
+    fr: getFrequencyValue(state),
+    permutive: getPermutiveWithState(state),
+    ...getCMPTargeting(state),
+});
+exports.getPersonalisedTargeting = getPersonalisedTargeting;

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

@@ -0,0 +1,98 @@
+import type { Participations } from '@guardian/ab-core';
+import type { CountryCode } from '@guardian/libs';
+import type { False, True } from '../types';
+declare const referrers: readonly [{
+    readonly id: "facebook";
+    readonly match: "facebook.com";
+}, {
+    readonly id: "google";
+    readonly match: "www.google";
+}, {
+    readonly id: "twitter";
+    readonly match: "/t.co/";
+}, {
+    readonly id: "reddit";
+    readonly match: "reddit.com";
+}];
+/**
+ * Session Targeting is based on the browser session
+ *
+ * Includes information such as the country of origin, referrer, page view ID.
+ *
+ * These values identify a browser session are either generated client-side,
+ * read from a cookie or passed down from the server.
+ */
+export declare type SessionTargeting = {
+    /**
+     * **AB** Tests – [see on Ad Manager][gam]
+     *
+     * Type: _Dynamic_
+     *
+     * Values: typically start with `ab`
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=186327
+     */
+    ab: string[] | null;
+    /**
+     * **A**d **T**est – [see on Ad Manager][gam]
+     *
+     * Used for testing purposes, based on query param and/or cookie.
+     *
+     * Type: _Dynamic_
+     *
+     * [See Current values](https://frontend.gutools.co.uk/commercial/adtests)
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=177567
+     */
+    at: string | null;
+    /**
+     * **C**ountry **C**ode – [see on Ad Manager][gam]
+     *
+     * Type: _Dynamic_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=11703293
+     */
+    cc: CountryCode;
+    /**
+     * Ophan **P**age **V**iew id – [see on Ad Manager][gam]
+     *
+     * ID Generated client-side, usually available on
+     * `guardian.config.ophan.pageViewId`
+     *
+     * Used mainly for internal reporting
+     *
+     * Type: _Dynamic_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=206127
+     */
+    pv: string;
+    /**
+     * **Ref**errer – [see on Ad Manager][gam]
+     *
+     * Type: _Dynamic_
+     *
+     * Sample values:
+     * - `facebook`
+     * - `google`
+     * - `googleplus`
+     * - `reddit`
+     * - `twitter`
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=228567
+     */
+    ref: typeof referrers[number]['id'] | null;
+    /**
+     * **S**igned **I**n – [see on Ad Manager][gam]
+     *
+     *Whether a user is signed in. Based on presence of a cookie.
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=215727
+     */
+    si: True | False;
+};
+export declare type AllParticipations = {
+    clientSideParticipations: Participations;
+    serverSideParticipations: Record<string, 'control' | 'variant'>;
+};
+export declare const getSessionTargeting: (referrer: string, participations: AllParticipations, targeting: Omit<SessionTargeting, 'ab' | 'ref'>) => SessionTargeting;
+export {};

package/dist/cjs/targeting/session.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSessionTargeting = void 0;
+const libs_1 = require("@guardian/libs");
+/* -- Types -- */
+const referrers = [
+    {
+        id: 'facebook',
+        match: 'facebook.com',
+    },
+    {
+        id: 'google',
+        match: 'www.google',
+    },
+    {
+        id: 'twitter',
+        match: '/t.co/',
+    },
+    {
+        id: 'reddit',
+        match: 'reddit.com',
+    },
+];
+/* -- Methods -- */
+const getReferrer = (referrer) => {
+    if (referrer === '')
+        return null;
+    const matchedRef = referrers.find((referrerType) => referrer.includes(referrerType.match)) ?? null;
+    return matchedRef ? matchedRef.id : null;
+};
+const experimentsTargeting = ({ clientSideParticipations, serverSideParticipations, }) => {
+    const testToParams = (testName, variant) => {
+        if (variant === 'notintest')
+            return null;
+        // GAM key-value pairs accept value strings up to 40 characters long
+        return `${testName}-${variant}`.substring(0, 40);
+    };
+    const clientSideExperiment = Object.entries(clientSideParticipations)
+        .map((test) => {
+        const [name, variant] = test;
+        return testToParams(name, variant.variant);
+    })
+        .filter(libs_1.isString);
+    const serverSideExperiments = Object.entries(serverSideParticipations)
+        .map((test) => testToParams(...test))
+        .filter(libs_1.isString);
+    if (clientSideExperiment.length + serverSideExperiments.length === 0)
+        return null;
+    return [...clientSideExperiment, ...serverSideExperiments];
+};
+/* -- Targeting -- */
+const getSessionTargeting = (referrer, participations, targeting) => ({
+    ref: getReferrer(referrer),
+    ab: experimentsTargeting(participations),
+    ...targeting,
+});
+exports.getSessionTargeting = getSessionTargeting;

package/dist/cjs/types.d.ts

@@ -1,13 +1,10 @@
-export declare type TagAtrribute = {
+export declare type TagAttribute = {
     name: string;
     value: string;
 };
-export declare type GetThirdPartyTag = (arg0: {
-    shouldRun: boolean;
-}) => ThirdPartyTag;
 export declare type ThirdPartyTag = {
     async?: boolean;
-    attrs?: TagAtrribute[];
+    attrs?: TagAttribute[];
     beforeLoad?: () => void;
     insertSnippet?: () => void;
     loaded?: boolean;
@@ -17,6 +14,9 @@ export declare type ThirdPartyTag = {
     url?: string;
     useImage?: boolean;
 };
+export declare type GetThirdPartyTag = (arg0: {
+    shouldRun: boolean;
+}) => ThirdPartyTag;
 export declare type GuardianAnalyticsConfig = {
     trackers: Record<string, string>;
 };

package/dist/esm/EventTimer.d.ts

@@ -37,10 +37,10 @@ export declare class EventTimer {
         effectiveType?: string;
     };
     /**
-     * Initalise the EventTimer class on page.
+     * Initialise the EventTimer class on page.
      * Returns the singleton instance of the EventTimer class and binds
      * to window.guardian.commercialTimer. If it's been previously
-     * initalised and bound it returns the original instance
+     * initialised and bound it returns the original instance
      * Note: We save to window.guardian.commercialTimer because
      * different bundles (DCR / DCP) can use commercial core, and we want
      * all timer events saved to a single instance per-page
@@ -58,7 +58,6 @@ export declare class EventTimer {
      */
     get events(): Event[];
     constructor();
-    mark(name: string): void;
     /**
      * Creates a new performance mark
      * For slot events also ensures each TYPE of event event is marked only once for 'first'
@@ -68,6 +67,7 @@ export declare class EventTimer {
      * @param {origin} [origin=page] - Either 'page' (default) or the name of the slot
      */
     trigger(eventName: string, origin?: string): void;
-    trackInGA(eventName: string, label?: string): void;
+    private mark;
+    private trackInGA;
 }
 export {};

package/dist/esm/EventTimer.js

@@ -63,10 +63,10 @@ export class EventTimer {
                 : {};
     }
     /**
-     * Initalise the EventTimer class on page.
+     * Initialise the EventTimer class on page.
      * Returns the singleton instance of the EventTimer class and binds
      * to window.guardian.commercialTimer. If it's been previously
-     * initalised and bound it returns the original instance
+     * initialised and bound it returns the original instance
      * Note: We save to window.guardian.commercialTimer because
      * different bundles (DCR / DCP) can use commercial core, and we want
      * all timer events saved to a single instance per-page
@@ -99,20 +99,6 @@ export class EventTimer {
             ]
             : this._events;
     }
-    mark(name) {
-        const longName = `gu.commercial.${name}`;
-        if (typeof window.performance !== 'undefined' &&
-            'mark' in window.performance) {
-            window.performance.mark(longName);
-            // Most recent mark with this name is the event we just created.
-            const mark = window.performance
-                .getEntriesByName(longName, 'mark')
-                .slice(-1)[0];
-            if (typeof mark !== 'undefined') {
-                this._events.push(new Event(name, mark));
-            }
-        }
-    }
     /**
      * Creates a new performance mark
      * For slot events also ensures each TYPE of event event is marked only once for 'first'
@@ -122,7 +108,7 @@ export class EventTimer {
      * @param {origin} [origin=page] - Either 'page' (default) or the name of the slot
      */
     trigger(eventName, origin = 'page') {
-        const TRACKEDSLOTNAME = 'top-above-nav';
+        const TRACKED_SLOT_NAME = 'top-above-nav';
         if (origin === 'page' &&
             !this.triggers.page[eventName]) {
             this.mark(eventName);
@@ -136,12 +122,26 @@ export class EventTimer {
             this.trackInGA(eventName, trackLabel);
             this.triggers.first[eventName] = true;
         }
-        if (origin === TRACKEDSLOTNAME) {
-            if (!this.triggers[TRACKEDSLOTNAME][eventName]) {
-                const trackLabel = `${TRACKEDSLOTNAME}-${eventName}`;
+        if (origin === TRACKED_SLOT_NAME) {
+            if (!this.triggers[TRACKED_SLOT_NAME][eventName]) {
+                const trackLabel = `${TRACKED_SLOT_NAME}-${eventName}`;
                 this.mark(trackLabel);
                 this.trackInGA(eventName, trackLabel);
-                this.triggers[TRACKEDSLOTNAME][eventName] = true;
+                this.triggers[TRACKED_SLOT_NAME][eventName] = true;
+            }
+        }
+    }
+    mark(name) {
+        const longName = `gu.commercial.${name}`;
+        if (typeof window.performance !== 'undefined' &&
+            'mark' in window.performance) {
+            window.performance.mark(longName);
+            // Most recent mark with this name is the event we just created.
+            const mark = window.performance
+                .getEntriesByName(longName, 'mark')
+                .slice(-1)[0];
+            if (typeof mark !== 'undefined') {
+                this._events.push(new Event(name, mark));
             }
         }
     }
@@ -155,9 +155,12 @@ export class EventTimer {
 }
 EventTimer._externallyDefinedEventNames = [
     'cmp-tcfv2-init',
+    'cmp-tcfv2-ui-displayed',
     'cmp-tcfv2-got-consent',
     'cmp-ccpa-init',
+    'cmp-ccpa-ui-displayed',
     'cmp-ccpa-got-consent',
     'cmp-aus-init',
+    'cmp-aus-ui-displayed',
     'cmp-aus-got-consent',
 ];

package/dist/esm/ad-targeting-youtube.js

@@ -2,6 +2,7 @@ import { getCookie } from '@guardian/libs';
 import { canUseDom } from './lib/can-use-dom';
 import { constructQuery } from './lib/construct-query';
 import { getPermutivePFPSegments } from './permutive';
+const disabledAds = { disableAds: true };
 const buildCustomParamsFromCookies = () => canUseDom()
     ? {
         permutive: getPermutivePFPSegments(),
@@ -51,7 +52,6 @@ const buildAdsConfig = (cmpConsent, adUnit, customParams) => {
     // Shouldn't happen but handle if no matching framework
     return disabledAds;
 };
-const disabledAds = { disableAds: true };
 const buildAdsConfigWithConsent = (isAdFreeUser, adUnit, customParamsToMerge, consentState) => {
     if (isAdFreeUser) {
         return disabledAds;

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

@@ -0,0 +1,78 @@
+import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
+import type { TCEventStatusCode } from '@guardian/consent-management-platform/dist/types/tcfv2';
+import type { False, NotApplicable, True } from '../types';
+declare const frequency: readonly ["0", "1", "2", "3", "4", "5", "6-9", "10-15", "16-19", "20-29", "30plus"];
+declare const adManagerGroups: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
+declare type AdManagerGroup = typeof adManagerGroups[number];
+/**
+ * Personalised Targeting requires user consent
+ *
+ * It allows or prevents personalised advertising, restrict data processing
+ * and handles access to cookies and local storage
+ */
+export declare type PersonalisedTargeting = {
+    /**
+     * **A**d **M**anager **T**argeting **Gr**ou**p** – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * Sample values:
+     * -
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=12318099
+     * */
+    amtgrp: AdManagerGroup | null;
+    /**
+     * Interaction with TCFv2 banner – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=12083384
+     */
+    cmp_interaction?: TCEventStatusCode | NotApplicable;
+    /**
+     * **TCFv2 Consent** to [all purposes] – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * [all purposes]: https://vendor-list.consensu.org/v2/vendor-list.json
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=12080297
+     * */
+    consent_tcfv2: True | False | NotApplicable;
+    /**
+     * **Fr**equency – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=214647
+     */
+    fr: typeof frequency[number];
+    /**
+     * **P**ersonalised **A**ds Consent – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=11701767
+     */
+    pa: True | False;
+    /**
+     * **Permutive** user segments – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * Values: 900+ number IDs
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=11958727
+     */
+    permutive: string[];
+    /**
+     * **R**estrict **D**ata **P**rocessing Flag – [see on Ad Manager][gam]
+     *
+     * Type: _Predefined_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=11701767
+     */
+    rdp: True | False | NotApplicable;
+};
+declare const getPersonalisedTargeting: (state: ConsentState) => PersonalisedTargeting;
+export { getPersonalisedTargeting };

package/dist/esm/targeting/personalised.js

@@ -0,0 +1,145 @@
+import { storage } from '@guardian/libs';
+import { clearPermutiveSegments, getPermutiveSegments } from '../permutive';
+/* -- Types -- */
+const frequency = [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6-9',
+    '10-15',
+    '16-19',
+    '20-29',
+    '30plus',
+];
+const AMTGRP_STORAGE_KEY = 'gu.adManagerGroup';
+const adManagerGroups = [
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+];
+/* -- Methods -- */
+const getRawWithConsent = (key, state) => {
+    if (state.tcfv2) {
+        if (state.tcfv2.consents['1'])
+            return storage.local.getRaw(key);
+    }
+    if (state.ccpa) {
+        if (!state.ccpa.doNotSell)
+            return storage.local.getRaw(key);
+    }
+    if (state.aus) {
+        if (state.aus.personalisedAdvertising)
+            return storage.local.getRaw(key);
+    }
+    return null;
+};
+const getFrequencyValue = (state) => {
+    const rawValue = getRawWithConsent('gu.alreadyVisited', state);
+    if (!rawValue)
+        return '0';
+    const visitCount = parseInt(rawValue, 10);
+    if (visitCount <= 5) {
+        return frequency[visitCount] ?? '0';
+    }
+    else if (visitCount >= 6 && visitCount <= 9) {
+        return '6-9';
+    }
+    else if (visitCount >= 10 && visitCount <= 15) {
+        return '10-15';
+    }
+    else if (visitCount >= 16 && visitCount <= 19) {
+        return '16-19';
+    }
+    else if (visitCount >= 20 && visitCount <= 29) {
+        return '20-29';
+    }
+    else if (visitCount >= 30) {
+        return '30plus';
+    }
+    return '0';
+};
+const tcfv2AllPurposesConsented = (consents) => Object.keys(consents).length > 0 && Object.values(consents).every(Boolean);
+const personalisedAdvertising = (state) => {
+    if (state.tcfv2)
+        return tcfv2AllPurposesConsented(state.tcfv2.consents);
+    if (state.ccpa)
+        return !state.ccpa.doNotSell;
+    if (state.aus)
+        return state.aus.personalisedAdvertising;
+    return false;
+};
+const getCMPTargeting = (state) => {
+    if (state.tcfv2) {
+        return {
+            cmp_interaction: state.tcfv2.eventStatus,
+            pa: tcfv2AllPurposesConsented(state.tcfv2.consents) ? 't' : 'f',
+            consent_tcfv2: tcfv2AllPurposesConsented(state.tcfv2.consents)
+                ? 't'
+                : 'f',
+            rdp: 'na',
+        };
+    }
+    if (state.ccpa) {
+        return {
+            consent_tcfv2: 'na',
+            rdp: state.ccpa.doNotSell ? 't' : 'f',
+            pa: state.ccpa.doNotSell ? 'f' : 't',
+        };
+    }
+    if (state.aus) {
+        return {
+            consent_tcfv2: 'na',
+            rdp: 'na',
+            pa: state.aus.personalisedAdvertising ? 't' : 'f',
+        };
+    }
+    return {
+        cmp_interaction: 'na',
+        consent_tcfv2: 'na',
+        rdp: 'na',
+        pa: 'f',
+    };
+};
+const isAdManagerGroup = (s) => adManagerGroups.some((g) => g === s);
+const createAdManagerGroup = () => {
+    const index = Math.floor(Math.random() * adManagerGroups.length);
+    const group = adManagerGroups[index] ?? '12';
+    storage.local.setRaw(AMTGRP_STORAGE_KEY, group);
+    return group;
+};
+const getAdManagerGroup = (state) => {
+    if (!personalisedAdvertising(state)) {
+        storage.local.remove(AMTGRP_STORAGE_KEY);
+        return null;
+    }
+    const existingGroup = storage.local.getRaw(AMTGRP_STORAGE_KEY);
+    return isAdManagerGroup(existingGroup)
+        ? existingGroup
+        : createAdManagerGroup();
+};
+const getPermutiveWithState = (state) => {
+    if (personalisedAdvertising(state))
+        return getPermutiveSegments();
+    clearPermutiveSegments();
+    return [];
+};
+/* -- Targeting -- */
+const getPersonalisedTargeting = (state) => ({
+    amtgrp: getAdManagerGroup(state),
+    fr: getFrequencyValue(state),
+    permutive: getPermutiveWithState(state),
+    ...getCMPTargeting(state),
+});
+export { getPersonalisedTargeting };

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

@@ -0,0 +1,98 @@
+import type { Participations } from '@guardian/ab-core';
+import type { CountryCode } from '@guardian/libs';
+import type { False, True } from '../types';
+declare const referrers: readonly [{
+    readonly id: "facebook";
+    readonly match: "facebook.com";
+}, {
+    readonly id: "google";
+    readonly match: "www.google";
+}, {
+    readonly id: "twitter";
+    readonly match: "/t.co/";
+}, {
+    readonly id: "reddit";
+    readonly match: "reddit.com";
+}];
+/**
+ * Session Targeting is based on the browser session
+ *
+ * Includes information such as the country of origin, referrer, page view ID.
+ *
+ * These values identify a browser session are either generated client-side,
+ * read from a cookie or passed down from the server.
+ */
+export declare type SessionTargeting = {
+    /**
+     * **AB** Tests – [see on Ad Manager][gam]
+     *
+     * Type: _Dynamic_
+     *
+     * Values: typically start with `ab`
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=186327
+     */
+    ab: string[] | null;
+    /**
+     * **A**d **T**est – [see on Ad Manager][gam]
+     *
+     * Used for testing purposes, based on query param and/or cookie.
+     *
+     * Type: _Dynamic_
+     *
+     * [See Current values](https://frontend.gutools.co.uk/commercial/adtests)
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=177567
+     */
+    at: string | null;
+    /**
+     * **C**ountry **C**ode – [see on Ad Manager][gam]
+     *
+     * Type: _Dynamic_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=11703293
+     */
+    cc: CountryCode;
+    /**
+     * Ophan **P**age **V**iew id – [see on Ad Manager][gam]
+     *
+     * ID Generated client-side, usually available on
+     * `guardian.config.ophan.pageViewId`
+     *
+     * Used mainly for internal reporting
+     *
+     * Type: _Dynamic_
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=206127
+     */
+    pv: string;
+    /**
+     * **Ref**errer – [see on Ad Manager][gam]
+     *
+     * Type: _Dynamic_
+     *
+     * Sample values:
+     * - `facebook`
+     * - `google`
+     * - `googleplus`
+     * - `reddit`
+     * - `twitter`
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=228567
+     */
+    ref: typeof referrers[number]['id'] | null;
+    /**
+     * **S**igned **I**n – [see on Ad Manager][gam]
+     *
+     *Whether a user is signed in. Based on presence of a cookie.
+     *
+     * [gam]: https://admanager.google.com/59666047#inventory/custom_targeting/detail/custom_key_id=215727
+     */
+    si: True | False;
+};
+export declare type AllParticipations = {
+    clientSideParticipations: Participations;
+    serverSideParticipations: Record<string, 'control' | 'variant'>;
+};
+export declare const getSessionTargeting: (referrer: string, participations: AllParticipations, targeting: Omit<SessionTargeting, 'ab' | 'ref'>) => SessionTargeting;
+export {};

package/dist/esm/targeting/session.js

@@ -0,0 +1,53 @@
+import { isString } from '@guardian/libs';
+/* -- Types -- */
+const referrers = [
+    {
+        id: 'facebook',
+        match: 'facebook.com',
+    },
+    {
+        id: 'google',
+        match: 'www.google',
+    },
+    {
+        id: 'twitter',
+        match: '/t.co/',
+    },
+    {
+        id: 'reddit',
+        match: 'reddit.com',
+    },
+];
+/* -- Methods -- */
+const getReferrer = (referrer) => {
+    if (referrer === '')
+        return null;
+    const matchedRef = referrers.find((referrerType) => referrer.includes(referrerType.match)) ?? null;
+    return matchedRef ? matchedRef.id : null;
+};
+const experimentsTargeting = ({ clientSideParticipations, serverSideParticipations, }) => {
+    const testToParams = (testName, variant) => {
+        if (variant === 'notintest')
+            return null;
+        // GAM key-value pairs accept value strings up to 40 characters long
+        return `${testName}-${variant}`.substring(0, 40);
+    };
+    const clientSideExperiment = Object.entries(clientSideParticipations)
+        .map((test) => {
+        const [name, variant] = test;
+        return testToParams(name, variant.variant);
+    })
+        .filter(isString);
+    const serverSideExperiments = Object.entries(serverSideParticipations)
+        .map((test) => testToParams(...test))
+        .filter(isString);
+    if (clientSideExperiment.length + serverSideExperiments.length === 0)
+        return null;
+    return [...clientSideExperiment, ...serverSideExperiments];
+};
+/* -- Targeting -- */
+export const getSessionTargeting = (referrer, participations, targeting) => ({
+    ref: getReferrer(referrer),
+    ab: experimentsTargeting(participations),
+    ...targeting,
+});

package/dist/esm/types.d.ts

@@ -1,13 +1,10 @@
-export declare type TagAtrribute = {
+export declare type TagAttribute = {
     name: string;
     value: string;
 };
-export declare type GetThirdPartyTag = (arg0: {
-    shouldRun: boolean;
-}) => ThirdPartyTag;
 export declare type ThirdPartyTag = {
     async?: boolean;
-    attrs?: TagAtrribute[];
+    attrs?: TagAttribute[];
     beforeLoad?: () => void;
     insertSnippet?: () => void;
     loaded?: boolean;
@@ -17,6 +14,9 @@ export declare type ThirdPartyTag = {
     url?: string;
     useImage?: boolean;
 };
+export declare type GetThirdPartyTag = (arg0: {
+    shouldRun: boolean;
+}) => ThirdPartyTag;
 export declare type GuardianAnalyticsConfig = {
     trackers: Record<string, string>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/commercial-core",
-  "version": "0.28.0",
+  "version": "0.32.0",
   "description": "Guardian advertising business logic",
   "homepage": "https://github.com/guardian/commercial-core#readme",
   "bugs": {
@@ -41,42 +41,44 @@
   },
   "prettier": "@guardian/prettier",
   "devDependencies": {
-    "@commitlint/cli": "^13",
-    "@commitlint/config-conventional": "^14",
-    "@guardian/consent-management-platform": "^8",
-    "@guardian/eslint-config-typescript": "^0.7",
-    "@guardian/libs": "3.3.0",
-    "@guardian/prettier": "^0.7",
-    "@octokit/core": "^3",
-    "@semantic-release/github": "^8",
-    "@types/googletag": "^1.1.3",
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0",
+    "@guardian/ab-core": "^2.0.0",
+    "@guardian/consent-management-platform": "^8.0.1",
+    "@guardian/eslint-config-typescript": "^0.7.0",
+    "@guardian/libs": "3.5.1",
+    "@guardian/prettier": "^0.7.0",
+    "@octokit/core": "^3.5.1",
+    "@semantic-release/github": "^8.0.2",
     "@types/google.analytics": "^0.0.42",
-    "@types/jest": "^27.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@types/googletag": "^1.1.4",
+    "@types/jest": "^27.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.4",
-    "jest": "^27.3.1",
-    "lint-staged": "^11.2.6",
+    "jest": "^27.4.1",
+    "lint-staged": "^12.1.2",
     "mockdate": "^3.0.5",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.1",
-    "semantic-release": "^18.0.0",
+    "prettier": "^2.5.0",
+    "semantic-release": "^18.0.1",
     "ts-jest": "^27.0.7",
-    "typescript": "^4.4.4",
+    "typescript": "^4.5.2",
     "web-vitals": "^2.1.2"
   },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
+    "@guardian/ab-core": "^2.0.0",
     "@guardian/libs": "^3.3.0"
   }
 }