As you probably already know, Google Adsense recently released a new responsive ad unit that will scale to fit the width of its parent container.
This unit is perfect if you have a responsive design and you are worried that an ad will mess with the layout of your website.
This ad unit will automatically scale to fit the width of the user’s screen.
Best of all, you don’t need to know much about CSS or responsive design in order to use it.
As soon as you create your new responsive advert, Google will give you two options to choose from: These are “Smart Sizing” and “Advanced.”
By default, “Smart sizing” will automatically choose the best ad type for the user’s screen.
Unfortunately, this “auto” resize can get a bit messy at times, depending on the screen size.
For example, on one of my websites, it was displaying a small box advert in a section that had been specifically designed for a horizontal unit. As you can imagine, it didn’t look so great.
After you’ve been given the “Smart Sizing” code, you’ll probably notice that there is a data attribute called data-ad-format.
By default, this is set to data-ad-format=”auto”.
However, you can modify this attribute in order to display a specific shape.
Example code:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- My Ad Name-->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-00000000000000"
data-ad-slot="00000000"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Below are some of the options that you can use instead of “auto”.
Vertical.
If you want a vertical advertisement, then you can replace data-ad-format=”auto” with data-ad-format=”vertical”. This is especially useful for side columns.
Horizontal.
If you’re looking for a responsive leaderboard / horizontal ad unit, then you can replace “auto” with “horizontal”.
This is the type of ad that is usually placed at the top of the page.
Rectangle.
If you want a rectangular or box-shaped unit, then you can change “auto” to “rectangle”.
An example Adsense code with modification:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- My Ad Name-->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-00000000000000"
data-ad-slot="00000000"
data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
As you can see, there is not much editing involved.