6

我已经修改了 GPT（Google 发布商标签），因此它可以在手机和平​​板电脑的尺寸广告以及计算机或更大屏幕的其他尺寸广告上投放。它运作良好，但尺寸取决于负载，并且在使用平板电脑时，无论您从横向视图切换到纵向视图，广告都保持不变。我添加了代码以在 windows 调整大小时动态刷新广告，并且在刷新时有效，但在加载时尺寸仍然确定（我假设）并且广告尺寸不会改变。在刷新广告之前，如何在窗口调整大小时“刷新/重新加载”变量（大小和大小 2）？
这是代码：

    <script type='text/javascript'>
    googletag.cmd.push(function() {
    var width = document.documentElement.clientWidth;
    var size;
     if (width >= 320 && width < 728) 
     size = [320, 50]; // smartphones
    else 
      size = [728, 90]; // desktops and tablets
    var size2;
     if (width >= 320 && width < 728) 
     size2 = [180, 150]; // smartphones
    else 
     size2 = [160, 600]; // desktops and tablets
   var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads());
   var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads())
   googletag.pubads().enableSingleRequest();
   googletag.enableServices();

   $(window).resize(function(){googletag.pubads().refresh([slot1, slot2])});
   });
  </script>
4

3 回答 3

10

您现在可以使用 DFP 以原生方式制作自适应广告。

    var mapping = googletag.sizeMapping().
addSize([1024, 768], [970, 250]).
addSize([980, 690], [728, 90]).
addSize([640, 480], [120, 60]).
addSize([0, 0], [88, 31]).
// Fits browsers of any size smaller than 640 x 480
build();
adSlot.defineSizeMapping(mapping);

https://support.google.com/dfp_premium/answer/3423562?hl=en

于 2014-07-25T17:58:34.323 回答
0

Google 实际上有一个使用 setTargetting API 方法任意刷新广告的完整示例。这是它的症结所在：

<script>

   googletag.cmd.push(function() {

    // Define the ad slot
    var slot1 = googletag.defineSlot("/6355419/Travel", [728, 90], "leaderboard").
     setTargeting("test", "refresh").
     addService(googletag.pubads());

   // Start ad fetching
   googletag.enableServices();
   googletag.display("leaderboard");

   // Set timer to refresh slot every 30 seconds
   setInterval(function(){googletag.pubads().refresh([slot1]);}, 30000);
   });
 </script>

其余的细节都在这里——有什么好处吗？

除此之外，您只需要检测方向更改 - j0nes的方法应该可以工作，还有一个方向更改事件 - 浏览器支持不完整，但 jQuery Mobile 有一个方向更改包装器（回退到调整大小）。

希望有些帮助！

于 2014-03-13T10:46:22.200 回答
0

你是对的，尺寸仅在页面加载时评估。如果您想在旋转设备后获得新的显示宽度，则必须在resize调用中获取宽度（并且可能使用这些尺寸重新定义广告位）。

$(window).resize(function(){
    var width = document.documentElement.clientWidth;
    var size;
     if (width >= 320 && width < 728) 
     size = [320, 50]; // smartphones
    else 
      size = [728, 90]; // desktops and tablets
    var size2;
     if (width >= 320 && width < 728) 
     size2 = [180, 150]; // smartphones
    else 
     size2 = [160, 600]; // desktops and tablets
   var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads());
   var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads())
   googletag.pubads().enableSingleRequest();
   googletag.pubads().refresh([slot1, slot2]);
});

这是未经测试的，但我认为这应该带你走向正确的方向。如果覆盖广告位不起作用，您还可以考虑在开始时创建四个不同的广告位，并仅根据当前屏幕尺寸显示（并隐藏其他广告位）。

于 2013-09-27T06:00:28.923 回答