根据DFP中的浏览器宽度更改广告尺寸 [英] Changing Ad Size Based on Browser Width in DFP

问题描述

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

In DFP Small Business / DoubleClick, I generated the following ad tag for an ad unit with three different sizes along with one creative for each specified sizes. So there are three different sizes for the ad unit and when you hit refresh the ad changes into one of my three specified ad sizes. This works fine, but its not what I want the ads to do,

我希望广告能够做到这一点：

我希望广告根据浏览器宽度更改尺寸，例如，如果观看者浏览器宽度大于800px，则以最大指定尺寸显示广告，如果浏览器宽度为在600-800之间，然后使用广告的第二大指定尺寸，最后，如果广告小于600px，则使用最小的广告尺寸...广告应根据浏览器宽度更改相应地更改尺寸。 800,600-800和少于600不是实际尺寸，只是示例尺寸，但无论如何，这一行中指定了三种广告尺寸：

I want the ads to change sizes based on browser width, so for example, if the viewers browser width is greater than 800px then show the ads at the biggest specified size, if the browser width is between 600-800, then use the second biggest specified sizes for the ads and finally, if the ads are smaller than 600px then use the smallest ad size... the ads should change size accordingly on browser width change. 800, 600-800 and less than 600 aren't the actual sizes, just example sizes, but anyways the three ad sizes are specified in this line:

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 for此代码（点击运行或刷新以查看广告随机更改尺寸）：

Here is the jsfiddle for this code (hit run or refresh to see the ads randomly change sizes):

http://jsfiddle.net/Zkm5j/

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

So again, I'd like the ads to change sizes accordingly on browser width size / change. If anyone could help me come up with a method to achieving this, it would truly mean a lot to me! :)

推荐答案

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

You should use the mapping functionality provided by DFP

以下是一个页面上有5个广告单元的示例。
步骤1：为每个广告单元定义所有可能的尺寸。在DFP广告管理系统中的广告单元设置中定义这些尺寸。
步骤2：确定哪个广告单元将使用哪个尺寸的视口。创建大小映射，如下面的代码所示，变量为megaboardsize firstsize，依此类推。
步骤3：定义插槽和相应的定义映射，如下所示。

Here is an example with 5 Ad Units on one page. Step 1: Define all possible sizes for each Ad Unit. Define these sizes it in the Ad Unit setup in DFP. Step 2: Decide which Ad Unit will use which sizes on which viewport. Create size mapping as shown in the code bellow with the variables megaboardsize firstsize and so on. Step 3: Define the slots and the appropriate defined mapping as shown bellow.

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

In the example, the sizes will be served in the ad units as follows: Ad Unit - example-megaboard: On devices with viewport width more than 970px: 970x90,970x250,728x90. On devices with viewport width more than 728px: 728x90. On all devices with smaller viewport: 320x100,320x50 Ad Unit - /XXX/example-300x250-1st: On devices with viewport width more than 920px: 300x250,300x600. On devices with viewport width more than 300px: 300x250. On all devices with smaller viewport: no ads.

依此类推......

And so on...

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

这篇关于根据DFP中的浏览器宽度更改广告尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！