Google DFP异步标记上的自定义代码
Custom code on Google DFP asynchronous tag
我需要使用自定义代码在Google DFP上运行一个活动,该代码将在我的网站上方添加一个全屏响应div。这里的问题是:它只是使用同步的GoogleDFP标签工作,而不是异步的——而且它必须是异步的。
我真的不知道问题是什么(也许是因为adsize是1x1,iFrame不知道它应该扩展?也许我的整个代码应该在iFrame之外?),但我知道广告是使用Friendly 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 -->`
那么,代码示例就是在创造性?
问题正如你所说的那样!它在同步版本中工作的原因是因为代码是直接插入到DOM中的。在异步的情况下,它在一个宽度和高度为1px的iframe中。
我不太喜欢在创意中包含那么多HTML/CSS代码。有几个解决方案:
- 使用富媒体提供商(成本高昂,对于如此"简单"的事情,我会选择方法2)
- 编写一个JS解决方案(我相信RMP就是这样工作的,但我还没有研究过)
方法2:
要么写一些在创意内部调用的JS来设置iframe的宽度和高度,要么(我更喜欢)
在你的创意中,写一些类似的东西
<script>
showInterstitial('%%CLICK_URL_UNESC%%[%URL%]', '[%TARGET%]', '[%IMAGE%]')
</script>
所有的HTML和CSS(除了#AdTakeover的背景图像CSS)代码都可以移动到站点的HTML/CSS文件夹中。
您可以将间隙html添加到每个带有display:none的页面。调用此函数后,您可以将其更改为显示:阻止并更新所需的DOM元素(链接、#AdTakeover上具有内联样式的背景图像)等。
相关文章:
- AngularJS中货币过滤器的Javascript代码无法使用自定义符号
- 联系表单代码自定义
- 如何将自定义代码与drupal合并
- AJAX自定义错误处理代码问题
- 我使用谷歌标签管理器在我的网站上启动标签.变量“;未定义的“;在任何版本的Internet Explorer的自定义代码
- 在我的谷歌自定义搜索引擎从服务器获取数据后,我如何激发一些javascript代码
- 如何在Wordpress文件中添加自定义javascript代码"single.php”;
- ...不是 JavaScript {自定义代码} 中的函数
- 如何将自定义代码添加到prestashop
- 对 HTML5 项目使用自定义C++代码
- 在通过Modernizr加载jQuery之后运行自定义代码
- 如何在Chrome DevTools中运行自定义代码
- 在ASP.net MVC 3应用程序的头文件中添加自定义代码/脚本
- Jquery验证,如果有错误,我如何运行自定义代码
- 如何通过自定义代码在wordpress中上传图像
- 轻松地将自定义代码转换为Drupal模块
- Google DFP异步标记上的自定义代码
- Sencha应用程序构建原生覆盖我们的自定义代码
- jQuery 选项卡在移动设备中不起作用 - 自定义代码
- 是否有可能在每个Ajax请求中执行自定义代码,而无需手动将该代码添加到Ext Js中的每个Ajax代码中?