Ad Manager (DFP) popup banner

Question

I want to create a pop-up banner that serves Google Ad Manager ads.

It needs to be floating and to have X (CLOSE) in the top right corner. Popup needs to show up only if there is an active ad in Google Ad Manager.

Here is code example that I use:

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.defineSlot('/108655xxx/posao-desktop-popup', [[320, 480], [300, 300], [500, 500]], 'div-gpt-ad-1656934240929-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
 });
</script>

<div style="left: 50%; transform: translate(-50%, 0);text-align: center;position: fixed;z- 
index: 9999;bottom: 0px;">
<div id='div-gpt-ad-1656934240xxx-0'>
<span onclick="this.parentElement.parentElement.style.display = 'none';" style="color: white; position: absolute; top:3px; cursor: pointer; right:3px; background: rgba(0,0,0,0.5); padding: 2px 5px;">✕</span>

 <script>
 googletag.cmd.push(function() { googletag.display('div-gpt-ad-1656934240xxx-0'); });
 </script>
</div>

At desktop version of our website, close (X) button don't show up: https://prnt.sc/eqA1NRPjDgrq And at mobile version of website, X showing even if there is no ads: https://prnt.sc/joCddWsfKCvP

Best Regards

Answer 1

Popup ads are handled slightly different than regular display ads. According to the official documentation, the correct method is to :

1. define an out of page slot (details here)
2. handle the rendering style within a custom template (details here)

First, we declare the out of page ad unit :

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
//out-of-page ads.
  googletag.defineOutOfPageSlot('/xxxxxx/abcd', 'out-of-page-ad').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
 });
</script>

<div id='out-of-page-ad'>
 <script>
 googletag.cmd.push(function() { googletag.display('out-of-page-ad'); });
 </script>
</div>

Second, you need to create a custom template in the Google Ad Manager UI. This way, you make sure the popup rendering style is managed in the adserver. Two things to keep in mind :

• your creative will be served within an iframe. Then you will have to choose between styling the ad iframe or creating a new dom node for your popup ad.
• an out of page ad iframe has a 1x1 size by default

Here is a code sample you play work with :

<script>
var link = document.createElement('a');
        link.href = '%%CLICK_URL_UNESC%%%%DEST_URL%%';
        link.setAttribute('target', '_blank');
        link.style = 'position:fixed;z-index:9999;bottom:0px;left: 50%; transform: translate(-50%, 0);';
    
var popup = document.createElement('img');
        popup.src='[%creativeFile%]';
        popup.width = '320';
        popup.height = '480';

var close = document.createElement('span');
        close.style = 'color: white; position: absolute; top:3px; cursor: pointer; right:3px; background: rgba(0,0,0,0.5); padding: 2px 5px;z-index:10000;';
        close.innerHTML = 'X';
        close.onclick = function() { 
            link.style.display = 'none';
        };

top.document.body.appendChild(link)
link.appendChild(popup);
link.appendChild(close);

</script>
<!-- to make sure you count an impression -->
<img src="%%VIEW_URL_ESC%%" width="1" height="1" border="0" />

Of course, there are other ways to handle that kind of rendering (you could prepare a dedicated DOM node and the templates only fills the variables (image src, a href, size...etc). The previous code is a sample so you can work with and find the best solution.

Note : depending on the user ad experience you want to achieve, you could be interested in looking at their "web interstitial ad" (beta) solution detailed here and here.