Using Google Adsense Async Responsive Ad Units

In a previous article I looked at using Adsense on responsive web site by using the Google DFP adserver.

Google have now rolled out new asynchronous ad tags.

With these tags the ad sizes are set using CSS rather than setting Javascript variables.

According to the Google Developer Blog, using external CSS is allowed:

The ad block size is based on the width and height of the <ins>, which can be set inline, as shown here, or via CSS.

Selecting the New Asynchronous Ad Tags

Currently in beta, this may not be available to all publishers.  There is now a dropdown list called Code Type.

adtags

We now have a new script:

http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

This replaces the old script:

http://pagead2.googlesyndication.com/pagead/show_ads.js

Advertisement

This new script is called with an async attribute. Async is an HTML5 attribute supported by modern browsers. It allows the script to be loaded at the first opportunity, but loading and parsing does not block the rendering of the page.

This means a perceived performance boost, but you cannot guarantee the order the script is executed. As Google have said, these tags are good for slower mobile browsers and connections.

Official Responsive Ad Code

You can now select Responsive ads (announcement), and they pretty much do what I’ve described above! (See the official help).

You can do this when you create a new ad unit. Instead of selecting a size, you select Responsive ad unit.

goog-resp

Here is some sample code from Google that will show a varying number of leaderboards depending on viewport size. This is a mobile-first media query.


<style type="text/css">
.adslot_1 {
    width: 320px; 
    height: 50px;
}
@media (min-width:500px) { 
    .adslot_1 {
        width: 468px; 
        height: 60px;
     }
}
@media (min-width:800px) { 
    .adslot_1 {
        width: 728px; 
        height: 90px;
    }
}
 </style>
 <ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="ca-pub-1234" data-ad-slot="5678"></ins>
 <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

UPDATE: Auto Sized Responsive Ads – No CSS

New code from Google allows you to forgo hard-coded CSS sizes. The ad script will determine the available space and choose and ad accordingly.

There are two changes: style="display:block;" and a new attribute data-format="auto"

 <ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-9999999" data-ad-slot="569998878" data-format="auto"></ins>
 <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

An example where this works well is the leaderboard ad.

  • If your site (at desktop) is say 950px wide, the ad unit will fill it with either text ads, or with a 728px wide image ad.
  • If at a smaller viewport (say 600px wide), the ad unit will fill with text ads, or with a 468px image.
  • At mobile width, you will be server a 320×50 mobile leaderboard.

You do not have to explicitly set widths and heights.

Problems to Watch Out For

Like every responsive adsense solution there are pros and cons.

  • If you were doing split (A/B) testing with your old ad, you can’t do this anymore.
  • Channels: At the moment this defaults to the channel you have set in your adsense ad unit. However it would be nice to assign a different channel for the different ad sizes.
  • Mobile device orientation: If you have differing layouts for portrait and landscape, then clearly the ad won’t reload on orientation change, nor will it change size.

You Only Need to Call The Script Once

Even though the ad tag template has the script call in the ad unit, you could place this at the end of the BODY and have everything work fine.

What If You Need to Hide The Ad Unit?

On many responsive layouts, you have more ad units on the desktop version than the mobile.

No solutions are forthcoming from Googleeven with their new responsive ad units.

This is problematic, and I normally set the relevant ad wrapper to display:none. That’s not going to work here, as the Google ad tag code loops through all the INS elements with a class of adsbygoogle and calls ads for each one.

Google have now updated the code to allow display:none on ad units (see more at support.google.com).

Using Javascript to Remove the Ad Unit on Smaller Viewports (No longer needed)

The following code MUST be placed at the end of the document BEFORE the call to the Google Ad Tag. And obviously you must remove the call to the google ad tag from all your previous html.

In this example, if the viewport width is 640px or under (as per our media query) then the adsbygoogle class is removed. We then also have to remove the item pushed onto the adsbygoogle array, failing to remove this means the ad tags throws a debug error to the console.

First, our HTML ad tag (maybe in a sidebar that will hide on mobile layouts):

<ins id="adsidebar"
     style="display:inline-block" data-ad-client="ca-pub-99999999" data-ad-slot="5599647471"></ins> 
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Then some Javascript (at the end of the document, before the </body> tag):


<script>
// Remove responsive ad
var width = window.innerWidth || document.documentElement.clientWidth;
if (width <= 640) {
    $('#adsidebar').removeClass('adsbygoogle');
    window.adsbygoogle.shift(); //Remove an item from the ads array.
}
</script>

// Finally our ad tag call (only need once on your page
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</body>

And a vanilla (no jQuery) js version:


