Question

我修改了GPT（Google发布商代码），因此适用于手机和平板电脑的尺寸广告，以及适用于计算机或大屏幕的其他尺寸广告。它运作良好，但尺寸是根据负载确定的，当使用平板电脑时，广告保持不变，无论您是从横向视图切换到纵向视图。我添加了代码以动态刷新windows resize上的广告，并且可以正常刷新，但尺寸仍然是在加载时确定的（我假设）并且广告尺寸不会改变。如何在刷新广告之前在窗口大小调整上“刷新/重新加载”变量（大小和大小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>

Answer 1

您现在可以使用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

Answer 2

你是对的，尺寸仅在页面加载时评估。如果您想在旋转设备后获得新的显示宽度，则必须在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]);
});

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

Answer 3

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>

其余细节是here - 有什么好处吗？

除此之外你只需要检测方向变化 - j0nes的方法应该有效，还有一个orientationchange事件 - 浏览器支持不完整，但是jQuery Mobile有一个orientationchange包装器（掉头）回来调整大小）。

希望其中一些有帮助！

通过DFP广告系列投放广告完全响应

3 个答案: