Skip to main content

Customizing Width & Height of Adsense Responsive Ad

We all know that Google AdSense is an advertising program run by the search engine giant Google. It is the worlds largest ads network which works on Pay Per Click system. It displays relevant ads on publishers online contents and help publishers to make money from their online contents. Responsive ads are most popular among publisher whose accounts are approved by Google. Read also : How to save web page as PDF file without plugin

Why Responsive ads

Before the responsive ad, Google display standard banner ads on the publishers page which were remains fixed for all kind of devices. But responsive ads are dynamically control the presentation of your website according to the properties of the screen / device that it’s being viewed on. Responsive ads are automatically resized based on the space available. That's why it becomes most popular among publishers which helps them to increase their revenue. Read also : How to track lost / stolen android phone ans secure data.

How to Make Responsive ad Unit

To make responsive ad unit you need to perform the below necessary steps.

Step 1. Log in to your AdSense account.
Step 2. Click My ads and then click New ad unit.
Step 3. Now type ad unit name and then select Responsive from the Ad size.


Step 4. Select ad type.
Step 5. Now click Save and get code.

The default responsive ad code looks like below code and it can automatically adapt its size to the space available on the page.

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive Ad -->
<ins class="adsbygoogle" data-ad-client="ca-pub-XXXXXXXX" data-ad-format="auto" data-ad-slot="YYYYYY" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Customizing Responsive ad Unit

You can use the default responsive ad code. But if you wish to customize the width & height of this responsive ad unit according to your requirements then you are free to modify. If you are familiar with the respective ad size of desktop, mobile, tablet then you can easily customize the above responsive ad unit. Below are the familiar ad size for desktop, mobile, tablet according to their pixel quality. Read also : How to fix HTTP and HTTPS Mixed Content Errors.

1. 300 x 250 ad on mobiles
2. 336 x 280 ad on tablets (minimum width of 500)
3. 728 x 90 ad on desktop (minimum width of 800)
4. 970 x 250 ad on large resolution desktops (minimum width of 1200)

To make the above dimension ad, you need to modify the above responsive ad unit by adding CSS code with @media query with responsive_ad in the existing responsive ad unit as follows : Read also : How to remove PDF file password without software.

<style type="text/css">
.responsive_ad { width: 250px; height: 250px; }
@media (min-width: 500px) { .responsive_ad { width: 336px; height: 280px; } }
@media (min-width: 800px) { .responsive_ad { width: 620px; height: 300px; } }
@media (min-width: 1200px) { .responsive_ad { width: 970px; height: 250px; } }
</style>

<ins class="adsbygoogle responsive_ad"
    style="display:inline-block;"
    data-ad-client="ca-pub-XXXXXXXX"
    data-ad-slot="YYYYYY"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

You can change responsive_ad with any name. But remember it should be same for all @media quary.

That's it! Feel free to post a comment and share the post on the same. You one share and comment appreciate me lot.


Comments