<script>
// Remove responsive ad
var width = window.innerWidth || document.documentElement.clientWidth;
if (width <= 640) {
    document.getElementById('adsidebar').className=""; //Remove adsbygoogle class
    window.adsbygoogle.shift(); //Remove the item from the ads array.
}
</script>

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</body>

I have this working on a live site. The desktop layout has a 160×600 ad in the sidebar. Tablets and below do not have the sidebar, and the ad tag is neither displayed nor called.

Hi, I'm James, and for the last decade I've made a living by making my own blogs and websites.
Updated: September 21, 2016

62 Comments

  1. Very informative writing indeed James. Thank you!

    Regarding one of your statements: “You Only Need to Call The Script Once” that was not the truth in my case.

    I have several Google ads on the pages of my website and recently updated some of the code and went for such solution (call push only once somewhere after the last ad container) but it turned out to show only the first ad, sometimes the first and the second and sometimes… none.

    I ended up writing a jQuery script that will iterate trough all ad containers and, if the container is not visible (set via css) it will empty the container. If the container IS visible, it will call push…

    Works like a charm 🙂

    Just thought I’d share this so that people know what to look into if the ads don’t show up.

  2. hi James great article
    I have a question
    I just got approved by AdSense with my blog http://www.holykey1.blogspot.com
    but the ads from as unit were not showing until I saw a YouTube video which showed that I have to remove some coded to make the ads show
    it worked like magic
    but I’m a little nervous
    will it affect my earnings?

  3. That works on my site and very easily done as the way is quite simply described by you.

  4. I have got an adsense code but do not know where to paste it exactly, I need your help as I am not very technically sound

    Can you Give me a Detailed Explanation as to where to paste the adsense code. I am using Blogger Platform.

    This is where I am stuck as I don’t know where to paste the Adsense code. Please Help me!!!

    I would be really thankful to you if you could help me out

    Regards,
    Nikhil Kashid

  5. Hi..
    When i create add unit code then delete after 10 days in my adsense account why???.. and my site traffic also come.

  6. How often should you make new ad codes? I would think you don’t keep using the same one..
    If it’s a complex answer, you can give me an estimate answer?
    I have googled the question and I keep finding articles that are not even related to the question.

  7. HI,
    Thanks for your nice posts.
    based on your working, i want to know i can use same code to prevent a div to be called if user is using mobile?
    for more clear understanding i dont want to use css none property because i want that some images will not be displayed to mobile users, css property hides them but they are called so page speed reduced, i want to use same code so that images of specific div will not be called when user is on mobile on screen < 640 so that loading time for mobile users decreases to a very appropriate level. Any solution???

    Regards
    Waseem

  8. I want code where i can set the width & height of the ad slot any idea where i can get it, i am not a coding expert please help

  9. My div container on my sidebar ad is set to 100%, but most of the time nothing is showing. I recently moved to a new WP theme.

    Can anyone spare a minute to tell me where I’ve gone wrong?

    http://www.telltalesonline.com – just take a look at one of my sidebar ads on an article.

    Thanks

  10. Hi James,
    First, your site is really amazing! That post about the responsive adsense was great so this one. I have develop a SPA (single page site) it´s for developers and testers from Brazil, but size they enter only 1 time and can spend all the afternoon on the page, I was wondering if there is a way to refresh the google adsense, for example every 3 minutes and not violate any rule from google? Do you have any suggestion all?

    Thanks in advance!

    • If you want to do refreshing, you need to be using the Google DFP platform. As far as I know standard Adsense won’t allow refreshing.

    • Thanks for this. This is new. My last query with the Adsense account manager was that Display:none was absolutely not allowed. It seems they’ve updated the code to not request an if it’s hidden.

      This makes things a lot easier.

    • I cover this approach in my other article at http://exisweb.net/how-to-use-google-adsense-on-a-responsive-website

      The sizemapping is a complex technique and takes a lot of work to get right. It is complete overkill if all you are doing is running
      Adsense ads. It works if you have a large portfolio of direct advertisers on your site. I did set this up for one client who had multiple line items running on different sizes for different viewports… It took a while to get working properly

  11. hey james i was looking for this query for so long . thanks for writing this ..
    can you pls help me in this ….
    i want to avoid showing header 728×90 and links ads to mobile visior…
    here is the screen shot of my code for header banner ad ….
    please guide me where should i put the code as suggested by you in this code.
    http://prntscr.com/5pfq6h
    http://www.outfittrends.com
    thanks…

    • Just looked at your page… you got HTML syntax errors…. your missing a closing angle bracket on the opening ins element.

  12. Hi James,

    Please help me out with this, i am really very confused about it.

  13. Hi James,

    Very good information you have shared in this article. Great work!

    I thought of asking you a query which i really don’t find answer anywhere.

    My question is:
    I was looking out for a solution to convert my custom sized ad unit to responsive as my website have responsive design. I searched everywhere but i found a little peace of information on labnol.org,
    http://www.labnol.org/internet/adsense-custom-size-ads/28352/

    here he has shared a set of codes which can be used to make a custom size ad unit to responsive.

    My question is, is this a legal way, or is it voilating the Google Adsense guidelines/rules, or If you have any option of making the custom size ad Responsive, then please help me out with it.

    • The labnol example uses document.write which is not a best practice as it really affects the paint and rendering speed of your page.

      Surely it’s better just to stick with a standard responsive ad unit, and let google figure out the best fit and best performing ad for that slot.

      • But do you think that using that code to manipulate the custom size ad to responsive, is voilating the google adsense Guidelines, i am curious to know this.

        • I would think that would be okay. Because in the end, the output from the document.write is standard adsense code.

  14. Hi James,
    where did you get adsbygoogle.shift() from?
    There is no such method. Any other idea how to remove already displaying ads?

    Thanks

    • Arnold, the shift() method is a standard array method (see docs here).

      It just removes the latest item from any array.

      • James,
        I’m not sure why, but window.adsbygoogle is returning an Object instead of an array. I checked in Chrome Console:
        > window.adsbygoogle
        Object {push: function}

        What am I doing wrong?

      • Oh, I see now I’m not able to shift() the array after the google tag script was called. It turns the array to an object, I guess?

        Do you know any way to remove displaying ads from the page AFTER calling the google tag script?
        I’m working with dynamic content which is loading content via ajax and changing the URL via html5 pushState. But I haven’t found a way to reset/remove the ads to serve new ads on a new loaded page.
        The ad displays are just stopping after the limit of about 4-5 ad slots are reached. It is still “thinking” the page is still the same while the content & URL is always different.
        I have to find a way reset all available ad slots on the page, load new content and serve new ads as if it was loaded as new page view.

        • Yes that’s right. adsbygoogle starts as an array. When the scripts are loaded in the array is overloaded as an object. They do the same with the Analytics scripts. It allows you to call push (which works in an array, and their new object).

          You’ve got a real tricky one there, and to be honest I’m not sure Adsense T&C’s allow the kind of thing that you are doing (might want to check that)… Failing that you might need to move to Google DFP and load your ads thru there. A lot more control, but a lot more complex. I know Adsense are quite fussy about refreshing ads on the same page.

  15. Hi Team

    This is a very useful site. Can you please let me know how to add google adsense code to bootstrap. If I am adding I am getting error in smart.class.php. Please help me with this.

    Thanks

    • This article isn’t about how to add adsense to different frameworks – there is loads of advice out there for that.

  16. Hey would you mind stating which blog platform you’re working with?
    I’m planning to start my own blog in the near future but I’m having a tough time choosing between BlogEngine/Wordpress/B2evolution and Drupal.

    The reason I ask is because your design and style seems different then most blogs and I’m looking for something
    unique. P.S Sorry for being off-topic but I had to ask!

  17. Asynchronous ad unit is the worse thing that happen to me in term of Adsense optimization. I switched to this about a month ago and after that my earning slowly slowly decreased. Later, I revert back to my synchronous code. I suggest everyone that don’t go for it, as i have already suffered from it, so i do not want anyone else to do same mistake like i did.

    • How can you be sure it was the async code? There are many reasons why adsense revenues can change.

  18. I have placed the asynchronous code like i was placing synchronous, that’s why it didn’t not showed up. In asynchronous, we have to keep class, style, publisher id, ad slot in same line. In short, whatever come between bla bla , need to keep in same line, then it will display the ads.

    • Glad you got it solved. Yes you must leave the data attributes there or else it will not render an ad!

  19. I am using HTML 5 theme, it automatically adjust its appearance as per the screen size. It automatically shrink when viewing on mobile. On mobile interface get adjusted but not Google ads. To solve this problem, i dig over the web and came across asynchronous and responsive ad beta. I placed the asynchronous code on my website for approximately 24 hours but ads was not visible till then. So, i removed the code. I wanna know, which code is better asynchronous or responsive ad, and how should I place it in my webpage, and why it take too much to show up.

    • It should take a few hours for ads to show, so something has not been implemented properly. Async code is better for performance. The Responsive ad units define how wide an ad will display. You can have responsive AND async ads.

  20. I just went with the new, async responsive ads 24 hours ago, but noticed my CPC was immediately cut in half over the old style (on desktop too). I’m in the midst of A/B testing the old style versus the new type right now.

    Has anyone else discovered this to me the case?

    • I noticed a lot of changes in CPC and CTR, BUT the overall RPM/CPM pretty much remained the same. This was to do with the differences in image vs text ads that were getting served. Has the CPM changed?

  21. Google marked this as “Should Fix” thank you for the information

  22. Good approach, since it just came out of beta I might give it a shot.

  23. It would be good if responsive Google Adsense allowed portrait / landscape detection, but in general usage its not really that big an issue, as people dont go twisting and turning their tablets constantly, or resizing browsers all the time. Sure you might get an ad thats too big or too small when you change tablet orientation occasionally but on the next page view all is good again.

    James is right that at the moment adding portrait and landscape detection to the mix isnt really practical for the amount of work it needs just to perform a trick that wont really affect anyone much – even though as site designer we might aspire for perfect responsiveness of all elements.

    Wes, what could be considered an epic fail (I shudder to use that catch-all lowest common denominator meme-phrase) is not using some kind of detection to serve up the right sized ads when a page is loaded – so make sure you are at least doing something.

  24. without portrait/landscape detection is still an epic fail

    • I agree that the Google solution falls well short. However to get ads to fetch a new impression on orientation would be a lot of work for something that maybe? doesn’t happen very often.

  25. I agree that there is no perfect one-size-fits-all approach that works for every situation, but we can get close-enough-is-good enough and then tune it from there 😉

    To control serving ads on mobile vs desktop I use browser/device detection so I can switch ads on or off for each platform.

    I do that with my Click Missile Plugin which detects mobiles and activates / deactivates ad widgets accordingly – so there can be a completely different ad set up for mobiles vs desktops – no media queries required.

    Of course to get even more fine grained within that its possible combine with the use javascript techniques to detect the size of the mobile too, again so that the ad fills the space optimally.

  26. Edit.. typo…
    I’ll have to get round to updating it for Asynchronous Adsense 😉

  27. Labnol have caught up with this now with a neat looking script.
    http://www.labnol.org/internet/asynchronous-responsive-adsense/28107/
    The only issue with that is that it assumes you’ll always want the ad to fill its container which if its an incontent ad isnt always the case.

    I solved that kind of issue with my ‘in-content area script’ (found at the bottom of http://heatmaptheme.com/responsive-google-adsense-ads-for-wordpress/ ).
    but thats still for the regular adsense code.

    It works better for square and rectangle ads withing text.

    I’ll have to get around to updating it for synchronous Adsense.

    • The labnol answer is a great idea, although needs refining. Offsetwidth varies between browsers, and the script presumes that you always want any old ad to fill the space.

      I prefer far more fine grained control over ads, and in the main site I work (EnergyFiend.com) we only serve 1 ad to a mobile layout, and 3 to a desktop layouts, and this is controlled by media queries.

      The challenge with responsive design is that there is no one-size-fits-all answer for anything.

  28. While you can control the “width and height” of the ad using CSS, inline or external, you cannot use CSS to control which ad (size) actually gets displayed. If ad-slot #1234 is supposed to display 728×90 ads, 728×90 ads shall display.

    • Hi Salman I have tested this, and it displays ads the fit the width and height you have set.

      As in my above example, the same ad slot will serve either a 320×50 or a 300×250 depending on the media query. I haven’t tested it for all combinations, but this definitely works.

      • Indeed it works just fine.

    • Thanks. I believe there’s still a lot more to come from the Google developers.

      Anyway so I would an extra class for each ad unit that is going to change in size. All depends on your layout. Thanks for sharing your link.

  29. Nice start! I’m currently using http://www.labnol.org/internet/google-adsense-responsive-design/25252/ and was looking for this new workaround. It doesn’t update the data-ad-slot however. The fiddle here mentions how to update the data-attribute via CSS: http://stackoverflow.com/questions/9523197/css-values-using-html5-data-attribute but I’m hoping for the Google guys to come up with an elegant and supported solution so I asked them here pointing to all the sources http://googledevelopers.blogspot.nl/2013/07/an-async-script-for-adsense-tagging.html

    • You’re right about the Ad slot, which is why I mentioned in the post about wanting to update (at least) a channel so we can track our different ads.

      However different size ads do work. I’ve tested it, and the new code uses your width and height settings to override the ad slots default settings.

      Again you could use Javascript to change the attribute (must happen before the async code is called).

  30. whats with data-ad-slot=”…”?

    • The new code uses data attributes rather than the old google_ad_ javascript variables.

      So data-ad-slot is the same as google_ad_slot and is your ad unit ID.

Add a Comment