1

在 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/

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

4

3 回答 3

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>
于 2016-10-25T19:22:46.317 回答
0

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

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

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

检查这两个演示链接，它们触发了不同大小的同一个 adunit。

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

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

于 2014-01-15T17:46:15.030 回答
0

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

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

于 2015-01-02T13:45:10.720 回答