@guardian/commercial-core 3.0.0 → 3.2.1

package/dist/cjs/EventTimer.d.ts

@@ -29,6 +29,8 @@ interface EventTimerProperties {
     effectiveType?: string;
     adSlotsInline?: number;
     adSlotsTotal?: number;
+    pageHeightVH?: number;
+    lazyLoadMarginPercent?: number;
 }
 export declare class EventTimer {
     private _events;
@@ -63,7 +65,13 @@ export declare class EventTimer {
      */
     get events(): Event[];
     private constructor();
-    setProperty(name: 'adSlotsInline' | 'adSlotsTotal', value: number): void;
+    /**
+     * 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,12 @@ 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;
     }

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

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

package/dist/cjs/ad-sizes.js

@@ -32,7 +32,6 @@ const adSizesPartial = {
     outstreamDesktop: createAdSize(620, 350),
     outstreamGoogleDesktop: createAdSize(550, 310),
     outstreamMobile: createAdSize(300, 197),
-    video: createAdSize(620, 1),
 };
 exports.adSizes = {
     ...adSizesPartial,

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/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

@@ -29,6 +29,8 @@ interface EventTimerProperties {
     effectiveType?: string;
     adSlotsInline?: number;
     adSlotsTotal?: number;
+    pageHeightVH?: number;
+    lazyLoadMarginPercent?: number;
 }
 export declare class EventTimer {
     private _events;
@@ -63,7 +65,13 @@ export declare class EventTimer {
      */
     get events(): Event[];
     private constructor();
-    setProperty(name: 'adSlotsInline' | 'adSlotsTotal', value: number): void;
+    /**
+     * 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,12 @@ 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;
     }

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

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

package/dist/esm/ad-sizes.js

@@ -29,7 +29,6 @@ const adSizesPartial = {
     outstreamDesktop: createAdSize(620, 350),
     outstreamGoogleDesktop: createAdSize(550, 310),
     outstreamMobile: createAdSize(300, 197),
-    video: createAdSize(620, 1),
 };
 export const adSizes = {
     ...adSizesPartial,

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