在 DFP 中根据浏览器宽度更改广告尺寸答案

【问题标题】：Changing Ad Size Based on Browser Width in DFP在 DFP 中根据浏览器宽度更改广告尺寸
【发布时间】：2016-10-26 03:22:46
【问题描述】：

在 DFP 广告管理系统标准版/DoubleClick 中，我为具有三种不同尺寸的广告单元生成了以下广告代码，并为每种指定尺寸生成了一个广告素材。因此，广告单元有三种不同的尺寸，当您点击刷新时，广告会变为我指定的三种广告尺寸之一。这很好用，但它不是我想要的广告做的，

我希望广告这样做：

我希望广告根据浏览器宽度更改尺寸，例如，如果观众浏览器宽度大于 800 像素，则以最大指定尺寸显示广告，如果浏览器宽度在 600-800 之间，则使用广告的第二大指定尺寸，最后，如果广告小于 600 像素，则使用最小的广告尺寸......广告应根据浏览器宽度的变化相应地改变尺寸。 800、600-800 和小于 600 不是实际尺寸，只是示例尺寸，但无论如何这三种广告尺寸都在此行中指定：

googletag.defineSlot('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207], [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads());

这里是完整的代码：

<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
 gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') + 
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>

 <script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207],     [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>

<!-- Different-Sizes-Unit-Test -->
<div id='div-gpt-ad-1363309773051-0'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1363309773051-0'); });
</script>

这是此代码的 jsfiddle（点击运行或刷新以查看广告随机更改大小）：

http://jsfiddle.net/Zkm5j/

同样，我希望广告根据浏览器宽度大小/变化相应地更改尺寸。如果有人能帮助我想出一个实现这一目标的方法，那对我来说真的意义重大！ :)

【问题讨论】：

当我尝试加载该 jsfiddle 时，我在结果窗口中看不到任何内容。加载 Google JS 文件的请求失败。出于 SO 的目的，通常最好重新表述问题并消除加载任何外部依赖项的需要（除非它们本身就是有问题的问题）。基本上，将问题减少到其核心元素并在 jsfiddle 中对其进行模拟。在任何情况下，您都应该能够通过根据浏览器大小有选择地向广告容器添加/删除类并让这些 CSS 类定义不同的宽度来做到这一点。
@RubenInfante 嘿，Ruben，广告现在应该显示了...stackoverflow.com/questions/15452905/… 里面有一个 jsfiddle！但是关于 DFP（谷歌广告）的问题是所有广告都在 iframe 中，因此您不能直接在 iframe 中操作图像。您必须为您想要的每种尺寸的广告上传图片。我坚持的部分是为不同的浏览器宽度加载给定的谷歌代码，我在问题中解释了更多，但感谢到目前为止的帮助，这意味着很多..我需要做的就是得到这个小东西工作:)

标签： javascript jquery google-dfp

【解决方案1】：

您应该使用 DFP 提供的映射功能

这是一个示例，其中一页上有 5 个广告单元。第 1 步：为每个广告单元定义所有可能的尺寸。在 DFP 的广告单元设置中定义这些尺寸。第 2 步：决定哪个广告单元将在哪个视口上使用哪个尺寸。使用变量 megaboardsize firstsize 等创建如下代码所示的尺寸映射。第 3 步：定义插槽和适当的定义映射，如下所示。

在示例中，尺寸将在广告单元中投放，如下所示： 广告单元 - example-megaboard：在视口宽度超过 970 像素的设备上：970x90,970x250,728x90。在视口宽度超过 728 像素的设备上：728x90。在所有视口较小的设备上：320x100,320x50 广告单元 - /XXX/example-300x250-1st：在视口宽度超过 920 像素的设备上：300x250,300x600。在视口宽度超过 300 像素的设备上：300x250。在所有视口较小的设备上：无广告。

等等……

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>
var gptAdSlots = [];
googletag.cmd.push(function() {

    var megaboardsize = googletag.sizeMapping().addSize([970, 0], [[970,90],[970,250],[728,90]]).addSize([728, 0], [728, 90]).addSize([0, 0], [[320, 100],[320,50]]).build();
    var firstsize = googletag.sizeMapping().addSize([920, 0], [[300,250],[300,600]]).addSize([300, 0],[300,250]).addSize([0, 0], []).build();
    var secondsize = googletag.sizeMapping().addSize([920, 0], [300,250]).addSize([0, 0],[]).build();  
    var thirdsize = googletag.sizeMapping().addSize([920, 0], [300,250]).build();  
    var fourthsize = googletag.sizeMapping().addSize([690, 0], [300,250]).addSize([0, 0],[]).build();

    gptAdSlots[0] = googletag.defineSlot('/XXX/example-megaboard', [[970, 90], [320, 100], [320, 50], [728, 90], [970, 250]], 'gpt-megaboard').defineSizeMapping(megaboardsize).addService(googletag.pubads());

    gptAdSlots[1] = googletag.defineSlot('/XXX/example-300x250-1st', [[300, 600], [300, 250]], 'gpt-1st').defineSizeMapping(firstsize).addService(googletag.pubads());

    gptAdSlots[2] = googletag.defineSlot('/XXX/example-300x250-2nd', [300, 250], 'gpt-2nd').defineSizeMapping(secondsize).addService(googletag.pubads());

    gptAdSlots[3] = googletag.defineSlot('/XXX/example-300x250-3rd', [300, 250], 'gpt-3rd').defineSizeMapping(thirdsize).addService(googletag.pubads());

    gptAdSlots[4] = googletag.defineSlot('/XXX/example-300x250-4th', [300, 250], 'gpt-4th').defineSizeMapping(fourthsize).addService(googletag.pubads());

    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
  });
</script>

【讨论】：

【解决方案2】：

您无法直接根据 dfp 配置的设备宽度/高度来真正控制将提供给用户的订单项的宽度。

你能做的是 - 。触发广告时，根据设备宽度/高度指定尺寸。例如，如果设备的宽度小于 600 像素，则仅使用最小的广告尺寸来触发。例如

 if(window.innerWidth < 800){
     googletag.defineSlot('ADID', [[292, 195]], 'domid')
  }

查看这两个演示链接，它们触发了不同尺寸的同一个 adunit。

320x50 - http://tinyurl.com/q2x3562

300x250 - http://tinyurl.com/o3vx4qk

【讨论】：

【解决方案3】：

对我来说，这篇文章总结了最佳选择：http://exisweb.net/how-to-use-google-adsense-on-a-responsive-website

我基于#3做了一个WordPress插件：https://wordpress.org/plugins/responsive-ad-shortcodes/

【讨论】：