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: