Modifying data-ad-format on Google Adsense – Auto, Rectangle, Horizontal and Vertical.

As you probably already know, Google Adsense recently came out with a responsive ad unit that will scale to fit the width of its parent container. Basically, if you’ve got a responsive design and you’re worried that a statically-sized advertisement will mess with the layout of your website, Google now provides a new responsive unit, which will automatically scale to fit the width of the user’s screen (of course, the size can also depend on what adverts are available for your content at the time). Best of all; you don’t need to know much about CSS or responsive design in order to use it!

As you soon as you create your new responsive advert, you will be given 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, I recently found out that 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 use instead of “auto”.

Vertical

If you want a vertical advertisement, then you can replace data-ad-format=”auto” with data-ad-format=”vertical”. Especially useful for side columns, although I’m not sure if verticals are suitable for mobile devices.

Horizontal

If you’re looking for a responsive leaderboard / horizontal ad unit, then you can replace “auto” with “horizontal”. You’ll often see these being used at the top of the page.

Rectangle

If you want a rectangular / box-shaped unit, then you can change “auto” to “rectangle”. Example 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, I didn’t have to do too much editing :P

I know that the official documentation on “smart resizing” is a little bit sparse at the moment, so hopefully you found this article to be somewhat helpful!