How to create alternating popups and track engagement in WordPress using Popup Maker and JavaScript

How to create alternating popups and track engagement in WordPress using Popup Maker and JavaScript

When managing marketing or lead generation campaigns in WordPress, popups are a powerful way to promote offers, gather leads, or direct users to scheduling forms. However, displaying multiple popups intelligently — and tracking how often they’re seen or clicked — requires careful use of JavaScript and cookie logic.

This case study covers how Freshy’s development team implemented a dynamic popup rotation system and optional engagement tracking using Popup Maker and custom JavaScript.

Issue background

A client requested a system where two promotional popups would alternate visibility automatically, each appearing once per week and separated by 3–4 days.

Key requirements included:

• Only one popup should display at a time.
• Each popup should appear roughly twice per week, alternating in a rotation pattern.
• Popups should not appear on certain pages, such as Find a Location or Schedule Appointment.
• After clicking through a popup, form fields on the destination page should auto-populate based on user selection.

The site already used the Popup Maker plugin, but it lacked built-in scheduling or rotation logic.

Diagnosis

Popup Maker triggers popups through conditions and click events, but it doesn’t natively support rotation or timed display sequences. The team determined that a JavaScript-based scheduling logic would be the most flexible solution.

The approach would:

• Use cookies to determine which popup was last shown.
• Check the timestamp stored in the cookie and display the alternate popup if at least 3.5 days had passed.
• Reset automatically after 7 days (ensuring each popup is shown weekly).

Additionally, Popup Maker’s analytics fields were found to be placeholders — accurate conversion tracking required the Pro version with the Analytics extension.

Resolution steps

1. Implemented alternating popup logic
   A custom JavaScript function was written to alternate popup display based on the date of last interaction.

   const now = new Date();
   const lastPopup = localStorage.getItem('lastPopup');
   const lastShown = localStorage.getItem('lastShown');
   const diffDays = (now - new Date(lastShown)) / (1000 * 60 * 60 * 24);
   
   if (!lastPopup || diffDays >= 3.5) {
     const nextPopup = lastPopup === 'A' ? 'B' : 'A';
     PopupMaker.open(`#popup-${nextPopup}`);
     localStorage.setItem('lastPopup', nextPopup);
     localStorage.setItem('lastShown', now);
   }
   

   This code ensures popups “A” and “B” appear alternately, roughly twice a week.

2. Resolved overlapping triggers
   During testing, both the custom script and Popup Maker’s default trigger caused the same popup to appear twice — once immediately, then again after 3 seconds. The team removed the plugin’s built-in delay trigger and instead controlled timing via JavaScript.
3. Added form prefill functionality
   When a user clicked a popup’s “Book Now” button, they were redirected to the location selection page. The chosen location was stored in a cookie, and when users selected a location, the form automatically populated the “Guest Type” and “Medicine” fields with values like:
   • Guest Type: New Guest
   • Medicine: PRP

   This eliminated redundant user input and improved UX.

4. Improved accessibility and usability
   The popups were updated to open in the same browser tab (not a new one) to maintain accessibility and screen reader consistency. Minor CSS adjustments fixed misaligned close (“X”) buttons.
5. Prepared for engagement tracking
   The team confirmed that accurate click tracking could be achieved either by:
   • Activating Popup Maker Pro’s Analytics module (recommended), or
   • Implementing a custom JavaScript counter that logs clicks to the database via AJAX.

Final outcome

The new system achieved:

• Automated popup alternation every 3.5 days.
• Smooth user experience with proper timing and cookie-based memory.
• Prefilled form data for users clicking through popups, improving conversions.
• Full compliance with accessibility standards by ensuring links opened in the same tab.

For future scalability, the site can easily integrate Popup Maker’s Pro version for click tracking — or extend the JavaScript tracking to record engagement data in Google Analytics or the WordPress database.

Need help with advanced popup logic or marketing automation in WordPress?
Freshy’s developers specialize in integrating plugins like Popup Maker with custom JavaScript solutions for smarter engagement and analytics. Contact our WordPress experts today.