7

我正在尝试根据浏览器大小加载横幅。因此，在我有 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 根据浏览器大小隐藏/显示。但我不想那样做。在同一位置加载多个尺寸会减慢我的网站加载速度。

4

2 回答 2

2

我真的没有机会保存您提供的示例，因此我创建了一个示例，它对我来说非常有用。我会在底部稍微解释一下。

 <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();

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

于 2016-03-31T16:28:05.860 回答
0

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

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

于 2016-04-04T06:10:50.350 回答