DFP广告管理系统:指定浏览器和广告尺寸

Question

我正在尝试根据浏览器大小加载横幅.因此,在我有一个728x90横幅的位置,300x250将显示它是否在移动设备上.

问题是,728x90在桌面上加载.但在移动设备上300x250没有显示.

我试着按照这里的例子

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

在我的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>每个尺寸放在同一个位置？如何加载300x250横幅？728x90工作正常.我知道我可以使用CSS隐藏/显示浏览器大小.但我不想那样做.在同一位置加载多个尺寸会减慢我的网站加载速度.

Answer 1

您不需要style='height:90px; width: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>

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