salsify-experiences-sdk
Version:
SDK to be used by commerce websites to implement product experiences.
66 lines • 2.85 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const timeout_1 = __importDefault(require("./timeout"));
class TimeOnPageTracker {
#logger;
#ecApi;
#timeOnPage = 0; // The total time on page
#timeOnPageSessionStart = Date.now(); // The current time on page session start time
#visibilitychangeHandler;
#beforeunloadHandler;
#timeout;
constructor(logger, ecApi) {
this.#logger = logger;
this.#ecApi = ecApi;
this.#visibilitychangeHandler = this.#visibilitychangeCallback.bind(this);
this.#beforeunloadHandler = this.sendEvent.bind(this);
this.#timeout = new timeout_1.default();
}
start() {
document.addEventListener('visibilitychange', this.#visibilitychangeHandler);
window.addEventListener('beforeunload', this.#beforeunloadHandler);
this.#timeout.start(this.sendEvent.bind(this));
}
stop() {
document.removeEventListener('visibilitychange', this.#visibilitychangeHandler);
window.removeEventListener('beforeunload', this.#beforeunloadHandler);
this.#timeout.clear();
}
restart() {
this.stop();
this.#timeOnPage = 0;
this.#timeOnPageSessionStart = Date.now();
this.start();
}
sendEvent() {
const currentTime = Date.now();
this.#timeOnPage += (currentTime - this.#timeOnPageSessionStart) / 1000;
this.#timeOnPageSessionStart = currentTime;
this.#logger.log('time_on_page', {
timeOnPage: this.#timeOnPage,
lastEcRenderConfig: this.#ecApi?.lastRenderConfig,
});
}
#visibilitychangeCallback() {
// document.visibilityState returns the current visibility state of the document.
// It returns these states as “hidden“, “visible”, and “prerender”.
// - hidden means the current tab is not in focus, either switched to another tab, minimized, or closed
// - visible means the current tab is in focus
// - prerender means the page has been loaded but the user has not viewed the page
if (document.visibilityState === 'visible') {
// If the document is change to visible, reset the session start time and continue the timeout
this.#timeOnPageSessionStart = Date.now();
}
else {
// If the document is not visible, it means the user is swtiching to another tab or closing the tab
// Calculate the time on page and log it, also remove the timeout
this.sendEvent();
this.#timeout.clear();
}
}
}
exports.default = TimeOnPageTracker;
//# sourceMappingURL=time-on-page-tracker.js.map