@guardian/commercial-core 2.0.0 → 3.2.0

package/dist/cjs/EventTimer.d.ts

@@ -23,6 +23,15 @@ interface PageEventStatus {
     commercialBaseModulesLoaded: boolean;
     commercialModulesLoaded: boolean;
 }
+interface EventTimerProperties {
+    type?: ConnectionType;
+    downlink?: number;
+    effectiveType?: string;
+    adSlotsInline?: number;
+    adSlotsTotal?: number;
+    pageHeightVH?: number;
+    lazyLoadMarginPercent?: number;
+}
 export declare class EventTimer {
     private _events;
     private static _externallyDefinedEventNames;
@@ -33,11 +42,7 @@ export declare class EventTimer {
         page: PageEventStatus;
     };
     gaConfig: GAConfig;
-    properties: {
-        type?: ConnectionType;
-        downlink?: number;
-        effectiveType?: string;
-    };
+    properties: EventTimerProperties;
     /**
      * Initialise the EventTimer class on page.
      * Returns the singleton instance of the EventTimer class and binds
@@ -60,6 +65,13 @@ export declare class EventTimer {
      */
     get events(): Event[];
     private constructor();
+    /**
+     * Adds an event timer property
+     *
+     * @param {string} name - the property's name
+     * @param {value} number - the property's value
+     */
+    setProperty(name: 'adSlotsInline' | 'adSlotsTotal' | 'pageHeightVH' | 'lazyLoadMarginPercent', value: number): void;
     /**
      * Creates a new performance mark
      * For slot events also ensures each TYPE of event event is marked only once for 'first'

package/dist/cjs/EventTimer.js

@@ -108,6 +108,15 @@ class EventTimer {
             ]
             : this._events;
     }
+    /**
+     * Adds an event timer property
+     *
+     * @param {string} name - the property's name
+     * @param {value} number - the property's value
+     */
+    setProperty(name, value) {
+        this.properties[name] = value;
+    }
     /**
      * Creates a new performance mark
      * For slot events also ensures each TYPE of event event is marked only once for 'first'

package/dist/cjs/index.d.ts

@@ -11,6 +11,7 @@ export { adSizes, getAdSize } from './ad-sizes';
 export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
 export { isAdBlockInUse } from './detectAdBlocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
+export { initTrackScrollDepth } from './track-scroll-depth';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';

package/dist/cjs/index.js

@@ -20,7 +20,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.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;
+exports.pickTargetingValues = exports.getViewportTargeting = exports.getSharedTargeting = exports.getSessionTargeting = exports.getPersonalisedTargeting = exports.getContentTargeting = exports.constants = exports.disabledAds = exports.buildAdsConfigWithConsent = exports.initTrackScrollDepth = exports.getPermutivePFPSegments = exports.getPermutiveSegments = exports.clearPermutiveSegments = exports.isAdBlockInUse = exports.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");
@@ -47,6 +47,8 @@ var permutive_2 = require("./permutive");
 Object.defineProperty(exports, "clearPermutiveSegments", { enumerable: true, get: function () { return permutive_2.clearPermutiveSegments; } });
 Object.defineProperty(exports, "getPermutiveSegments", { enumerable: true, get: function () { return permutive_2.getPermutiveSegments; } });
 Object.defineProperty(exports, "getPermutivePFPSegments", { enumerable: true, get: function () { return permutive_2.getPermutivePFPSegments; } });
+var track_scroll_depth_1 = require("./track-scroll-depth");
+Object.defineProperty(exports, "initTrackScrollDepth", { enumerable: true, get: function () { return track_scroll_depth_1.initTrackScrollDepth; } });
 var ad_targeting_youtube_1 = require("./ad-targeting-youtube");
 Object.defineProperty(exports, "buildAdsConfigWithConsent", { enumerable: true, get: function () { return ad_targeting_youtube_1.buildAdsConfigWithConsent; } });
 Object.defineProperty(exports, "disabledAds", { enumerable: true, get: function () { return ad_targeting_youtube_1.disabledAds; } });

package/dist/cjs/sendCommercialMetrics.d.ts

@@ -28,8 +28,6 @@ interface InitCommercialMetricsArgs {
     browserId: string | undefined;
     isDev: boolean;
     adBlockerInUse?: boolean;
-    adSlotsInline?: number;
-    adSlotsTotal?: number;
     sampling?: number;
 }
 /**
@@ -38,11 +36,9 @@ interface InitCommercialMetricsArgs {
  * @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 an adblocker is being used.
- * @param init.adSlotsInline - the number of inline ad slots on the page
- * @param init.adSlotsTotal - the total number of ad slots on the page
  * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-export declare function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, adSlotsInline, adSlotsTotal, sampling, }: InitCommercialMetricsArgs): boolean;
+export declare function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling, }: InitCommercialMetricsArgs): boolean;
 export declare const _: {
     Endpoints: typeof Endpoints;
     setEndpoint: (isDev: boolean) => Endpoints;

package/dist/cjs/sendCommercialMetrics.js

@@ -17,7 +17,6 @@ let commercialMetricsPayload = {
 };
 let devProperties = [];
 let adBlockerProperties = [];
-let adSlotProperties = [];
 let initialised = false;
 let endpoint;
 const setEndpoint = (isDev) => (endpoint = isDev ? Endpoints.CODE : Endpoints.PROD);
@@ -35,25 +34,6 @@ const setAdBlockerProperties = (adBlockerInUse) => {
             ]
             : [];
 };
-const setAdSlotProperties = (adSlotsInline, adSlotsTotal) => {
-    const adSlotsInlineProperties = adSlotsInline !== undefined
-        ? [
-            {
-                name: 'adSlotsInline',
-                value: adSlotsInline.toString(),
-            },
-        ]
-        : [];
-    const adSlotsTotalProperties = adSlotsTotal !== undefined
-        ? [
-            {
-                name: 'adSlotsTotal',
-                value: adSlotsTotal.toString(),
-            },
-        ]
-        : [];
-    adSlotProperties = adSlotsInlineProperties.concat(adSlotsTotalProperties);
-};
 const transformToObjectEntries = (eventTimerProperties) => {
     // Transforms object {key: value} pairs into an array of [key, value] arrays
     return Object.entries(eventTimerProperties);
@@ -88,8 +68,7 @@ function gatherMetricsOnPageUnload() {
     const mappedEventTimerProperties = mapEventTimerPropertiesToString(filteredEventTimerProperties);
     const properties = mappedEventTimerProperties
         .concat(devProperties)
-        .concat(adBlockerProperties)
-        .concat(adSlotProperties);
+        .concat(adBlockerProperties);
     commercialMetricsPayload.properties = properties;
     const metrics = roundTimeStamp(eventTimer.events);
     commercialMetricsPayload.metrics = metrics;
@@ -130,17 +109,14 @@ exports.bypassCommercialMetricsSampling = bypassCommercialMetricsSampling;
  * @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 an adblocker is being used.
- * @param init.adSlotsInline - the number of inline ad slots on the page
- * @param init.adSlotsTotal - the total number of ad slots on the page
  * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, adSlotsInline, adSlotsTotal, sampling = 1 / 100, }) {
+function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling = 1 / 100, }) {
     commercialMetricsPayload.page_view_id = pageViewId;
     commercialMetricsPayload.browser_id = browserId;
     setEndpoint(isDev);
     setDevProperties(isDev);
     setAdBlockerProperties(adBlockerInUse);
-    setAdSlotProperties(adSlotsInline, adSlotsTotal);
     if (initialised) {
         return false;
     }

package/dist/cjs/track-scroll-depth.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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/cjs/track-scroll-depth.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initTrackScrollDepth = void 0;
+const libs_1 = require("@guardian/libs");
+const EventTimer_1 = require("./EventTimer");
+/**
+ * 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_1.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'));
+                (0, libs_1.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);
+    }
+};
+exports.initTrackScrollDepth = initTrackScrollDepth;

package/dist/esm/EventTimer.d.ts

@@ -23,6 +23,15 @@ interface PageEventStatus {
     commercialBaseModulesLoaded: boolean;
     commercialModulesLoaded: boolean;
 }
+interface EventTimerProperties {
+    type?: ConnectionType;
+    downlink?: number;
+    effectiveType?: string;
+    adSlotsInline?: number;
+    adSlotsTotal?: number;
+    pageHeightVH?: number;
+    lazyLoadMarginPercent?: number;
+}
 export declare class EventTimer {
     private _events;
     private static _externallyDefinedEventNames;
@@ -33,11 +42,7 @@ export declare class EventTimer {
         page: PageEventStatus;
     };
     gaConfig: GAConfig;
-    properties: {
-        type?: ConnectionType;
-        downlink?: number;
-        effectiveType?: string;
-    };
+    properties: EventTimerProperties;
     /**
      * Initialise the EventTimer class on page.
      * Returns the singleton instance of the EventTimer class and binds
@@ -60,6 +65,13 @@ export declare class EventTimer {
      */
     get events(): Event[];
     private constructor();
+    /**
+     * Adds an event timer property
+     *
+     * @param {string} name - the property's name
+     * @param {value} number - the property's value
+     */
+    setProperty(name: 'adSlotsInline' | 'adSlotsTotal' | 'pageHeightVH' | 'lazyLoadMarginPercent', value: number): void;
     /**
      * Creates a new performance mark
      * For slot events also ensures each TYPE of event event is marked only once for 'first'

package/dist/esm/EventTimer.js

@@ -105,6 +105,15 @@ export class EventTimer {
             ]
             : this._events;
     }
+    /**
+     * Adds an event timer property
+     *
+     * @param {string} name - the property's name
+     * @param {value} number - the property's value
+     */
+    setProperty(name, value) {
+        this.properties[name] = value;
+    }
     /**
      * Creates a new performance mark
      * For slot events also ensures each TYPE of event event is marked only once for 'first'

package/dist/esm/index.d.ts

@@ -11,6 +11,7 @@ export { adSizes, getAdSize } from './ad-sizes';
 export type { SizeKeys, AdSizeString, AdSize } from './ad-sizes';
 export { isAdBlockInUse } from './detectAdBlocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
+export { initTrackScrollDepth } from './track-scroll-depth';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 export type { AdsConfig, AdsConfigBasic, AdsConfigDisabled, AdTargetingBuilder, CustomParams, } from './types';
 export * as constants from './constants';

package/dist/esm/index.js

@@ -10,6 +10,7 @@ export { bypassCommercialMetricsSampling, initCommercialMetrics, } from './sendC
 export { adSizes, getAdSize } from './ad-sizes';
 export { isAdBlockInUse } from './detectAdBlocker';
 export { clearPermutiveSegments, getPermutiveSegments, getPermutivePFPSegments, } from './permutive';
+export { initTrackScrollDepth } from './track-scroll-depth';
 export { buildAdsConfigWithConsent, disabledAds } from './ad-targeting-youtube';
 import * as constants_1 from './constants';
 export { constants_1 as constants };

package/dist/esm/sendCommercialMetrics.d.ts

@@ -28,8 +28,6 @@ interface InitCommercialMetricsArgs {
     browserId: string | undefined;
     isDev: boolean;
     adBlockerInUse?: boolean;
-    adSlotsInline?: number;
-    adSlotsTotal?: number;
     sampling?: number;
 }
 /**
@@ -38,11 +36,9 @@ interface InitCommercialMetricsArgs {
  * @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 an adblocker is being used.
- * @param init.adSlotsInline - the number of inline ad slots on the page
- * @param init.adSlotsTotal - the total number of ad slots on the page
  * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-export declare function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, adSlotsInline, adSlotsTotal, sampling, }: InitCommercialMetricsArgs): boolean;
+export declare function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling, }: InitCommercialMetricsArgs): boolean;
 export declare const _: {
     Endpoints: typeof Endpoints;
     setEndpoint: (isDev: boolean) => Endpoints;

package/dist/esm/sendCommercialMetrics.js

@@ -14,7 +14,6 @@ let commercialMetricsPayload = {
 };
 let devProperties = [];
 let adBlockerProperties = [];
-let adSlotProperties = [];
 let initialised = false;
 let endpoint;
 const setEndpoint = (isDev) => (endpoint = isDev ? Endpoints.CODE : Endpoints.PROD);
@@ -32,25 +31,6 @@ const setAdBlockerProperties = (adBlockerInUse) => {
             ]
             : [];
 };
-const setAdSlotProperties = (adSlotsInline, adSlotsTotal) => {
-    const adSlotsInlineProperties = adSlotsInline !== undefined
-        ? [
-            {
-                name: 'adSlotsInline',
-                value: adSlotsInline.toString(),
-            },
-        ]
-        : [];
-    const adSlotsTotalProperties = adSlotsTotal !== undefined
-        ? [
-            {
-                name: 'adSlotsTotal',
-                value: adSlotsTotal.toString(),
-            },
-        ]
-        : [];
-    adSlotProperties = adSlotsInlineProperties.concat(adSlotsTotalProperties);
-};
 const transformToObjectEntries = (eventTimerProperties) => {
     // Transforms object {key: value} pairs into an array of [key, value] arrays
     return Object.entries(eventTimerProperties);
@@ -85,8 +65,7 @@ function gatherMetricsOnPageUnload() {
     const mappedEventTimerProperties = mapEventTimerPropertiesToString(filteredEventTimerProperties);
     const properties = mappedEventTimerProperties
         .concat(devProperties)
-        .concat(adBlockerProperties)
-        .concat(adSlotProperties);
+        .concat(adBlockerProperties);
     commercialMetricsPayload.properties = properties;
     const metrics = roundTimeStamp(eventTimer.events);
     commercialMetricsPayload.metrics = metrics;
@@ -126,17 +105,14 @@ export function bypassCommercialMetricsSampling() {
  * @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 an adblocker is being used.
- * @param init.adSlotsInline - the number of inline ad slots on the page
- * @param init.adSlotsTotal - the total number of ad slots on the page
  * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-export function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, adSlotsInline, adSlotsTotal, sampling = 1 / 100, }) {
+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);
-    setAdSlotProperties(adSlotsInline, adSlotsTotal);
     if (initialised) {
         return false;
     }

package/dist/esm/track-scroll-depth.d.ts

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

@@ -0,0 +1,38 @@
+import { log } from '@guardian/libs';
+import { EventTimer } from './EventTimer';
+/**
+ * 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/commercial-core",
-  "version": "2.0.0",
+  "version": "3.2.0",
   "description": "Guardian advertising business logic",
   "homepage": "https://github.com/guardian/commercial-core#readme",
   "bugs": {