在DFP基于浏览器的宽度更改广告大小(Changing Ad Size Based on Brows

2019-08-17 15:12发布

在DFP小型企业/ DoubleClick而言,我产生了一个广告单元下面的广告代码都与一个创造性的为每一个指定大小沿三种不同的尺寸。 因此,有三种不同尺寸的广告单元,当你点击刷新广告变成我的三个指定的广告尺寸之一。 这工作得很好,但它不是我想要的广告做的,

我自己的广告做到这一点:

我想基于浏览器的宽度上的广告来改变大小,因此,例如,如果观众浏览器的宽度比800像素更大然后显示在最大的指定大小的广告,如果浏览器的宽度在600-800之间,则使用第二大指定尺寸的广告,最后,如果广告比600px的则用最小的广告尺寸更小......广告应该相应浏览器的宽度变化而变化的大小。 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/

如此反复,我想广告随之改变浏览器的宽度尺寸/变化的大小。 如果有人可以帮我拿出来实现这一目标的方法,这将真正意味着很多给我! :)

Answer 1:

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

这里是一个页面上5个广告单元的例子。 第1步:定义每个广告单元的所有可能的大小。 这些定义它的大小在广告单元设置在DFP。 第2步:确定哪些广告单元使用的尺寸上视。 创建如图代码波纹管与所述变量megaboardsize firstsize等大小的映射。 步骤3:定义所述槽和波纹管所示的适当定义的映射为。

在该示例中,大小将在广告单元中进行投放如下: 广告单元-例如-megaboard:在与视口的设备宽度超过970像素:970x90,970x250,728x90。 与视口的设备宽度超过728px:728​​x90的。 上具有较小的视口的所有设备:320x100,320x50 广告单元- / XXX /示例-300x250-1st:在与视口的设备宽度超过920px: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>


Answer 2:

你真的无法控制将提供给基于他的设备宽度/高度直接从DFP配置用户线项目的宽度。

你可以做的是 - 。 而触发广告根据所述设备宽度/高度指定尺寸。 为例如,如果该设备是小于600px的宽度则仅使用最小的广告尺寸来触发。 例如

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

检查这两个演示环节,它们触发不同大小相同的广告单元。

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

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



Answer 3:

对我来说,这个帖子总结的最佳选择: http://exisweb.net/how-to-use-google-adsense-on-a-responsive-website

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



文章来源: Changing Ad Size Based on Browser Width in DFP