Given a list of popups, you can randomly display one for a given browser session. This guide gives you custom code to let you do that.
The JavaScript code below saves a cookie so that only the chosen option can be viewed by the same visitor for a browser session. That means you can run basic split tests with Popup Maker popups.
Make sure you track your popup open stats with the Popup Analytics Extension or another analytics tool.
If you’re new to using JavaScript with Popup Maker, check out our Getting Started with Custom JavaScript Doc.
Remember to customize the code variables as shown in the code sample below.
jQuery(document).ready(function($) {
// Define the configuration variables for the A/B split test.
const popups = [388, 407], // Comma-separated popup IDs. Change to your popup IDs.
cookieName = 'pum-atc-split-test', // Cookie name for this specific test. Change the name to what you want.
cookieTime = '1 month'; // Duration for the cookie to be stored. You can change this too.
// This variable will hold the ID of the chosen popup. It is initialized to false.
let chosenPopup = false;
/**
* Selects and returns a random popup ID from the `popups` array.
*
* This runs when there's no split test cookie set yet.
*/
function randomPopup() {
return popups[Math.floor(Math.random() * popups.length)];
} // Closes randomPopup()
/**
* Retrieves the chosen popup ID.
*
* - It first checks if a cookie with the chosen popup already exists.
* - If a valid cookie is found, it returns that popup ID.
* - Otherwise, it calls randomPopup() to get a new one and sets the cookie.
*/
function getChosenPopup() {
let popup;
let cookie;
// Return 0 if the cookie function is not available.
if ($.pm_cookie === undefined) {
return 0;
} // Closes if ($.pm_cookie === undefined)
// Attempt to retrieve and parse the cookie value.
cookie = parseInt($.pm_cookie(cookieName)) || false;
// If the cookie contains a valid popup ID from our array, use it.
if (cookie > 0 && popups.indexOf(cookie) !== -1) {
popup = cookie;
// If no cookie exists, choose a random popup and set the cookie.
} else if (!cookie) {
popup = randomPopup();
$.pm_cookie(cookieName, popup, cookieTime, '/');
} // Closes if/else if
return popup;
} // Closes getChosenPopup()
/**
* Event listener that fires before any popup opens.
*
* It checks if the popup is part of our split test and prevents it
* from opening if it was not the one chosen for the session.
*/
$(document).on('pumInit', '.pum', function() {
const $this = $(this);
const popupId = $this.popmake('getSettings').id;
// If the chosen popup hasn't been determined yet, get it.
if (!chosenPopup) {
chosenPopup = getChosenPopup();
} // Closes if (!chosenPopup)
// Check if the opening popup is in our test group but is NOT the chosen one.
if (popups.indexOf(popupId) >= 0 && popupId !== chosenPopup) {
// If it's not the chosen one, add a class to prevent it from opening.
$this.addClass('preventOpen');
} else {
// Otherwise, ensure the 'preventOpen' class is not present.
$this.removeClass('preventOpen');
} // Closes if/else
}); // Closes $(document).on()
}); // Closes jQuery(document).ready()
