How To Setup AdSense Responsive Ads With Multiple Custom Sizes Google AdSense has officially approved Responsive Design and what that means is you can serve Google ads of varying dimensions corresponding...
2017-12-15T08:06:38Z

How To Setup AdSense Responsive Ads With Multiple Custom Sizes

Google AdSense has officially approved Responsive Design and what that means is you can serve Google ads of varying dimensions corresponding to the viewport size (screen resolution) of the visitor’s device.

AdSense Responsive Ads With Multiple Custom Sizes

You can serve responsive Google AdSense ads in both synchronous as well as asynchronous (non-blocking) fashion. The latter is a more efficient and recommended method as the JavaScript ad code loads in parallel and therefore does not block the other elements of the web page from rendering. In other words, your pages will load faster improving user experience.

How to Generate Responsive AdSense Ads


Open your AdSense dashboard and under My Ads, click “Create new ad unit.” Set Ad Size as “Responsive Ad Unit” and click the “Save and Get Code” button to generate the JavaScript code for your Responsive AdSense ad. The default code is something like this:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-12345"
     data-ad-slot="xxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

AdSense computes the available width and renders the largest ad that will fit that space. This may not always be the most appropriate approach since the best performing ads are rectangles and skyscrapers and not necessarily the leaderboards.

Responsive AdSense Ads (Another Approach)


Whether you set data-ad-format as “auto” or “vertical” or “horizontal” or vertical, the Google AdSense algorithms will still decide which ad to serve. For instance, if you ask for an rectangle, you may either get a medium rectangle or a large rectangle.

Also Read :- Modifying Data-Ad-Format On Google Adsense

SHould you wish to force AdSense to serve ads of a particular size while staying responsive, you can consider custom-sized ads. The size of these ads is determined based on the screen but the publisher has more control over the banner size that is served.
<div id="google-ads-1"></div>
 
<script type="text/javascript"> 
 
    /* Calculate the width of available ad space */
    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-XXX";
 
    /* Replace 1234567890 with the AdSense Ad Slot ID */ 
    google_ad_slot = "1234567890";
  
    /* Do not change anything after this line */
    if ( adWidth >= 728 )
      google_ad_size = ["728", "90"];  /* Leaderboard 728x90 */
    else if ( adWidth >= 468 )
      google_ad_size = ["468", "60"];  /* Banner (468 x 60) */
    else if ( adWidth >= 336 )
      google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
    else if ( adWidth >= 300 )
      google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
    else if ( adWidth >= 250 )
      google_ad_size = ["250", "250"]; /* Square (250 x 250) */
    else if ( adWidth >= 200 )
      google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
    else if ( adWidth >= 180 )
      google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
    else
      google_ad_size = ["125", "125"]; /* Button (125 x 125) */
 
    document.write (
     '<ins class="adsbygoogle" style="display:inline-block;width:' 
      + google_ad_size[0] + 'px;height:' 
      + google_ad_size[1] + 'px" data-ad-client="' 
      + google_ad_client + '" data-ad-slot="' 
      + google_ad_slot + '"></ins>'
    );
  
    (adsbygoogle = window.adsbygoogle || []).push({});
 
</script>
 
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

Go to your AdSense dashboard and either create a new ad unit or use one of your existing ad units. Make a note of the ID of your ad unit and also your AdSense Publisher ID and paste these values in Line #15 and #18.

Next, copy-paste the above snippet anywhere on your web page and, based on the size of the user’s device, the most appropriate AdSense Ad will be served. If you wish to include multiple responsive AdSense ad units on the same web page, just use the same snippet of code but increment the DIV ID in lines #1 & #6 such that they become google-ads-1, google-ads-2 and so on.

This code is developed by Amit Agarwal.
Share it:

AdSense

Blogging

How To

Make Money Online

Tutorial

Post A Comment:

0 comments: