我正在尝试根据浏览器大小加载横幅.因此,在我有一个728×90横幅的位置,300×250将显示它是否在移动设备上.
问题是,728×90在桌面上加载.但在移动设备上300×250没有显示.
我尝试按照示例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,[]).
addSize([768,[]). // Desktop
addSize([300,[300,250]). // Tablet
build();
window.LeaderSlot= googletag.defineSlot('/XXXXXXX/leaderboard-1',90],'div-gpt-ad-1455251022145-0').
defineSizeMapping(mapLeader).
setCollapseEmptyDiv(true).
addService(googletag.pubads());
window.LeaderSlot= googletag.defineSlot('/XXXXXXX/medium-rectangle-1',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>
在我的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>
我必须把< div>对于同一位置的每个尺寸？如何加载300×250横幅？ 728×90工作正常.我知道我可以使用CSS隐藏/显示浏览器大小.但我不想那样做.在同一位置加载多个尺寸会减慢我的网站加载速度.
解决方法
你不需要style =’height：90px;宽度：728px;”因为您希望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>
