How to Implement a Popup Ad Using Google Publisher Tags (GPT) – Interstitial ads

Advertising is a crucial revenue stream for publishers, and Google Ad Manager (GAM) provides multiple ways to serve ads effectively. One such method is implementing a popup ad using Google Publisher Tags (GPT). Additionally, Google Adx offers codeless web interstitial ads that automatically serve without requiring developers to add scripts manually. In this article, we will explore both approaches.

The following JavaScript code dynamically injects a popup ad into the webpage using Google Publisher Tags (GPT). This implementation ensures that ads are displayed only at specified intervals, reducing user disruption.

(function() {
  // Load Google Publisher Tag (GPT) asynchronously
  var gptScript = document.createElement('script');
  gptScript.src = 'https://securepubads.g.doubleclick.net/tag/js/gpt.js';
  gptScript.async = true;
  document.head.appendChild(gptScript);

  // Create the ad popup container
  var atdadPopup = document.createElement('div');
  atdadPopup.id = 'ad-popup';
  atdadPopup.style.cssText = `
    min-width: fit-content;
    position: relative;
    min-height: 200px;
    display: none; /* Initially hidden */
    top: 1rem;
    bottom: 1rem;
    background-color: transparent;
    border-radius: 1px;
  `;
  document.body.appendChild(atdadPopup);

  // Create fixed-width container within the popup (for centering, etc.)
  var fixedWidthDiv = document.createElement('div');
  fixedWidthDiv.className = 'fixed-width';
  fixedWidthDiv.style.cssText = `
    width: fit-content;
    padding: 0px;
    box-shadow: 0px 10px 20px rgba(128, 128, 128, 0.645);
    border-radius: 2px;
    overflow: hidden;
  `;
  atdadPopup.appendChild(fixedWidthDiv);


  // Create branding element
  var brandingDiv = document.createElement('div');
  brandingDiv.id = 'desktop-branding';
  var brandLink = document.createElement('a');
  brandLink.id = 'brand-name';
  brandLink.href = ""; // Add your brand link here
  brandLink.textContent = "adtagmacros";
  brandLink.style.cssText = "color: #206cd7; text-decoration: none;"; // Example styling
  brandingDiv.appendChild(brandLink);
  fixedWidthDiv.appendChild(brandingDiv);

  // Create close button
  var closeButtonDiv = document.createElement('div');
  closeButtonDiv.id = 'close-popup';
  closeButtonDiv.style.cssText = `
    width: fit-content;
    height: 16px;
    position: absolute;
    top: -1.2rem;
    right: -0.5rem;
    display: none; /* Initially hidden */
    flex-direction: row;
    justify-content: end;
    align-items: center;
    color: gray;
    font-family: helvetica, sans-serif;
  `;
  var closeButton = document.createElement('span');
  closeButton.className = 'close-btn';
  closeButton.textContent = 'x';
  closeButton.style.cssText = `
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: black;
    color: white;
    border: 1px solid black;
    cursor: pointer;
    font-weight: bolder;
  `;
  closeButtonDiv.appendChild(closeButton);
  fixedWidthDiv.appendChild(closeButtonDiv);


  // Create the ad container
  var adContainer = document.createElement('div');
  adContainer.id = 'adtagmacrospopupad';
  fixedWidthDiv.appendChild(adContainer);

  // Add media query for close button positioning
  var style = document.createElement('style');
  style.textContent = `
    @media(max-width:559px) {
      #close-popup {
        right: 1rem;
        padding: 0px 10px;
      }
    }
  `;
  document.head.appendChild(style);


  // Initialize GPT
  window.googletag = window.googletag || { cmd: [] };
  let adDisplayed = false; // Flag to track if the ad has been displayed

  googletag.cmd.push(function() {
    var adSlot = googletag.defineSlot('GoogleAdManager_Code_HERE', [[320, 480], [336, 280], [480, 320], [400, 300], [300, 300], [640, 480]], 'adtagmacrospopupad')
      .addService(googletag.pubads());

    googletag.pubads().addEventListener('slotRenderEnded', function(event) {
      if (event.slot === adSlot && event.isEmpty) {
        adContainer.style.display = 'none'; // Hide if ad didn't load
      }
    });

    googletag.enableServices();
  });


  // Popup display logic
  var scrollThreshold = document.documentElement.scrollHeight * 0.3;
  var displayFrequencyMinutes = 15; // Time in minutes

  var lastDisplayedTime = localStorage.getItem('lastDisplayed');
  var currentTime = new Date().getTime();

  if (!lastDisplayedTime || currentTime - lastDisplayedTime >= displayFrequencyMinutes * 60 * 1000) {
    window.addEventListener('scroll', function() {
      if (window.pageYOffset >= scrollThreshold && !adDisplayed) {
        googletag.cmd.push(function() {
          googletag.display('adtagmacrospopupad');
        });

        atdadPopup.style.display = 'flex';
        atdadPopup.style.width = '100%';
        atdadPopup.style.height = '100vh';
        atdadPopup.style.position = 'fixed';
        atdadPopup.style.top = 0;
        atdadPopup.style.left = 0;
        atdadPopup.style.flexDirection = 'column';
        atdadPopup.style.justifyContent = 'center';
        atdadPopup.style.alignItems = 'center';
        atdadPopup.style.zIndex = '999999999999';

        closeButtonDiv.style.display = 'flex';
        fixedWidthDiv.style.display = 'block';

        localStorage.setItem('lastDisplayed', new Date().getTime());
        adDisplayed = true;
      }
    });
  }

  // Close button functionality
  closeButton.addEventListener('click', function() {
    atdadPopup.style.display = 'none';
  });

})();

For publishers who prefer a simpler approach, Google Ad Manager provides codeless web interstitial ads that do not require any additional JavaScript implementation. These ads can be set up directly in GAM’s UI and will trigger automatically based on predefined rules.

• Go to Google Ad Manager: Navigate to Inventory > Ad Units.
• Create a new ad unit: Choose an interstitial format for display ads.
• Set targeting conditions: Define when the interstitial should trigger (e.g., after a user navigates to a new page or after a time delay).
• Save and implement: Once configured, the ad will start appearing without any code changes on your website.

• No need to modify website code.
• Ads trigger dynamically based on user behavior.
• Managed directly from GAM UI, reducing development effort.

Codeless Ad unit Creation