@schibsted/pulse-sdk 8.0.0-alpha.16 → 8.0.0-alpha.18

package/dist/cjs/leaveTracking/index.js

@@ -0,0 +1,368 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateScrollPosition = exports.calculateScrolledPixels = exports.resetViewedContent = void 0;
+exports.addPageLeaveTracking = addPageLeaveTracking;
+exports.leaveTrackingIsActive = leaveTrackingIsActive;
+exports.removePageLeaveTracking = removePageLeaveTracking;
+exports.updatePageLeaveTracking = updatePageLeaveTracking;
+exports.updatePageLeaveEvent = updatePageLeaveEvent;
+exports.trackActivePageLeave = trackActivePageLeave;
+exports.trackPageLeave = trackPageLeave;
+exports.updateViewedContent = updateViewedContent;
+exports.addEventListeners = addEventListeners;
+exports.removeEventListeners = removeEventListeners;
+const pulse_utils_1 = require("@schibsted/pulse-utils");
+const logger = __importStar(require("loglevel"));
+const Tracker_1 = require("../Tracker");
+const constants_1 = require("./constants");
+const types_1 = require("./types");
+let pageLeaveListeners = [];
+let updateViewedContentListeners = [];
+let activityListeners = [];
+let resizeObserver = null;
+let throttledUpdateFn = (0, pulse_utils_1.throttle)(() => undefined, 0);
+let startTime = 0;
+let activityDuration = (0, constants_1.DEFAULT_ACTIVITY_DURATION)();
+let currentPageLeaveEvent = (0, constants_1.DEFAULT_PAGE_LEAVE_EVENT)();
+let originalUseBeacon;
+let currentLeaveEventBuilder = (0, constants_1.DEFAULT_LEAVE_EVENT_BUILDER)();
+let additionalHeightBuilder;
+/*
+ Add page leave tracking
+ */
+function addPageLeaveTracking(tracker, objectElement, pageElement, eventBuilder, options = {}) {
+    additionalHeightBuilder = options.additionalHeightBuilder;
+    if (!leaveTrackingIsActive()) {
+        originalUseBeacon = tracker.state.useBeacon;
+        tracker.state.useBeacon = true;
+        currentLeaveEventBuilder = eventBuilder || (0, constants_1.DEFAULT_LEAVE_EVENT_BUILDER)();
+        addPageLeaveListeners(tracker);
+        addUpdateEventListeners(objectElement, pageElement, options.objectResizable);
+        startTime = resetTime();
+        logger.debug('addPageLeaveTracking:after:state', currentPageLeaveEvent);
+    }
+    else {
+        logger.warn('addPageLeaveTracking was called while leave-tracking was already active. Consider using updatePageLeaveTracking with resetProperties=false if you want to update the page/object element!');
+    }
+}
+function leaveTrackingIsActive() {
+    return !(pageLeaveListeners.length === 0 &&
+        updateViewedContentListeners.length === 0 &&
+        activityListeners.length === 0);
+}
+/*
+  Remove page leave tracking
+*/
+function removePageLeaveTracking(tracker) {
+    tracker.state.useBeacon = originalUseBeacon;
+    removePageLeaveListeners();
+    removeUpdateEventListeners();
+    resetEventDefaults();
+    currentLeaveEventBuilder = (0, constants_1.DEFAULT_LEAVE_EVENT_BUILDER)();
+    logger.debug('removePageLeaveTracking:after:state', currentLeaveEventBuilder());
+}
+/**
+ * Update page leave tracking
+ * @param objectElement new object element to track
+ * @param pageElement new page element to track
+ * @param resetProperties if ALL engagement properties should be reset (duration, scroll etc.)
+ */
+function updatePageLeaveTracking(objectElement, pageElement, resetProperties) {
+    if (updateViewedContentListeners.length > 0) {
+        removeUpdateEventListeners();
+        if (resetProperties) {
+            resetEventDefaults();
+        }
+        addUpdateEventListeners(objectElement, pageElement);
+    }
+}
+/*
+  Add event listeners to the relevant browser events
+  When the browser event triggers, we want to send the Leave event
+  with the event supplied by the user and the name of the triggered browser event
+*/
+function addPageLeaveListeners(tracker) {
+    const beforeUnloadListener = addEventListeners([types_1.BrowserEvents.BEFORE_UNLOAD], () => trackPageLeave(tracker, currentLeaveEventBuilder(), types_1.BrowserEvents.BEFORE_UNLOAD), { capture: true });
+    const pageHideListener = addEventListeners([types_1.BrowserEvents.PAGE_HIDE], () => trackPageLeave(tracker, currentLeaveEventBuilder(), types_1.BrowserEvents.PAGE_HIDE), { capture: true });
+    const popStateListener = addEventListeners([types_1.BrowserEvents.POP_STATE], () => trackPageLeave(tracker, currentLeaveEventBuilder(), types_1.BrowserEvents.POP_STATE), { capture: true });
+    const visibilityChangeListener = addEventListeners([types_1.BrowserEvents.VISIBILITY_CHANGE], () => {
+        if (document.visibilityState === 'hidden') {
+            trackPageLeave(tracker, currentLeaveEventBuilder(), types_1.BrowserEvents.VISIBILITY_CHANGE);
+        }
+    }, { capture: true });
+    pageLeaveListeners.push(...beforeUnloadListener);
+    pageLeaveListeners.push(...pageHideListener);
+    pageLeaveListeners.push(...popStateListener);
+    pageLeaveListeners.push(...visibilityChangeListener);
+}
+/*
+ Remove all Leave event listeners
+ */
+function removePageLeaveListeners() {
+    pageLeaveListeners = removeEventListeners(pageLeaveListeners, { capture: true });
+}
+function removeResizeObserver() {
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+    }
+}
+/*
+ Add handlers to update the default event.
+ The fields that are included can be found here: https://pages.github.schibsted.io/mpt-data/pulse-standard/#leave-article
+ */
+function addUpdateEventListeners(objectElement, pageElement, objectResizable = false) {
+    addUpdateViewedContentListeners(objectElement, pageElement, objectResizable);
+    addUpdateActivityDurationListeners();
+}
+/*
+ Remove all handlers for tracking viewed content and durations
+ */
+function removeUpdateEventListeners() {
+    updateViewedContentListeners = removeEventListeners(updateViewedContentListeners);
+    activityListeners = removeEventListeners(activityListeners);
+    removeResizeObserver();
+}
+/*
+ Reset the default leave tracking state.
+ */
+const resetEventDefaults = () => {
+    currentPageLeaveEvent = (0, constants_1.DEFAULT_PAGE_LEAVE_EVENT)();
+    startTime = resetTime();
+    activityDuration = resetActivityDuration();
+};
+const resetActivityDuration = () => {
+    clearInterval(activityDuration.interval);
+    return (0, constants_1.DEFAULT_ACTIVITY_DURATION)();
+};
+const resetViewedContent = () => {
+    currentPageLeaveEvent.engagement = Object.assign({}, currentPageLeaveEvent.engagement, (0, constants_1.DEFAULT_VIEWED_CONTENT)());
+};
+exports.resetViewedContent = resetViewedContent;
+const resetTime = () => Date.now();
+/*
+ Update the default Leave event with an event supplied by the brand
+ */
+function updatePageLeaveEvent(leaveEvent) {
+    (0, pulse_utils_1.pulseMerge)(currentPageLeaveEvent, leaveEvent);
+}
+/*
+ Send a Leave event only if Page Leave tracking is active in the SDK
+ The event that is ultimately sent is a merge between the default event
+ saved in this file and the event supplied by the brand, with preference going
+ to the brand event. After the event has been sent, leave page tracking is removed
+ and must be explicitly re-added if needed.
+*/
+function trackActivePageLeave(tracker, providedEvent, eventName) {
+    if (leaveTrackingIsActive()) {
+        trackPageLeave(tracker, providedEvent, eventName);
+    }
+}
+/*
+ Send a Leave event regardless of whether Page Leave tracking is active in the SDK
+ The event that is ultimately sent is a merge between the default event
+ saved in this file and the event supplied by the brand, with preference going
+ to the brand event. After the event has been sent, leave page tracking is removed
+ and must be explicitly re-added if needed.
+ */
+async function trackPageLeave(tracker, providedEvent, eventName) {
+    const endTime = Date.now();
+    const duration = endTime - startTime;
+    const leaveEvent = providedEvent || currentLeaveEventBuilder();
+    const mergedEvent = (0, pulse_utils_1.pulseMerge)({
+        ...currentPageLeaveEvent,
+        engagement: {
+            duration,
+            activityDuration: activityDuration.value,
+            ...currentPageLeaveEvent.engagement,
+        },
+        object: {
+            ...(eventName && {
+                'spt:custom': {
+                    'spt:eventName': eventName,
+                },
+            }),
+        },
+    }, leaveEvent);
+    logger.debug('trackPageLeave: event', mergedEvent);
+    tracker.track('trackerEvent', mergedEvent, { applyBookmarkKey: Tracker_1.BookmarkKeys.PAGE_VIEW });
+    removePageLeaveTracking(tracker);
+}
+/*
+ Add listeners to update the viewed content fields in the default event
+ We listen to 'scroll' and 'resize' browser events
+ */
+function addUpdateViewedContentListeners(objectElement, pageElement, objectResizable) {
+    updateViewedContent(objectElement, pageElement);
+    throttledUpdateFn = (0, pulse_utils_1.throttle)(() => updateViewedContent(objectElement, pageElement), 500);
+    updateViewedContentListeners = addEventListeners([types_1.BrowserEvents.SCROLL, types_1.BrowserEvents.RESIZE], throttledUpdateFn);
+    if (objectResizable) {
+        if (!resizeObserver) {
+            resizeObserver = new ResizeObserver(() => {
+                (0, exports.resetViewedContent)();
+                throttledUpdateFn();
+            });
+        }
+        resizeObserver.observe(objectElement);
+    }
+}
+/*
+ Update the viewed content fields that are used in the default event.
+ The includes fields are:
+ {pageScrollPosition} The absolute scroll position on the page in pixels.
+ {maxPageScrollPosition} The maximum scroll position the user has been on in pixels.
+ {objectViewPercentage} The relative scroll position of the supplied DOM element in pixels.
+ {maxObjectViewPercentage} The maximum relative scroll position of the supplied DOM element in pixels.
+ {pageViewPercentage} The relative scroll position of the user in %.
+  {maxPageViewPercentage} The maximum relative scroll position the user has seen in %.
+*/
+function updateViewedContent(objectElement, pageElement) {
+    const { totalHeight: additionalTotalHeight, viewedHeight: additionalViewedHeight } = (0, pulse_utils_1.isFunction)(additionalHeightBuilder)
+        ? additionalHeightBuilder()
+        : { totalHeight: 0, viewedHeight: 0 };
+    const objectScrolledPixels = (0, exports.calculateScrolledPixels)(objectElement) + additionalViewedHeight;
+    const pageScrolledPixels = (0, exports.calculateScrolledPixels)(pageElement) + additionalViewedHeight;
+    const pageScrollPosition = (0, exports.calculateScrollPosition)(pageElement) + additionalViewedHeight;
+    const maxPageScrollPosition = Math.max(pageScrollPosition, Number(currentPageLeaveEvent.engagement.maxPageScrollPosition));
+    const objectViewPercentage = calculateViewPercentage(objectScrolledPixels, objectElement.scrollHeight + additionalTotalHeight);
+    const maxObjectViewPercentage = Math.max(objectViewPercentage, Number(currentPageLeaveEvent.engagement.maxObjectViewPercentage));
+    const pageViewPercentage = calculateViewPercentage(pageScrolledPixels, pageElement.scrollHeight + additionalTotalHeight);
+    const maxPageViewPercentage = Math.max(pageViewPercentage, Number(currentPageLeaveEvent.engagement.maxPageViewPercentage));
+    logger.debug('updateViewedContent:before:engagement', { ...currentPageLeaveEvent.engagement });
+    (0, pulse_utils_1.pulseMerge)(currentPageLeaveEvent.engagement, {
+        pageScrollPosition,
+        maxPageScrollPosition,
+        objectViewPercentage,
+        maxObjectViewPercentage,
+        pageViewPercentage,
+        maxPageViewPercentage,
+    });
+    logger.debug('updateViewedContent:after:engagement', { ...currentPageLeaveEvent.engagement });
+}
+const calculateScrolledPixels = (element) => {
+    const rect = element.getBoundingClientRect();
+    const scrolledPixels = pulse_utils_1.isBrowser ? element.scrollHeight - rect.bottom + window.innerHeight : 0;
+    if (scrolledPixels <= 0) {
+        return 0;
+    }
+    return Math.min(scrolledPixels, element.scrollHeight);
+};
+exports.calculateScrolledPixels = calculateScrolledPixels;
+const calculateScrollPosition = (element) => Math.abs(Math.min(element.getBoundingClientRect().top, 0));
+exports.calculateScrollPosition = calculateScrollPosition;
+/*
+ Track the user's activity duration on the page.
+ The activity duration is the active time the user spends on the page.
+ Active means less than 30 seconds since the user triggered one of the
+ 'mousedown', 'mousemove', 'keydown', 'scroll' and/or 'touchstart' browser events.
+ */
+function addUpdateActivityDurationListeners() {
+    if (activityDuration.interval !== undefined) {
+        // If the interval is already set, do not set it again
+        return;
+    }
+    const interval = 1000;
+    const activityTimeout = 30 * 1000;
+    activityDuration.interval = window.setInterval(() => {
+        activityDuration.timeSinceLastActivity += interval;
+        if (activityDuration.timeSinceLastActivity < activityTimeout) {
+            activityDuration.value += interval;
+        }
+    }, interval);
+    const activityEvents = [
+        types_1.BrowserEvents.SCROLL,
+        types_1.BrowserEvents.MOUSEDOWN,
+        types_1.BrowserEvents.MOUSEMOVE,
+        types_1.BrowserEvents.KEYDOWN,
+        types_1.BrowserEvents.TOUCHSTART,
+    ];
+    const passiveSupported = isPassiveSupported();
+    activityListeners = addEventListeners(activityEvents, () => {
+        activityDuration = resetLastActivity(activityDuration);
+    }, passiveSupported ? { passive: true } : false);
+}
+function resetLastActivity(activityDuration) {
+    return {
+        ...activityDuration,
+        timeSinceLastActivity: 0,
+    };
+}
+/*
+ Add listeners to a set of browser events.
+ */
+function addEventListeners(events, handler, options) {
+    return events.map((eventName) => {
+        if (pulse_utils_1.isBrowser) {
+            window.addEventListener(eventName, handler, options);
+        }
+        return [eventName, handler];
+    });
+}
+/*
+ Remove a set of listeners for browser events.
+ */
+function removeEventListeners(eventListeners, options = {}) {
+    for (const [eventName, listener] of eventListeners) {
+        if (pulse_utils_1.isBrowser) {
+            window.removeEventListener(eventName, listener, options);
+        }
+    }
+    throttledUpdateFn.cancel();
+    return [];
+}
+const calculateViewPercentage = (scrolledPixels, scrollHeight) => Math.round((100 * scrolledPixels) / scrollHeight);
+// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#safely_detecting_option_support
+const isPassiveSupported = () => {
+    let passiveSupported;
+    if (passiveSupported !== undefined) {
+        return passiveSupported;
+    }
+    try {
+        const options = {
+            get passive() {
+                passiveSupported = true;
+                return false;
+            },
+        };
+        const noop = () => { };
+        window.addEventListener('test', noop, options);
+        window.removeEventListener('test', noop);
+    }
+    catch (_err) {
+        passiveSupported = false;
+    }
+    return passiveSupported;
+};

