javascript 使通过 DFP 投放的广告完全响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19040380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making ads served through DFP fully responsive
提问by user2817462
I have modified GPT (Google Publisher Tags) so it serves on size ads for phones and tablets and the other size for computer or larger screens. It works well but sizes are determined on load and when using tablet the ads stay the same regardless if you flip from landscape to portrait view. I added the code to dynamically refresh the ads on windows resize and that works as far refreshing goes, but sizes are still determined (I assume) on load and ads sizes do not change. How can I “refresh / reload” variables (size and size2) on window resize before ads are refreshed?
This is the code:
我已经修改了 GPT（Google 发布商代码），因此它可以在手机和平板电脑的尺寸广告以及计算机或更大屏幕的其他尺寸广告上投放。它运行良好，但尺寸是在加载时确定的，并且在使用平板电脑时，无论您从横向视图切换到纵向视图，广告都保持不变。我添加了代码来动态刷新 windows 上的广告调整大小，并且在刷新范围内有效，但大小仍然在加载时确定（我假设）并且广告大小不会改变。如何在刷新广告之前“刷新/重新加载”窗口大小的变量（大小和大小 2）？
这是代码：
<script type='text/javascript'>
googletag.cmd.push(function() {
var width = document.documentElement.clientWidth;
var size;
if (width >= 320 && width < 728)
size = [320, 50]; // smartphones
else
size = [728, 90]; // desktops and tablets
var size2;
if (width >= 320 && width < 728)
size2 = [180, 150]; // smartphones
else
size2 = [160, 600]; // desktops and tablets
var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads());
var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads())
googletag.pubads().enableSingleRequest();
googletag.enableServices();
$(window).resize(function(){googletag.pubads().refresh([slot1, slot2])});
});
</script>
回答by Ryan Sander
You can now build responsive ads natively using DFP.
您现在可以使用 DFP 本地制作自适应广告。
var mapping = googletag.sizeMapping().
addSize([1024, 768], [970, 250]).
addSize([980, 690], [728, 90]).
addSize([640, 480], [120, 60]).
addSize([0, 0], [88, 31]).
// Fits browsers of any size smaller than 640 x 480
build();
adSlot.defineSizeMapping(mapping);
回答by j0nes
You are right, the sizes are only evaluated on page load. If you want to get the new display width after rotating the device, you would have to fetch the width in the resizecall (and probably redefine the adslots with these sizes).
您是对的，尺寸仅在页面加载时进行评估。如果您想在旋转设备后获得新的显示宽度，则必须在resize调用中获取宽度（并且可能重新定义具有这些尺寸的广告位）。
$(window).resize(function(){
var width = document.documentElement.clientWidth;
var size;
if (width >= 320 && width < 728)
size = [320, 50]; // smartphones
else
size = [728, 90]; // desktops and tablets
var size2;
if (width >= 320 && width < 728)
size2 = [180, 150]; // smartphones
else
size2 = [160, 600]; // desktops and tablets
var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads());
var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads())
googletag.pubads().enableSingleRequest();
googletag.pubads().refresh([slot1, slot2]);
});
This is untested, but I think this should take you to the right direction. If overwriting the adslots will not work, you can also think of creating four different adslots at the beginning and only show the ones based on the current screen size (and hide the others).
这是未经测试的，但我认为这应该带你走向正确的方向。如果覆盖广告位不起作用，您还可以考虑在开始时创建四个不同的广告位，仅显示基于当前屏幕尺寸的广告位（并隐藏其他广告位）。
回答by toby1kenobi
Google actually have a full example of refreshing your ads arbitrarily using the setTargetting API method. Here's the crux of it:
Google 实际上有一个使用 setTargetting API 方法随意刷新广告的完整示例。这是它的关键：
<script>
googletag.cmd.push(function() {
// Define the ad slot
var slot1 = googletag.defineSlot("/6355419/Travel", [728, 90], "leaderboard").
setTargeting("test", "refresh").
addService(googletag.pubads());
// Start ad fetching
googletag.enableServices();
googletag.display("leaderboard");
// Set timer to refresh slot every 30 seconds
setInterval(function(){googletag.pubads().refresh([slot1]);}, 30000);
});
</script>
And the rest of the details are here- any good?
其余的细节都在这里- 有什么好处吗？
Beyond that you just need to detect the orientation change - j0nes's method should work, there's also an orientationchange event - browser support is incomplete, but jQuery Mobile has a orientationchangewrapper (that falls back to resize).
除此之外，您只需要检测方向变化—— j0nes的方法应该可以工作，还有一个orientationchange 事件——浏览器支持不完整，但jQuery Mobile 有一个orientationchange包装器（回退到调整大小）。
Hope some of this helps!
希望有些帮助！
