@guardian/commercial-core 1.0.0 → 3.1.0

package/dist/cjs/EventTimer.d.ts

@@ -23,6 +23,14 @@ interface PageEventStatus {
     commercialBaseModulesLoaded: boolean;
     commercialModulesLoaded: boolean;
 }
+interface EventTimerProperties {
+    type?: ConnectionType;
+    downlink?: number;
+    effectiveType?: string;
+    adSlotsInline?: number;
+    adSlotsTotal?: number;
+    pageHeightVH?: number;
+}
 export declare class EventTimer {
     private _events;
     private static _externallyDefinedEventNames;
@@ -33,11 +41,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 +64,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', 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

@@ -23,14 +23,22 @@ declare enum Endpoints {
  * A method to asynchronously send metrics after initialization.
  */
 export declare function bypassCommercialMetricsSampling(): void;
+interface InitCommercialMetricsArgs {
+    pageViewId: string;
+    browserId: string | undefined;
+    isDev: boolean;
+    adBlockerInUse?: boolean;
+    sampling?: number;
+}
 /**
  * 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.
+ * @param init.adBlockerInUse - indicates whether or not an adblocker is being used.
+ * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-export declare function initCommercialMetrics(pageViewId: string, browserId: string | undefined, isDev: boolean, adBlockerInUse?: boolean, sampling?: number): 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

@@ -108,9 +108,10 @@ exports.bypassCommercialMetricsSampling = bypassCommercialMetricsSampling;
  * @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.
+ * @param init.adBlockerInUse - indicates whether or not an adblocker is being used.
+ * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-function initCommercialMetrics(pageViewId, browserId, isDev, adBlockerInUse, sampling = 1 / 100) {
+function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling = 1 / 100, }) {
     commercialMetricsPayload.page_view_id = pageViewId;
     commercialMetricsPayload.browser_id = browserId;
     setEndpoint(isDev);

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,14 @@ interface PageEventStatus {
     commercialBaseModulesLoaded: boolean;
     commercialModulesLoaded: boolean;
 }
+interface EventTimerProperties {
+    type?: ConnectionType;
+    downlink?: number;
+    effectiveType?: string;
+    adSlotsInline?: number;
+    adSlotsTotal?: number;
+    pageHeightVH?: number;
+}
 export declare class EventTimer {
     private _events;
     private static _externallyDefinedEventNames;
@@ -33,11 +41,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 +64,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', 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

@@ -23,14 +23,22 @@ declare enum Endpoints {
  * A method to asynchronously send metrics after initialization.
  */
 export declare function bypassCommercialMetricsSampling(): void;
+interface InitCommercialMetricsArgs {
+    pageViewId: string;
+    browserId: string | undefined;
+    isDev: boolean;
+    adBlockerInUse?: boolean;
+    sampling?: number;
+}
 /**
  * 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.
+ * @param init.adBlockerInUse - indicates whether or not an adblocker is being used.
+ * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-export declare function initCommercialMetrics(pageViewId: string, browserId: string | undefined, isDev: boolean, adBlockerInUse?: boolean, sampling?: number): 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

@@ -104,9 +104,10 @@ export function bypassCommercialMetricsSampling() {
  * @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.
+ * @param init.adBlockerInUse - indicates whether or not an adblocker is being used.
+ * @param init.sampling - rate at which to sample commercial metrics - the default is to send for 1% of pageviews
  */
-export function initCommercialMetrics(pageViewId, browserId, isDev, adBlockerInUse, sampling = 1 / 100) {
+export function initCommercialMetrics({ pageViewId, browserId, isDev, adBlockerInUse, sampling = 1 / 100, }) {
     commercialMetricsPayload.page_view_id = pageViewId;
     commercialMetricsPayload.browser_id = browserId;
     setEndpoint(isDev);

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": "1.0.0",
+  "version": "3.1.0",
   "description": "Guardian advertising business logic",
   "homepage": "https://github.com/guardian/commercial-core#readme",
   "bugs": {