If not logged in, show a popup on regular time intervals

show_popup_regular_time_intervals.php

<?php
/**
 * Requirements
 * 
 * 1. Initial Display
 *   - Given I am a non-logged-in visitor
 *   - When I spend (e.g.,) 5 cumulative minutes on the site (across page views)
 *   - Then the popup appears
 * 2. Repetition After Close
 *   - Given the popup has been displayed and I close it
 *   - When I spend another 5 cumulative minutes on the site
 *   - Then the popup appears again
 * 3. Close Trigger
 *   - Given the popup is currently displayed
 *   - When I close/dismiss the popup
 *   - Then the timer resets to 0 and begins counting the next 5-minute interval
 * 4. Indefinite Repetition
 *   - Given I continue browsing the site
 *   - When each 5-minute interval completes after closing the previous popup
 *   - Then the popup appears again indefinitely
 */
add_action('wp_footer', function () {
	// If the visitor is logged in, bail now.
	// I.e., don't run any of this code if the person is logged in.
	if (is_user_logged_in()) {
		return;
	}
?>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			const popupId = 57652; // Change this to your popup ID.
			const yourCutOffTime = 300000; // 300000 ms = 5 Min. 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();
				}
			}

			// HEADS UP: DO NOT set a cooking in your trigger settings because this code
			// forces the popup to open on your set time interval after the popup closes.
			function showPopup() {
				PUM.open(popupId);
				/* DEPRECATED
				// Only open the popup if there isn't the default cookie set.
				if (!PUM.getCookie(`pum-${popupId}`)) {
					PUM.open(popupId);
				}
				*/
			}

			// Reset timer after popup closes to start the next 5-minute interval
			function resetTimer() {
				totalTime = 0;
				startTime = new Date();
				localStorage.setItem(storageTotalTime, totalTime);
				localStorage.setItem(storageStartTime, startTime.toISOString());
				schedulePopup();
			}

			// 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();

				// Listen for popup close event to reset timer for next interval
				$(document).on('pumAfterClose', `#pum-${popupId}`, function() {
					resetTimer();
				});

				$(window).on("beforeunload", function() {
					updateTimeSpent();
				});
			}
		}); // jQuery
	</script>
<?php
});