package/dist/cjs/leaveTracking/types.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrowserEvents = void 0;
+/**
+ * Currently supported browser events
+ */
+var BrowserEvents;
+(function (BrowserEvents) {
+    BrowserEvents["BEFORE_UNLOAD"] = "beforeunload";
+    BrowserEvents["PAGE_HIDE"] = "pagehide";
+    BrowserEvents["POP_STATE"] = "popstate";
+    BrowserEvents["VISIBILITY_CHANGE"] = "visibilitychange";
+    BrowserEvents["SCROLL"] = "scroll";
+    BrowserEvents["RESIZE"] = "resize";
+    BrowserEvents["MOUSEDOWN"] = "mousedown";
+    BrowserEvents["MOUSEMOVE"] = "mousemove";
+    BrowserEvents["KEYDOWN"] = "keydown";
+    BrowserEvents["TOUCHSTART"] = "touchstart";
+})(BrowserEvents || (exports.BrowserEvents = BrowserEvents = {}));

package/dist/cjs/leaveTrackingTpaas/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PAGE_LEAVE_EVENT = exports.DEFAULT_ACTIVITY_DURATION = void 0;
+const DEFAULT_ACTIVITY_DURATION = () => ({
+    value: 0,
+    interval: undefined,
+    timeSinceLastActivity: 0,
+});
+exports.DEFAULT_ACTIVITY_DURATION = DEFAULT_ACTIVITY_DURATION;
+const DEFAULT_PAGE_LEAVE_EVENT = () => ({
+    objectViewPercentage: 0,
+    maxObjectViewPercentage: 0,
+    pageViewPercentage: 0,
+    maxPageViewPercentage: 0,
+    pageScrollPosition: 0,
+    maxPageScrollPosition: 0,
+});
+exports.DEFAULT_PAGE_LEAVE_EVENT = DEFAULT_PAGE_LEAVE_EVENT;