javascript – DFP广告管理系统：指定浏览器和广告尺寸

我正在尝试根据浏览器大小加载横幅.因此,在我有一个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>

当您使用不同的屏幕尺寸在浏览器上测试时,请记住横幅不会自动调整大小.您必须刷新页面才能看到更改.

原文地址：https://www.jb51.cc/js/157895.html