Question

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

问题是，728x90在桌面上加载。但在移动设备上，300x250无法显示。

我尝试了示例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>

和我的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

我没有真正看到保存您提供的示例的机会，因此我创建了一个示例，这对我来说非常合适。我会在底部解释一下。

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

首先，您必须调用.sizeMapping（）将广告尺寸映射到浏览器尺寸，然后您需要调用.defineSizeMapping（）来实现映射。

您为addSize指定的第一个尺寸是屏幕尺寸，每个后续尺寸都是广告尺寸。例如，在上面定义的第一个addSize（）中，[1024,768]是浏览器大小，[970,250]是广告尺寸。

如果映射中存在错误，或者由于某种原因无法确定屏幕大小，则将使用.defineSlot（）中指定的大小。

GPT自适应广告不会根据浏览器大小的变化调整大小。您可以添加自己的自定义代码，以便在调整大小时刷新广告位。

这个功能就是这个：

googletag.pubads().refresh();

如果还有其他问题，请告诉我。

Answer 2

您不需要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>

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

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

2 个答案: