Search
Clear search
Close search
Google apps
Main menu

Ad code implementation

How to modify your responsive ad code

If you find that our responsive ad code doesn't do everything you need, you may modify your ad code to better meet the requirements of your responsive site. The following examples show you how to correctly make these modifications.

Important:

Please be assured that the examples described in this article are acceptable modifications of the AdSense ad code. You won't violate the AdSense program policies by modifying your responsive ad code in these approved ways.

Exact ad unit size per screen width example

This example shows you how to modify your responsive code to set specific ad unit sizes for three ranges of screen widths, i.e., mobile, tablet and desktop. You don't need to have any previous experience of CSS media queries or modifying AdSense ad code to follow this example.

Here's some modified responsive ad code that sets the following exact ad unit sizes per screen width:

  • For screen widths up to 500px: a 320x100 ad unit.
  • For screen widths between 500px and 799px: a 468x60 ad unit.
  • For screen widths of 800px and wider: a 728x90 ad unit.
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

To adapt this sample code for your own site:

  1. Create a responsive ad unit in your AdSense account, and note down the following information from your responsive ad code:
    • Your publisher ID, for example, ca-pub-1234567891234567
    • Your ad unit's ID (data-ad-slot), for example, 1234567890.
  2. In the sample code:
    • Replace all instances of example_responsive_1 with a unique name, e.g., Home_Page, front_page_123, etc.
      Notes:
      • Your unique name must only contain English letters (A-Z), numbers, and underscores, and the first character must be an English letter.
      • You must use a different unique name each time that you adapt this sample code.
    • Replace ca-pub-XXXXXXX11XXX9 with your own publisher ID.
    • Replace 8XXXXX1 with your own ad unit's ID.
  3. Decide on the sizes you want your ad unit to take per screen width:
    • If you're happy with the existing ad unit sizes in the sample code, then you don't need to make any additional changes.
    • If you want to set different ad unit sizes per screen width, then, in the sample code:
      • Replace 320px and 100px with the width and height of the ad unit you want to use for screen widths up to 500px.
      • Replace 468px and 60px with the width and height of the ad unit you want to use for screen widths between 500px and 799px.
      • Replace 728px and 90px with the width and height of the ad unit you want to use for screen widths of 800px and wider.
  4. Copy and paste your modified ad code into the HTML source code of the page where you'd like the ads to appear.
    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.
Optimize your mobile site with a responsive ad unit one-pager Optimize your mobile site with a responsive ad unit
For more help with modifying your responsive code, download our one-page summary: Optimize your mobile site with a responsive ad unit

Back to top

Examples of advanced responsive ad code 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 expandable width and a fixed height

You may modify your responsive ad code to specify an expandable width and a fixed height for your ad unit via CSS. The following example shows you how to make these modifications:

Expandable width with fixed height example
This example shows you how to modify your responsive ad code to specify a fixed height of 90px and a variable width from min-width 400px to max-width 970px:
<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   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>

Specify an exact size per screen width

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 per screen width 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.

Back to top

Was this article helpful?
How can we improve it?
Sign in to AdSense

Sign in to AdSense to see help for your account

Don't have an AdSense account? Sign Up for AdSense!