Skip to content

Instantly share code, notes, and snippets.

@marklchaves
Last active March 3, 2025 10:29
Show Gist options
  • Save marklchaves/03b7a75318851f463b21dc8563022f9a to your computer and use it in GitHub Desktop.
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).
<?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/
*/
@marklchaves
Copy link
Author

We recommend setting a cookie to stop showing the popup over and over. For the code above, an "on close" cookie with no trigger should do the trick. Here's an example with the cookie's lifespan set 1 month.

pm-cookie-on-close-no-trigger

@marklchaves
Copy link
Author

marklchaves commented Mar 2, 2025

I refactored this snippet with the following changes.

  • It's more efficient and easier to maintain.
  • It uses more specific local storage variables to avoid trashing the global namespace.
  • You can now use it with other advanced targeting conditions like only showing the popup to non-admins and non-subscribers. See below.

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/

@marklchaves
Copy link
Author

Here's the screen capture for the ATC targeting rule example. I couldn't upload it to the comment above for some reason.

pm-atc-roles-not-admin-sub

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment