Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Randomly Display Banner Popups or Display Banner Popups for A/B (Split) Testing
<?php // Ignore this first line when copying to your child theme's functions.php file.
function display_random_banner_popups() { ?>
<script type="text/javascript">
jQuery(document).ready(function ($) {
// Customize these variables.
// ----------------------------------
const popups = [1100, 1102, 1104], // Comma separated popup IDs.
cookieName = "pum-split-test", // Cookie name for the A/B test only.
cookieTime = "1 minute"; // Cookie timer.
// ------------------------------
// End Customizations.
let chosenPopup = false; // Empty placeholder.
let activePopups = [...popups]; // Clone the master list of popups for pure randomization.
function randomPopup() {
// Prune any popup that has a cookie set before randomizing.
activePopups.forEach(pop => {
if ($.pm_cookie(`pum-${pop}`)) {
activePopups = activePopups.filter((p) => p !== pop);
}
});
//console.log("After the prune: ", activePopups);
return activePopups[Math.floor(Math.random() * activePopups.length)];
}
// For A/B testing
function getChosenPopup() {
let popup, cookie;
if ($.pm_cookie === undefined) {
return 0;
}
cookie = parseInt($.pm_cookie(cookieName)) || false;
// If the cookie contains a value use it.
if (cookie > 0 && popups.indexOf(cookie) !== -1) {
popup = cookie;
} else if (!cookie) {
popup = randomPopup();
$.pm_cookie(cookieName, popup, cookieTime, "/");
}
return popup;
}
// Show only the chosen popup for A/B testing.
// Otherwise, show a random popup that doesn't have
// a cookie set.
$(document).on("pumBeforeOpen", ".pum", function () {
let $this = $(this),
ID = $this.popmake("getSettings").id;
if (!chosenPopup) {
// chosenPopup = getChosenPopup(); // Uncomment for A/B testing.
chosenPopup = randomPopup(); // For random popups.
}
//if (popups.indexOf(ID) >= 0 && ID !== chosenPopup) { // Uncomment for A/B testing
if (activePopups.indexOf(ID) >= 0 && ID !== chosenPopup) { // Comment this if you want to do A/B testing
$this.addClass("preventOpen");
} else {
$this.removeClass("preventOpen");
}
}); // Listener
/** The below is optional */
// Push down
$(`#pum-${popups[0]}, #pum-${popups[1]}, #pum-${popups[2]}`).on(
"pumAfterOpen",
function () {
$("body").css("margin-top", "135px"); // Change the 135px to the height of your popup.
}
); // Listener
// Pull up
$(`#pum-${popups[0]}, #pum-${popups[1]}, #pum-${popups[2]}`).on(
"pumAfterClose",
function () {
$("body").css("margin-top", "0");
}
); // Listener
/** End optional stuff */
}); // jQuery
</script>
<?php }
add_action( 'wp_footer', 'display_random_banner_popups', 500 );
/**
* You can add the PHP code snippet to your child theme's functions.php file
* or with third-party plugins such as My Custom Functions and Code Snippets.
*
* Learn more:
* - https://docs.wppopupmaker.com/article/84-getting-started-with-custom-js
* - https://docs.wppopupmaker.com/article/552-getting-started-with-custom-php
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment