How to Set Specific AdSense Ad Unit Sizes for your WordPress Site

What to do when your responsive Ads don’t meet the requirements of your site? Sometimes you face issues with your Ad viewability when you open your site in a smaller window and then make it full-size and your ads on the widget bar don’t resize properly. In such cases, you use a bit of CSS to set the width and height, and whatever else provided you are modifying it according to Google’s AdSense policies.

It’s important to know which Ad sizes perform better for your website/blog. So let’s take a look on how to modify your responsive code to set specific ad unit sizes for 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 320×100 ad unit.
  • For screen widths between 500px and 799px: a 468×60 ad unit.
  • For screen widths of 800px and wider: a 728×90 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:

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.

In the sample code:

  • Replace all instances of example_responsive_1 with a unique name, e.g., Home_Page, front_page_123, etc.
  • Replace ca-pub-XXXXXXX11XXX9 with your own publisher ID.
  • Replace 8XXXXX1 with your own ad unit’s ID.

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.

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.

sarah ali

sarah ali

Sarah is a passionate writer and blogger. As an early adopter, she enjoys trying out new social media and Internet tools along with WordPress plugins and Web apps.
sarah ali

One comment

Leave a Reply

Your email address will not be published.