Last active
March 3, 2025 10:29
-
-
Save marklchaves/03b7a75318851f463b21dc8563022f9a to your computer and use it in GitHub Desktop.
Launch popup after time on site is more than 1 minute (regardless of how many pages visited).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php // Ignore this first line when copying to your child theme's functions.php file. | |
/** | |
* This is an example of how to launch a Popup Maker popup after time on site is more | |
* than 1 minute (regardless of how many pages visited). | |
* | |
* Run this action at 500 priority. | |
* | |
* Change the popupId value to your popup's ID https://wppopupmaker.com/docs/manage-features-or-options/find-the-popup-id/ | |
* | |
* Change the time-on-site (milliseconds) to what you need. The default is 60000 milliseconds | |
* (i.e., 1 minute). | |
* | |
* @since 1.0.0 | |
* | |
* @return void | |
*/ | |
add_action( 'wp_footer', function() { | |
?> | |
<script type="text/javascript"> | |
jQuery(document).ready(function ($) { | |
const popupId = 14; // Change this to your popup ID. | |
const yourCutOffTime = 60000; // 60 seconds. Change to what you want in milliseconds. | |
// The names of our local storage variables. | |
const storageStartTime = "pumStartTime"; | |
const storageTotalTime = "pumTotalTime"; | |
let startTime; | |
let totalTime = parseInt(localStorage.getItem(storageTotalTime)) || 0; | |
let timeoutId; | |
function initializeTimeTracking() { | |
if (localStorage.getItem(storageStartTime)) { | |
startTime = new Date(localStorage.getItem(storageStartTime)); | |
} else { | |
startTime = new Date(); | |
localStorage.setItem(storageStartTime, startTime.toISOString()); | |
} | |
schedulePopup(); | |
} | |
function updateTimeSpent() { | |
if (startTime) { | |
let endTime = new Date(); | |
let pageTime = endTime - startTime; | |
totalTime += pageTime; | |
localStorage.setItem(storageTotalTime, totalTime); | |
localStorage.setItem(storageStartTime, endTime.toISOString()); | |
startTime = endTime; | |
schedulePopup(); | |
} | |
} | |
function schedulePopup() { | |
clearTimeout(timeoutId); | |
let timeRemaining = yourCutOffTime - totalTime; // Your cutoff time - current total | |
if (timeRemaining > 0) { | |
timeoutId = setTimeout(showPopup, timeRemaining); | |
} else if (totalTime >= yourCutOffTime) { | |
showPopup(); | |
} | |
} | |
// You should define an "on close" popup cookie in your trigger settings. | |
// See the screen capture in the comment below. | |
function showPopup() { | |
// Only open the popup if there isn't the default cookie set. | |
if (!PUM.getCookie(`pum-${popupId}`)) { | |
PUM.open(popupId); | |
} | |
// Always clean up local storage when you're done! | |
localStorage.removeItem(storageTotalTime); | |
localStorage.removeItem(storageStartTime); | |
} | |
// Before we do anything, make sure the popup is on the page. | |
if ($(`#pum-${popupId}`).length) { | |
//console.log("The time-on-site popup is getting ready!"); | |
initializeTimeTracking(); | |
$(window).on("beforeunload", function () { | |
updateTimeSpent(); | |
}); | |
} | |
}); // jQuery | |
</script> | |
<?php | |
} ); | |
/** | |
* New to adding custom JavaScript to WordPress? Read this. | |
* | |
* Getting Started With Custom JavaScript https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-js/ | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I refactored this snippet with the following changes.
Advanced Targeting Conditions (ATC) Example
The rule pictured below means only non-admins and non-subscribers can see this popup.
I.e., whoever isn't an admin and isn't a subscriber and stays on the site for more than 1 minute, will see this popup.
Screen capture of a targeting rule example: https://share.wppopupmaker.com/5zuRlbB4
Note: Make sure the not operator (!) is active (red).
Learn more about the Popup Maker Advanced Targeting Conditions Pro extension https://wppopupmaker.com/extensions/advanced-targeting-conditions/