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

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