Google DFP 异步代码上的自定义代码答案

【问题标题】：Custom code on Google DFP asynchronous tagGoogle DFP 异步代码上的自定义代码
【发布时间】：2016-08-17 00:27:59
【问题描述】：

我需要使用自定义代码在 Google DFP 上投放广告系列，该代码将在我的网站上方添加一个全屏响应式 div。问题出在这里：它只能使用同步的 Google DFP 代码，而不是异步的——而且它必须是异步的。

我真的不知道问题出在哪里（也许 adsize 是 1x1 并且 iFrame 不知道它应该扩展的事实？也许我的整个代码应该在 iFrame 之外？），但我知道使用友好 iFrame 加载广告...

我怎样才能做到这一点？

这是应该出现在我的网站上方的代码。

<!-- INTERSTITIAL -->
<div class="container-fluid">
  <a href="%%CLICK_URL_UNESC%%[%URL%]" target="[%TARGET%]">
  <div id="AD_TakeOver">
<span class="FloatRight Exo PaddingRight16" style="position: fixed; right: 8px;" title="Anuncie você também no JUDÃO! Entre em contato. :)">
<svg style="vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000" height="16" width="16"><path d="M1840.478 1080.596l61.522-426.8-397.714 61.775 240.748-329.09-333.15-243.29-264.875 362.072-51.6-331.62L668.593 114l66.246 425.767L98 328.564l394 544.24-302.02 46.91-61.522 426.798 454.81-70.64-268.363 366.838L648.055 1886l244.294-333.94 42.535 273.38 426.96 60.56-65.61-421.678 362.303 264.58 243.462-332.8-367.053-268.05z" fill="#FFF"/></svg> PUBLICIDADE</span>

<div class="Bottom" style="text-align: center;">
<svg style="margin-top: 62px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 306 306"><path fill="#FFF" d="M270.3 58.65L153 175.95 35.7 58.65 0 94.35l153 153 153-153"/></svg>
</div>
  </div></a>
    </div>

<style>
#AD_TakeOver{
background-image: url("[%IMAGE%]");
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;

background-size:cover!important;
background-attachment:fixed!important;
background-position:center!important;
background-repeat:no-repeat!important;
height: 100vh;
position:relative;
border-bottom:8px SOLID #000;
border-top:1px SOLID #000;
color:#FFF; }

#AD_TakeOver .Bottom {
position:absolute;
bottom:0;
background-color:transparent!important;

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAB4CAQAAAEFAdueAAAAhUlEQVQoz3WQ0Q5DIQhDTwtu///He9jVobKEkFKaFgWZMGmGGeY1613wMGkS/AW7sopHEct4r5j9qOzIKPpqIrChc15YJgufpa9E/w+906NErK32xOe8DiOEjLABjIhnvFoYn9s5mlwolrjjjq12XdaMy6CzUsPZuNzcPUbV4FjUL/mN+gBXngOnAbq0QwAAAABJRU5ErkJggg==) repeat-x;

background-size:2px 120px;
border-bottom:0!important;
overflow:hidden!important;
height:120px!important;
max-height:120px!important;
width:100%;
vertical-align:bottom;
line-height:120px;}

</style>
<!-- /INTERSTITIAL -->`

【问题讨论】：

标签： javascript jquery asynchronous iframe google-dfp

【解决方案1】：

所以代码示例是在广告素材中指定的代码？

问题和你说的完全一样！它在同步版本中工作的原因是代码直接插入到 DOM 中。在异步的情况下，它位于宽度和高度为 1px 的 iframe 内。

我不喜欢在广告素材中包含这么多 HTML/CSS 代码。有几个解决方案：

使用富媒体提供商（要花钱，对于这种“简单”的东西，我会采用方法 2）
写一个JS解决方案（我相信RMP是这样工作的，但我没有研究过）

方法二：

要么编写一些在广告素材内部调用的 JS 来设置 iframe 的宽度和高度，要么（以及我更喜欢的）

在您的广告素材中，写下类似

的内容

<script>
showInterstitial('%%CLICK_URL_UNESC%%[%URL%]', '[%TARGET%]', '[%IMAGE%]')
</script>

所有 HTML 和 CSS（#AdTakeover 的背景图像 css 除外）代码都可以移动到网站 html/css-folders。

您可以使用 display: none 将 interstitial-html 添加到每个页面。调用此函数后，您可以将其更改为显示：阻止和更新所需的 DOM 元素（链接、#AdTakeover 上具有内联样式的背景图像）等。

【讨论】：