Google DFP異步代碼上的自定義代碼

Question

我需要使用自定義代碼在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 -->`

Answer 1

代碼示例就是廣告素材中指定的代碼嗎？

問題與您所說的完全一樣！ 它在同步版本中起作用的原因是因為代碼直接插入到DOM中。 在異步情況下，它位於寬度和高度為1px的iframe中。

我不太喜歡在廣告素材中包含這么多的HTML / CSS代碼。 有幾種解決方案：

1. 使用富媒體提供商（花費金錢以及“簡單”的事情，我會采用方法2）
2. 編寫JS解決方案（我相信這就是RMP的工作方式，但我尚未對其進行調查）

方法二：

編寫一些在廣告素材中調用的JS來設置iframe的寬度和高度或（以及我喜歡的）

在您的廣告素材中，編寫類似

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

所有HTML和CSS（#AdTakeover的背景圖片CSS除外）代碼都可以移至html / css-folders網站。

您可以將interstitial-html添加到每個帶有顯示的頁面：無。 調用此函數后，您可以將其更改為顯示：阻止和更新所需的DOM元素（鏈接，＃AdTakeover上的行內樣式為背景的圖像）等。