AdSense's ability to display ads automatically using the auto ad code is
very convenient. However sometimes we want a specific ad size to be displayed
on specific area of our Blogger websites. For that, we can modify AdSense
responsive ads unit without breaking the rule.
We all know that AdSense maintains a very strict policy. We are not allowed to
modify AdSense ad unit carelessly.
Luckily, AdSense provides us with
clear guideline on acceptable official ad size modification. So you can change the ad size without problem. Here is how we can modify
AdSense responsive ad unit size without breaking the rule.
Read also: Complete Guide on Displaying Advertisement in Blogger using AdSense Ad
Unit
The Reason Why You Need Custom Ad Size
Sometimes we want to show AdSense ad unit on a specific mobile area
only. The ads placement may look fine if it is viewed from desktop. However
ads are loaded differently on mobile.
By default, AdSense auto ads will provide us with 320x250 pixel ads on mobile.
This size is considered to be the highest performer. Most mobile ads nowadays
are available in this size.
However, 320x250 pixel ad may not be suitable if you want to display ad under
or over your website header or article's titles. Big ads loading on top of
your website may not be desirable for the sake of user-friendliness.
Some goes with ads which appear on desktop devices. They also appear too big
sometimes.
 |
Your content should be above the fold when the website is just loaded. |
Ideally the content of your website should be loaded first before the ads. Big
advertisement on top of your website may push your actual content below the
visible fold of the phone screen.
Visitors would be required to scroll down so that they can see the actual
information. Such situation is not great and it is also against AdSense
policy.
Read also:
How to Solve AdSense Policy Violation Site Behavior: Navigation
Changing AdSense Size Into Horizontal Banner Ads
Responsive AdSense ad units will fill the the blank space of your blog. The
size of the ads will be automatically adjusted to fit the device screen
size.
Sometimes, in Dekstop or in Mobile, the ads may appear too big. Huge billboard
banner could be displayed under your article's title or navigation menu
automatically.
 |
The big billboard banner ad below title push down the article. |
Such ad banner, like the one in the picture above, is not proportional. Your
visitors will think that your website is low quality because the first thing
they see is a huge ads banner. Moreover, it
pushes content below the fold.
Huge ads banners on the middle or bottom part of your website are fine.
However, the top part of your website ideally should only display small
banners.
The ad at the top part should not be too huge.
The first thing a visitor see when your website is being loaded should not
be just a big ad. Visitors should see the real content right away.
Please note that ad unit size does not determine CPC. Small or big
banner may have same CPC or CPM. Size doesn't matter. Displaying smaller
banner on top of your website will still be profitable.
Here are the ideal high-performing horizontal banner ad (leaderboard) sizes
based on the type of the device:
- Mobile Phone: 320x100 or 320x50
- Tablet: 468x60
- Dekstop: 728x90 or 468x60 (if the container is small)
In order to change the size, you need to modify a responsive AdSense ad unit
code. Follow the steps carefully so that the ads will appear properly.
Read aslo: AdSense "Add Site" Feature Now Accepts Blogspot Domain!
Customizing AdSense Responsive Ad Unit in Blogger
Step 1: Create a new display ad unit
Go to AdSense dashboard, then select Ads > Overview. Then choose "By
ad unit" and select Display Ads. Name it clearly (for example:
display_custom_1). Make sure the size is responsive. Finally, click
Create.
 |
Creating AdSense responsive ad unit |
Step 2: Modifying the code
After creating the ad unit, you will provided with a code. Note the
data-ad-client and data-ad-slot from the generated code. We will put those two
element in the new custom code.
 |
Check the data-ad-client and data-ad-slot. |
For example, the display_custom_1 has data-ad-client = ca-pub-123456789 and
data-ad-slot = 2222233333.
Use the following snippet to change AdSense responsive ad unit size in
Blogger:
<style>
.display_custom_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .display_custom_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .display_custom_1 { width: 728px; height: 90px; } }
</style>
<div align="center">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- display_custom_1 -->
<ins class="adsbygoogle display_custom_1"
style="display:inline-block"
data-ad-client="ca-pub-123456789"
data-ad-slot="2222233333"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
Change the highlighted parts of the code snippet with your own data. The width
and height pixel values can be changed based on the
supported ad sizes list. You can't just use random size because the ad may not appear at all or
pushing out of the container and disturb your theme.
The code above will change the ad appearance to horizontal banner. Here is the
explanation:
If the device screen is less than 500px (mobile phone), a 320x100 ad will
appear.
For a device which has screen size between 500 to 800 pixel (tablet), the ad
will become 468x60.
For devices which have larger screens, over 800px (desktop), the ad will be
resized to 728x90.
The ideal placement for the above modified codes are:
- Under main navigation menu.
- Under or above blog's header.
- Above or under the article's titles.
- Bottom of the article.
You can place the code using HTML/Javascript gadget if your custom theme
support such placement. You may also put the custom responsive AdSense ad unit
directly to the HTML code of your theme.
Things to Do After Using Modified AdSense Size
After placing the code in the theme, preview it via AdSense setting overview.
The previewed ad should be displayed in the new modified size. To access it,
from you AdSense dashboard, select Ads > Overview > select site.
Your blog will be previewed shortly.
The ad space may be blank for a moment, only displaying blank space. Once your
AdSense ad inventory adjusts itself, more custom ad size will start to
appear.
AdSense will also provide you an "Opportunity". You will receive a
notification about changing the code but do not be alarmed. You will receive a
code snippet which will allow you to display ad in full width if it is viewed
from phone. It is fine to ignore the notification.
Conclusion
To change AdSense ad size is not that difficult. All you need to do is
following the code example and use your own data. This modification is
official so you are not violating any AdSense policy at all. It's perfectly
safe and I've personally tested it myself.
Having a balanced proportion between ad and content space will ensure that
your website is healthy and user-friendly.
Read also:
Tips on Getting AdSense Approval for New Blogspot Users
How to Use Google Question Hub for Blogger to Create Original
Articles
Does Enabling Google AdSense Affect Blogger Website Ranking?