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.
Currently in beta, this may not be available to all publishers. There is now a dropdown list called Code Type.
We now have a new script:
1 | http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js |
This replaces the old script:
1 | http://pagead2.googlesyndication.com/pagead/show_ads.js |
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.
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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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>(adsbygoogle = window.adsbygoogle || []).push({});</script> |
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"
1 2 3 | <ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-9999999" data-ad-slot="569998878" data-format="auto"></ins> <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.
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.
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.
On many responsive layouts, you have more ad units on the desktop version than the mobile.
No solutions are forthcoming from Google – even 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):
1 2 3 | <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):
1 2 3 4 | <script>// Remove responsive advar 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 |
And a vanilla (no jQuery) js version:
1 2 3 4 | <script>// Remove responsive advar 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> |
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.
联系客服
