代码之家 › 专栏 › 技术社区 › user2636556

双击发布者:指定浏览器和广告尺寸

gpt google-ad-manager google-dfp adsense javascript

user2636556 · 技术社区 · 10 年前

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

2 回复 | 直到 10 年前

AppRoyale 10 年前

我真的看不到有机会保存你提供的示例,所以我创建了一个示例,它非常适合我。我将在下面解释一下。

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

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

srakl 10 年前

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

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