Responsive
web design allows you to dynamically control the presentation of your website
according to the properties of the screen/device that it’s being viewed on. By
using a responsive ad unit, you can control the size of the ads on your page,
in line with how you control the layout of the rest of your page across
devices. For more information on responsive design in general, see Building Smartphone-Optimized
Websites on the Google Developers site.
Responsive ad units use the new asynchronous ad code.
With the asynchronous ad code, you can set the size of the ad code directly via
Cascading Style Sheets (CSS), which allows you to dynamically specify the size
of the ad that will be served.
Step 1.
Generate the ad code
To generate the ad code for a responsive ad unit:
·
Create
an ad unit in the usual way, making sure to select “Responsive ad
unit (BETA)” from the Ad size drop-down in the process.
Note that as responsive ad units
only use asynchronous code, you won't see a Code type drop-down in the “Ad code” box when
you get your code.
Step 2.
Place the ad code on your site
Copy and paste
the ad code into the HTML source code of your page where you'd
like the ad to appear.
Step 3.
Set the size of the responsive ad unit
Responsive ad units have no predefined size, so you
need to specify the size dynamically through CSS. As this feature is still in
beta, here are a few pointers to keep in mind when setting your size:
·
Be sure to specify fixed pixel
values when setting the width and height of the ad to be served. Make sure that
the specified width and height match one of our supported ad sizes.
·
The asynchronous ad code is
responsive on initial page load only, subsequent changes to the ad size (e.g.,
after a screen orientation change) will not cause a new ad to be displayed.
This is something that we’ll look to address in the future.
·
Always set a default ad size in
case media queries aren’t supported.
·
We currently don’t provide a
breakdown by size for all of the ads served by a responsive ad unit. This is
also something that we’ll look to address in the future.
Examples
Basic non-responsive example
Here’s a simple non-responsive example that shows how
you can set the size of the ad unit through CSS:
<style
type="text/css">.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>
Responsive leaderboard example
For a responsive ad unit, you use media queries to set
the size. Typically you’ll want to base the size on the width of a screen.
Here’s an example of a CSS style block that can be combined with the basic
example above to give a responsive leaderboard:
<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>
Note that the sizes in this
example are the same as those in the sample CSS media queries in the responsive
ad code you generate on the My ads tab.
The
@media rules
are a CSS3 syntax, and are supported on all modern browsers. If you want to
support older browsers, such as, Internet Explorer 7 or lower, we suggest
having a default size specified first. This will ensure that an ad renders even
when media queries aren’t supported. Note that setting the size of the ad code via
CSS in external style sheets is not officially supported.
Tracking
the performance of responsive ad units
You can track the performance of
your responsive ad units by viewing the ad sizes report on the Performance
reports tab. All
responsive ad unit requests are shown under the “Responsive” label in the
report.
