Description
Right now, the "Time on Page" event type is firing even if the page is not in focus e.g., when the user clicked a link that opened in a new tab.
It would be great if there was an option that allows to pause the timer to only tick when the page is in focus.
Why is this feature important to you
This will improve the overall reliability of rules trigger by the Time on Page events, giving a more accurate view on actual user behavior on the page.
How would you like the feature to work
Add a checkbox that can be used to signal that only active time on the page shall be counted
Current Behaviour
The timer keeps ticking, even if I temporarily switch to another tab.
The dummy code below more or less shows the solution. Have it running in the console and switch between tabs to see how it stops and restarts the timer upon visibilitychange events.
// Sample code
let timer = 0; // Stores the elapsed time in seconds
let intervalId = null; // Stores the interval ID
let startTime = null; // Tracks when the timer started
// Function to start the timer
function startTimer() {
if (!intervalId) {
startTime = Date.now();
intervalId = setInterval(() => {
const currentTime = Date.now();
timer += Math.floor((currentTime - startTime) / 1000);
startTime = currentTime;
console.log(`Timer running: ${timer} seconds`);
}, 1000); // Update every second
}
}
// Function to stop the timer
function stopTimer() {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
}
}
// Event listener for visibility change
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
console.log("Page in focus. Timer started.");
startTimer();
} else {
console.log("Page out of focus. Timer stopped.");
stopTimer();
}
});
// Start the timer initially if the page is in focus
if (document.visibilityState === "visible") {
startTimer();
}