Ad code implementation

Create a responsive ad unit

Responsive ad units allow you to support a wide range of devices (i.e., computers, phones, tablets, etc.) by automatically adapting their size to fit your page layout. Regardless of which device users use to visit your site, responsive ad units can help you provide a great ad experience.

While our responsive ad units are intended to work with responsive web design pages, they also work on non-responsive sites too. If you're thinking about going multi-screen in the future, you can save yourself time by adding responsive ad units now. For help with building your first multi-screen site, check out our Multi-Screen Starter Guide.

To create a new responsive ad unit, follow these steps:

  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” from the Ad size drop-down in the process, and click Save and get code.
  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, keeping in mind that it will dynamically inherit the size of the parent container.

    Once you’ve placed your ad code, we recommend that you test your ads on different devices and screens to make sure that the responsive behavior is working correctly.

Create a responsive ad unit

Tracking the performance of responsive ad units

You can track the performance of your responsive ad units by viewing the Ad units report on the Performance reports tab. If you want to track the sizes of the ads that have been served from your responsive ad units, you can view the Creative sizes report.

Advanced features

If you find that our responsive ad code doesn't do everything you need, you may modify your ad code to specify either a general shape (horizontal, vertical, and/or rectangle) that your ad unit should conform to or an exact size for your ad unit via CSS.

Note that we don't recommend using these advanced features unless you're confident about modifying your ad code.

Specify a general shape

You may make modifications to your ad code to specify the general shape (horizontal, vertical, and/or rectangle) that your ad unit should conform to. The following example shows you how to make these modifications:

Horizontal shape example
This example shows you how to modify your responsive ad code to specify a general horizontal shape for your ad unit:
<ins class="adsbygoogle"
    style="display:block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="horizontal"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

By default, our responsive ad code includes a data-ad-format tag with the value of "auto" which enables the auto-sizing behavior for the responsive ad unit. However, you can set a general shape for your responsive ad unit by changing the value of data-ad-format to one of these values: "rectangle", "vertical", "horizontal" or any combination of these separated by a comma, e.g., "rectangle, horizontal".

Specify an exact size

You may modify your responsive ad code to specify the exact size for your ad unit via CSS. The following example shows you how to make these modifications:

Exact size example
If you know the exact ad unit sizes per device that best fit your responsive site, then you can use CSS3 media queries to set the size of your responsive ad unit. The following example shows you how to modify your ad code to use CSS3 media queries:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@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="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
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.

Hiding an ad unit

In certain cases, particularly on smaller mobile devices, you might not want to show an ad at all. If you do want to hide an ad unit, you can set a parameter with CSS media queries so that no ad request is made and no ad is shown. The following example shows you how to make these modifications:

Hiding ads for specific screen sizes example
If you want to only show ads for certain screen sizes you can use CSS to accomplish this. The following example shows you how to modify your ad code to use CSS3 media queries to hide ads for specific screen sizes:
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@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"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

In this example, no ads will be displayed if the screen width is less than 400px.

Even with this flexibility, please remember to always follow our ad placement policies. Keep in mind that only limited modifications to your code are permitted by our program policies.