How to Use Google AdSense Ads on Responsive Websites
2014-08-08 17:22
656 查看
How to Use Google AdSense Ads on Responsive Websites
Learn how to make your Google AdSense ads responsive with JavaScript. The code detects the size of the visitor’s browser and serves appropriate AdSense ads that fit in the available space.couch mode
print story
Google Approves Responsive AdSense Ads
How to Add Custom-Sized AdSense Ads to your Website
How Many Google AdSense Ads are Allowed Per Page?
Rules for Placing Google Adsense Ads on Mobile Webpages
Find the Most Optimized Ad Sizes for your Website
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.
For instance, if a visitor is reading your web page on desktop, you can choose to serve the large 728×90 (leaderboard) unit but if another visitor is viewing the same web page on a mobile phone, you can display the smaller 468×60 ad unit. The AdSense code
detects the size of the visitor’s screen and serves the appropriate ad unit that will best fit the available space.
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.
There is however an option to force the ad unit to always serve the rectangle or the skyscraper. You can change the value of the data-ad-format variable in the JavaScript code from “auto” to “rectangle” and it will always serve one of the rectangular formats.
Similarly, you can set data-ad-format to “vertical” to always render a 120×600 or 160×600 rectangle. The modified ad code would be:
<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="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
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.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.
相关文章推荐
- How to use Google Test on Android-4.0.3_r1
- How to use OpenID to sign on with Google account
- Web.py Cookbook 简体中文版 - How to use templates on Google App Engine
- How to use toolbar control on dialog using CToolBar class in VC++ - VC++ 中用CToolBar 类如何使用ToolBar控件
- How to use HttpWebRequest and RegularExpressions to crash website
- How-to create a Calculator on Google Android: Part I
- How to install Google Apps (GApps) on your Android Device / Phone
- Core Data on iOS 5 Tutorial: How To Use NSFetchedResultsController
- How to save data in ASCII format in ADS for use in MATLAB
- How to use search engine on network effectively?
- How to use iSCSI Targets on Windows Computers
- How To Use RMAN CONVERT DATABASE on Source Host for Cross Platform Migration
- A DEMO script on how to use CPAN module HTML::LinkExtor
- An example on how to use jQuery and Ajax.NET Professional together
- How to use vi on linux
- How to make more money from Google Adsense?
- How to use ActiveSync Remote Display on Windows Embedded CE 6
- How to use eclipse to debug android source(from google official site)
- examples on how to use Scrapy
- IntegrationWithDjango - modwsgi - How to use Django with mod_wsgi. - Python WSGI adapter module for Apache. - Google Project Hosting