DFP广告管理系统：指定浏览器和广告尺寸
[英]DoubleClick for publishers: Specify browser and ad dimensions
问题描述
I'm trying to get banners to load according to the browser size. 
我正在尝试根据浏览器大小加载横幅。 So in a location where i have a 728x90 banner, a 300x250 will show if its on mobile. 因此，在我有一个728x90横幅的位置，300x250将显示它是否在移动设备上。
Problem is, the 728x90 loads on desktop. 问题是，728x90在桌面上加载。 but on mobile the 300x250 doesn't show. 但在移动设备上300x250没有显示。
I tried following the example here 我试着按照这里的例子
<script type='text/javascript'>
googletag.cmd.push(function() {
// This mapping will only display ads when user is on desktop sized viewport
var mapLeader = googletag.sizeMapping().
addSize([0, 0], []).
addSize([768, 200], [728, 90]).
build();
// This mapping will only display ads when user is on mobile or tablet sized viewport
var mapLeader2 = googletag.sizeMapping().
addSize([0, 0], []).
addSize([768, 200], []). // Desktop
addSize([300, 200], [300, 250]). // Tablet
build();
window.LeaderSlot= googletag.defineSlot('/XXXXXXX/leaderboard-1', [728, 90], 'div-gpt-ad-1455251022145-0').
defineSizeMapping(mapLeader).
setCollapseEmptyDiv(true).
addService(googletag.pubads());
window.LeaderSlot= googletag.defineSlot('/XXXXXXX/medium-rectangle-1', [300, 250], 'div-gpt-ad-1458546777123-0').
defineSizeMapping(mapLeader2).
setCollapseEmptyDiv(true).
addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().enableSyncRendering();
// Start ad fetching
googletag.enableServices();
});
</script>
and in my HTML 在我的HTML中
<!-- /XXXXXX/leaderboard-1 -->
<div id='div-gpt-ad-1455251022145-0' style='height:90px; width:728px;' class="center">
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1455251022145-0'); });
</script>
</div>
<!-- /XXXXXX/medium-rectangle-1 -->
<div id='div-gpt-ad-1458546777123-0' style='height:250px; width:300px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1458546777123-0'); });
</script>
</div>
do i have to put the <div> for each size in the same location? 我是否必须将每个尺寸的<div>放在同一位置？ How do i get the 300x250 banner to load? 如何加载300x250横幅？ the 728x90 works fine. 728x90工作正常。 I know i could hide / show according too browser size using CSS. 我知道我可以使用CSS隐藏/显示浏览器大小。 but i don't want to do that. 但我不想那样做。 Loading multiple sizes in the same location slows down my sites loading. 在同一位置加载多个尺寸会减慢我的网站加载速度。
2 个解决方案
解决方案1
2 2016-03-31 16:28:05
I didn't really see a chance to save the example you provided, so I created an example, which worked perfectly for me. 我没有真正看到保存您提供的示例的机会，所以我创建了一个示例，它对我来说非常有效。 I will explain a little bit at the bottom. 我将在底部解释一下。
<html>
<head>
<title>Async Responsive</title>
<script async src="http://www.googletagservices.com/tag/js/gpt.js">
</script>
<script>
googletag = window.googletag || {cmd:[]};
googletag.cmd.push(function() {
var sizeMapping = googletag.sizeMapping().
addSize([1024, 768], [970, 250]). // Screens of any size smaller than infinite but bigger than 1024 x 768
addSize([980, 690], [728, 90]). // Screens of any size smaller than 1024x 768 but bigger than 980 x 690
addSize([640, 480], [120, 60]). // Screens of any size smaller than 980 x 690 but bigger than 640 x 480
addSize([0, 0], [88, 31]). // Screens of any size smaller than 640 X 480 but bigger than 0 x 0
build();
googletag.defineSlot(
'/XXXXXX/ad-unit-inside-dfp/level2/level3', [320, 50], 'div-id').
defineSizeMapping(sizeMapping).
addService(googletag.pubads());
googletag.enableServices();
});
</script>
</head>
<body>
<h1>user2636556 Testpage</h1>
<div id="div-id">
<script>
googletag.cmd.push(function() { googletag.display('div-id') });
</script>
</div>
</body>
</html>
First you have to call .sizeMapping() to map the ad sizes to the browser sizes and then you need to call .defineSizeMapping() to implement the mapping. 首先，您必须调用.sizeMapping（）将广告尺寸映射到浏览器大小，然后您需要调用.defineSizeMapping（）来实现映射。
The first dimension you specify for addSize is the screen size and each subsequent dimension is an ad size. 您为addSize指定的第一个维度是屏幕尺寸，每个后续维度都是广告尺寸。 For example, in the first addSize() defined above, [1024, 768] is the browser size and [970, 250] is the ad size. 例如，在上面定义的第一个addSize（）中，[1024,768]是浏览器大小，[970,250]是广告大小。
If there is an error in the mapping or if the screen size can't be determined for whatever reason, the size specified in .defineSlot() will be used. 如果映射中存在错误，或者由于某种原因无法确定屏幕大小，则将使用.defineSlot（）中指定的大小。
GPT responsive ads do not resize on change in the size of the browser. GPT响应式广告不会根据浏览器大小的变化调整大小。 You can add your own custom code to refresh the ad slots on resize. 您可以添加自己的自定义代码，以便在调整大小时刷新广告位。
The function in order to this is this one: 这个功能就是这个：
googletag.pubads().refresh();
If there are any further questions, let me know please. 如果还有其他问题，请告诉我。
解决方案2
0 已采纳 2016-04-04 06:10:50
You don't need style='height:90px; width:728px;' 你不需要style='height:90px; width:728px;' style='height:90px; width:728px;' since you want DFP to load the proper banner according to screen size. 因为您希望DFP根据屏幕大小加载正确的横幅广告。
<!-- /XXXXXX/leaderboard-1 -->
<div id='div-gpt-ad-1455251022145-0' style='height:90px; width:728px;' class="center">
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1455251022145-0'); });
</script>
</div>
when you test it on your browser using different screen sizes, remember that the banners don't automatically resize. 当您使用不同的屏幕尺寸在浏览器上测试时，请记住横幅不会自动调整大小。 You will have to refresh your page to see the changes. 您必须刷新页面才能看到更改。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.