Resizing Adsense Units When the Window Resizes

A long lasting problem with Adsense units is the lack of resizing and flexibility of ad units.

1999 views
d

By. Jacob

Edited: 2017-02-11 15:24

Article image

My main complaint with Adsense has, for a long time, been their lack of support for responsive websites, and the lack of flexibility in their ad units. You should think things has changed in 2017, but this age old problem still exists.

I firmly believe the best way to design a website is to design it once. Designing separate versions for different devices is bad. Media queries makes it a lot easier, but fixed width elements are still tough to deal with, including Adsense ad units.

The problem with Adsense units is that they tend to mess up responsive website layouts when the browser is resized, and designing around the problem is very difficult. With our own images, it's easy, we just apply a percentage as width when the window reaches below a certain width.

We can not do that with Adsense for a number of reasons. Firstly, we are not allowed to. Secondly, even if we were allowed to apply such a "dirty" solution, it would simply not work for the wider ads, and text units.

Responsive ad units

Recently, I decided to implement responsive ad units, hoping that they would finally solve the problem. Initially it looked like it worked as intended. The unit would automatically take up available space in the container element. However, I would soon learn that this only works when the page first loads, and not when resizing the browser window.

Additionally, the unpredictable width of responsive units makes them very inconvenient and difficult to fit onto a page while accounting for different window sizes. Even more so than the non-responsive counterparts. Surely this can not be intended behavior?

I am aware that only few users resize their browser window, however, this is definitely not a valid excuse to allow such problems to exist. It could also cause accidental clicks, since ads might overlap with content. If you do a search in Google, then it becomes clear that people are largely ignorant about the issue.

Designing around the problem

Since we are not allowed to resize units, and since responsive units are not working as expected, I think the only solution, in some cases, is to use the legacy units, making sure they will fit in all screen resolutions and window sizes. Sometimes you might also be able to move things around using Media Queries.

Swapping ads with JavaScript or Media Queries is apparently not allowed, as it can cause repeated impressions when a user resizes the window. You can, however, use display:none; to hide a problematic responsive unit.

The way I was fixing the problem, for a long time, was to use media queries to hide my non-responsive units when the window was made smaller than a certain "breaking point". The media queries can look like this.

@media screen and (max-width:900px) {
  /* Whatever */
}
@media screen and (max-width:500px) {
 .wide_unit_1 {display:none;}
 .leaderboard {display:none;}
}

However, I recently learned that using display:none; is only allowed for responsive units.

Quoting this from the Ad implementation policies:

Here are some techniques you’ll want to avoid:

  • Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit
  • Implementing AdSense ad code in a way that covers content or where content covers ads
  • Placing ad units on a mobile site or a responsive design site in such a way which will cause content and ads to overlap
  • Manipulating the ad targeting using hidden keywords, IFRAMEs, or any other method
  • Distributing ads in emails or software
  • Manipulating the delivery or presentation of the ad to attract unwarranted attention (e.g., ads sliding into the screen, ads zooming in/out).
  • Triggering an ad click during user drag actions on a mobile web page.

Since responsive units ironically, due unpredictable width, will not work well on responsive websites, one of the only solution I can think of is to avoid placing ads in problematic locations, and use non-responsive units small enough to fit all supported window sizes.

Hiding a responsive unit when it reaches a certain breaking point, or sizing the container element kinda defeats the purpose of using it. It is a shame that something so simple has to be so complicated.

Sources

  1. Modification of the AdSense ad code - support.google.com
  2. How to modify your responsive ad code - support.google.com

Tell us what you think:

  1. To reach compliance with GDPR while using Adense on out sites, we need to disclose our ad providers and obtain consent from users.
  2. There is a problem with Google AdSense that cause huge blank areas in pages instead of ads.
  3. AdSense Vignette Ads are coming to desktop, but you might want to think twice before enabling them.
  4. Making money on AdSense is not very realistic for Bloggers, the competition is just to high.
  5. How to block certain ads in Adsense.

More in: Adsense