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
Popup ads are handled slightly different than regular display ads. According to the official documentation, the correct method is to:
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:
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.