Randomly Display Banner Popups or Display Banner Popups for A/B (Split) Testing

display_random_banner_popups.php

<?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
 */