广告经理(DFP)弹出横幅

Question

我想创建一个弹出横幅，为谷歌广告经理的广告服务。

它需要浮动，并有X(关闭)在右上角。只有当谷歌广告管理器中有一个活跃的广告时，弹出窗口才会出现。

下面是我使用的代码示例：

<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>

在我们网站的桌面版本，关闭(X)按钮不显示：https://prnt.sc/eqA1NRPjDgrq和移动版的网站，X显示即使没有广告：https://prnt.sc/joCddWsfKCvP

诚挚的问候

Answer 1

弹出广告的处理方式与常规显示广告略有不同。根据正式文件，正确的方法是：

1. 定义一个页外槽(详细信息这里)
2. 处理自定义模板中的呈现样式(details 这里)

首先，我们宣布页外广告单位：

<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>

其次，您需要在中创建一个自定义模板。通过这种方式，可以确保在adserver中管理弹出呈现样式。有两件事要记住：

• 你的创意将被服务在一个iframe中。然后，您将不得不选择样式的广告，如果是为您的弹出广告创建一个新的dom节点。
• 页外广告iframe默认有1x1大小。

下面是您使用的代码示例：

<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" />

当然，还有其他处理这种呈现的方法(您可以准备一个专用的DOM节点，而模板只填充变量(image、href、size...etc)。前面的代码是一个示例，因此您可以使用并找到最佳解决方案。

注意:根据您想要获得的用户广告体验，您可能有兴趣查看他们的“网络间质广告”(beta)解决方案详细的这里和这里。