响应式 adSense 广告 - 动态重新加载答案

【问题标题】：Responsive adSense ads - dynamically reloading响应式 adSense 广告 - 动态重新加载
【发布时间】：2013-12-29 03:50:12
【问题描述】：

我在响应式网站 (http://goo.gl/asEovC) 上运行来自 labnol.org 的这段代码：

<div id="google-ads-1"></div>

<script type="text/javascript"> 

    ad = document.getElementById('google-ads-1');

    if (ad.getBoundingClientRect().width) {
        adWidth = ad.getBoundingClientRect().width; // for modern browsers 
    } else {
        adWidth = ad.offsetWidth; // for old IE 
    }

    /* Replace ca-pub-XXX with your AdSense Publisher ID */ 
    google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX";

    /* Replace XXXXXXXXXN with the AdSense Ad Slot ID */
    if ( adWidth >= 728 )
      google_ad_size = ["728", "90"],  /* Leaderboard 728x90 */
      google_ad_slot = "XXXXXXXXX0";
    else if ( adWidth >= 468 )
      google_ad_size = ["468", "60"],  /* Banner (468 x 60) */
      google_ad_slot = "XXXXXXXXX1";
    else if ( adWidth >= 336 )
      google_ad_size = ["336", "280"], /* Large Rectangle (336 x 280) */
      google_ad_slot = "XXXXXXXXX2";
    else if ( adWidth >= 300 )
      google_ad_size = ["300", "250"], /* Medium Rectangle (300 x 250) */
      google_ad_slot = "XXXXXXXXX3";
    else if ( adWidth >= 250 )
      google_ad_size = ["250", "250"], /* Square (250 x 250) */
      google_ad_slot = "XXXXXXXXX4";
    else if ( adWidth >= 200 )
      google_ad_size = ["200", "200"], /* Small Square (200 x 200) */
      google_ad_slot = "XXXXXXXXX5";
    else if ( adWidth >= 180 )
      google_ad_size = ["180", "150"], /* Small Rectangle (180 x 150) */
      google_ad_slot = "XXXXXXXXX6";
    else
      google_ad_size = ["125", "125"], /* Button (125 x 125) */
      google_ad_slot = "XXXXXXXXX7";

    google_ad_width = google_ad_size[0];
    google_ad_height=google_ad_size[1];

</script>

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

上面的代码无法解决调整大小的问题，如果调整浏览器的大小，广告将保持相同的大小并且布局会中断。这与平板电脑和智能手机上的设备方向变化有关。如果/当尺寸（尺寸组）发生变化时，我正在尝试找到重新加载广告的解决方案。

【问题讨论】：

support.google.com/adsense/answer/…
是的，我现在正在测试 google 的新解决方案，上次它与 labnol 的解决方案相比不合适。
Google 的专有解决方案，响应式广告，与上面的代码几乎相同，不解决设备方向变化和布局中断问题。

标签： javascript mobile dynamic responsive-design adsense

【解决方案1】：

Google 有新的响应式代码，显然可以处理屏幕方向更改后的布局更改：

https://support.google.com/adsense/answer/3213689?hl=en

支持在屏幕方向更改后更改广告尺寸。如果您的响应式页面在设备方向更改后更改其布局（例如，当平板电脑或手机从纵向变为横向时），我们将请求并加载正确尺寸的新广告以适应新的页面布局。

注意：当我们在设备方向更改后加载新广告时，我们会缓存显示的原始广告。如果设备随后返回到之前的方向，我们将再次展示原始广告，而不是加载另一个新广告。由于屏幕方向更改的广告刷新行为会产生额外的广告请求，您可能会注意到每千次展示收入和点击率指标略有下降。请放心，这不会影响您的整体收入。

【讨论】：