How to edit AdSense ad code in compliance with Google policies and guidelines

You can alter the AdSense responsive ad code and enhance the user experience on your site. I have explained several modifications based on Google guidelines.

I needed to optimize some ad placements on my website, so I spent a few weeks reading the rules, instructions, and examples illustrated on the AdSense help center and the official product forum.

There is a lot of misconception about this argument as many publishers believe they can’t modify the code in any way.

You can safely edit the AdSense responsive ad code and improve the user experience on your website depending on the screen size: mobile, tablet, laptop, and desktop. Google provides a few examples, but the documentation is mostly an introductory tutorial, and you need to research, learn, and test on your own all the possible code variants.

I tried several modifications before finding the ones that work the best for my needs, so I decided to write this quick tutorial providing you a few pre-made codes that can be easily adapted for most uses.

Create a responsive ad unit

First of all, create a responsive ad unit in your AdSense account, and note down your publisher ID and the ad unit’s ID.

data-ad-client="ca-pub-xxxxxx"
data-ad-slot="xxxx"

We will now use them to create a custom ad unit based on the screen width of the visitors. Note that only responsive ad units can be modified.

Exact ad unit size depending on the screen width

<style>
.example_one { width: 300px; height: 250px; }
@media (min-width: 340px) { .example_one { width: 336px; height: 280px; } }  
@media (min-width: 500px) { .example_one { width: 468px; height: 60px; } }
@media (min-width: 732px) { .example_one { width: 728px; height: 90px; } }
@media (min-width: 974px) { .example_one { width: 970px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- top_blog -->
<ins class="adsbygoogle example_one"
    style="display:inline-block"
    data-ad-client="ca-pub-xxxxxx"
    data-ad-slot="xxxx"
    data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

This is the simplest example because you are indicating the exact ad size depending on the screen width of the user.

• Replace all instances of “example_one” with an unique name for your code.

  • The name can contain only English letters, numbers, and underscores.

• Insert your publisher ID and the ad unit’s ID you have previously noted down.

The default ad size

.example_one { width: 300px; height: 250px; }

This first line of code indicates the default size that must be used when you have provided no instructions for a particular screen width.

In this example, this is the size that will appear on mobile, but of course you can replace it with any mobile ad unit. The typical non-intrusive size suggested on mobile devices is 320x100.

CSS media queries

@media (min-width: 340px) { .example_one { width: 336px; height: 280px; } }  
@media (min-width: 500px) { .example_one { width: 468px; height: 60px; } }
@media (min-width: 732px) { .example_one { width: 728px; height: 90px; } }
@media (min-width: 974px) { .example_one { width: 970px; height: 90px; } }

Using the CSS media queries, you can select the size of the ad based on the screen of the visitor.

I suggest skipping the 468x60 Banner because generally it performs very poorly. It is preferable to show the Medium (300x250) or Large Rectangle (336x280) ad units, and then switch to the Leaderboard (728x90) once the screen is big enough.

Regarding the exact size to select, it mostly depends on your website design. The settings above work well for a horizontal banner if you have the entire screen size at your disposal.

If you have a sidebar or other elements, you must calculate their size and include them in the min-width. For example, this is the code I am testing in the space below each article:

.bot_blog { width: 300px; height: 250px; }
@media (min-width:340px) { .bot_blog { width: 336px; height: 280px; } } 
@media (min-width: 1075px) { .bot_blog { width: 728px; height: 90px; } }
@media (min-width: 1360px) { .bot_blog { width: 970px; height: 250px; } }

• The first two lines of code determine the size that must be delivered on mobile devices and tablets.

• The remaining two lines determine the size on desktop. The min-width I selected for the 728x90 ad unit is 1075px because I had to consider the design of the website and the sidebar.

This code gives me also the opportunity to talk about the 970x250 Billboard. In the first example, I used the 970x90 Large Leaderboard, which is certainly more common.

The 970x250 variant is less used by both websites and advertisers, and AdSense alerts us in the guides that there might be less ad inventory available.

In this case, displaying a bigger banner may not bring more revenue, but if you are not worried about a potential monetary loss, testing it for a few weeks or a month might be worth the time. Depending on your website design and niche, it could even generate more money.

Enable full-width banners on mobile devices

data-full-width-responsive=”true"

This is something not stated in the standard guide on the AdSense help center. Google detected the custom code implementation on the website and sent me an automatic message alerting about this option.

• Setting the parameter to “true” will show full-width banners on mobile devices (when possible).

• Setting it to “false” will only show standard banners on mobile devices.

• Not setting the parameter at all will still show the full-width banners on mobile devices, but not as often as when the parameter is set to “true”.

If the full-width banners do not ruin your website design on mobile, I strongly suggest setting this parameter to “true” because it might increase your revenue. According to the AdSense help center “This setting has the maximum potential for increased revenue”.

The following video from the AdSense team explains the best practices to optimize mobile ads and how full-width responsive ad units work on mobile.

Ad unit with a fixed height

<style type="text/css">
.sidebar_top { display:inline-block; min-width: 160px; max-width: 300px; width: 100%; height: 600px; }
@media (max-width: 874px) { .sidebar_top { display: none; } }
</style>
<ins class="adsbygoogle sidebar_top"
  data-ad-client="ca-pub-xxxxxx"
  data-ad-slot="xxxx"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

This code is particularly useful for sidebars because usually there you want vertical banners.

Also in this case, give the code an unique name replacing all instances of “sidebar_top”, and then insert your publisher ID and the ad unit’s ID you are going to use for this placement (always a responsive ad unit).

.sidebar_top { display:inline-block; min-width: 160px; max-width: 300px; width: 100%; height: 600px; }

There are three vertical banner sizes which are usually used in the sidebars:

• 120x600 - Skyscraper

• 160x600 - Wide Skyscraper

• 300x600 - Half Page

All the three sizes have a height of 600 pixels. In the example above, we are asking AdSense to provide one ad unit with a width going from 160 to 300 pixels, and with a height of 600 pixels.

• You could include also the 120x600 one by selecting a min-width of 120px, but nowadays it performs poorly, so I suggest avoiding it.

• You can also ask only 300x600 ad units, but I believe it is important to include the 160px one in case there is a better paying advertiser available on that position.

I noticed that sometimes also smaller ads - such as the Medium Rectangle (300x250) - are presented in this placement. It might depend either on a lack of inventory or on a better paying advertiser available on that particular size.

A smaller ad unit with the potential to increase my revenue isn’t a problem for me, so I have not tried to alter this behaviour. I believe you can prevent AdSense from showing similar-sized display ads by blocking the option in your account at: Blocking Controls > All Sites > Ad Serving.

Of course, horizontal banners are not served because they wouldn’t fit in the 300 maximum width, so I believe we should leave this option active for a better revenue.

Hiding an ad unit on mobile or desktop

@media (max-width: 874px) { .sidebar_top { display: none; } }

In the fixed-height ad unit example, I have included this CSS media query.

My sidebar moves below the articles on screens with a size smaller than 875 pixels, and I do not want to show any ad banner there on mobile, so in the code I have set “display” to “none” when the screen of the user has a maximum width of 874 pixels.

To prevent the ad from displaying only on certain or all mobile devices, use a max-width of 300 or 400 pixels.

@media (max-width: 400px) { .sidebar_top { display: none; } }
@media (min-width: 500px) { .sidebar_top { width: 468px; height: 60px; } }

Of course, you could also hide the banner on devices with a maximum width of 400px and show it on those with a minimum width of 500px. The code can be altered easily depending on your needs.

Ad unit with a fixed width

Beware: I have not tested the following implementation, but considering all the codes explained above, I believe it will work without issues. If it doesn’t work, no ad will be served in that space - do not worry.

.example_two { display:inline-block; min-height: 90px; max-height: 250px; height: 100%; width: 970px; }

Recycling the code used for the ad unit with a fixed height, we can create one with a fixed width.

In this case, the ad unit should display a Large Leaderboard (970x90) or a Billboard (970x250). I think that the standard Leaderboard (728x90) might also appear in this location depending on the ad inventory available.

General rules on the number of ad units and their size

In August 2016, Google introduced the Valuable Inventory policy. You are not limited anymore to only three ads per page or to just one large ad unit per page (such as 300x600), but the amount of ads that can be placed on a page depends on its content. Note that you must take into consideration also ad banners from other ad companies.

In the video above, the AdSense team talks about the Valuable Inventory policy. You can find more info in the dedicated page on the help center.

In May 2017, Google also lifted the ban to 300x250 sized ad units when used above the fold on mobile. What matters the most is having a mobile-friendly website and the user experience on it. This is the official news that announced the policy update.

Unless you have strict requirements based on your website design, I suggest using a standard responsive ad unit on mobile to find out what AdSense prefers on your website. Based on the outcome, you will have a better idea on how to organize the ad space.

Optimized mobile ad units placement - Google

I must point out that (both on desktop and mobile) you can also use a custom-sized ad unit. These are the requirements and limits:

• Only one dimension can be greater than 450 pixels

• The minimum width is 120 pixels

• The minimum height is 50 pixels

• Neither height nor width can exceed 1200 pixels

I recommend using only the classic sizes to avoid blank spaces on your website. Also, the top performing ad sizes listed by AdSense usually bring more revenue because there is more ad inventory available.

Currently, these are the top performing ad sizes:

• 300x250 - Medium Rectangle

• 336x280 - Large Rectangle

• 728x90 - Leaderboard

• 300x600 - Half Page

• 320x100 - Large Mobile Banner

Header image: Google