javascript - 自适应 adSense 广告 - 动态重新加载

Question

我在响应式网站 ( 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>

上面的代码无法解决调整大小的问题，如果调整浏览器的大小，广告将保持相同的大小，并且布局将被破坏。这在平板电脑和智能手机上的设备方向发生变化的情况下变得相关。我正在尝试找到一种解决方案，以便在尺寸(尺寸组)发生变化时重新加载广告。

Answer 1

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

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

Support for ad size changes after a screen orientation change. If your responsive page changes its layout following a device orientation change (e.g., when a tablet or phone goes from portrait to landscape), we’ll request and load a new ad of the correct dimensions to fit the new page layout.

Note: When we load a new ad following a device orientation change, we cache the original ad that was shown. If the device then returns to its previous orientation, we’ll show the original ad again rather than load another new ad. As the ad refresh behavior for screen orientation changes creates additional ad requests, you might notice a slight decrease in your RPM and CTR metrics. Please be assured though that there's no impact to your overall revenue.