How To Create Responsive Google Ads For Better Optimization

When it comes to optimizing you website, accessibility is one factor you just can’t rule out. Your site should not only just look and function great, it also needs to work well with mobile devices, since more than 13% of internet users access the internet through smartphones and tablets. And speaking of mobile devices, you might have heard of Responsive Web Design. Responsive Websites are websites that are optimized to be viewed on a range of screen sizes, including mobile and tablet screens. Hence, no matter what device you are using, your site will look consistent, and be easily readable on a wide range of mobile devices. And while your site might be responsive, your AdSense ads won’t. So how can you make your Google Ads responsive as well?

Why use responsive ads?

As we said, responsive websites are better optimized, and perform consistently across various platforms. This is achieved by resizable page elements, which ‘respond’ to what sort of screen is accessing them. Responsive websites are recommended by Google.

When you add AdSense ads to your site, they aren’t responsive by default. This means, that they will not resize themselves when viewed on a mobile device, and may extend beyond the visual range of the screen. To tackle this problem, they need to be made responsive through a JavaScript code.

Making ads responsive

Responsive ads are dynamic, and are changeable with respect to size. The logic is pretty simple. You pre-define some ad units, (for e.g. 768×90, 468×60, 300×250, and 150×150 etc). And based on the user’s screen size, the best suited ad unit gets served.

Here is the JavaScript code for making this work. You can use this code instead of the standard code.

// <![CDATA[
javascript">
    google_ad_client = "ca-publisher-id";
    if (window.innerWidth >= 800) {
        google_ad_slot = "ad-unit-1";
        google_ad_width = 728;
        google_ad_height = 60;
    } else if (window.innerWidth // 

The only thing you need to change is the value for google_ad_client and google_ad_slot. Change it to your own. You can find these values in your default AdSense JavaScript code.

How does it work?

This is a really simple piece of code actually. As you can see, it works with the window.Innerwidth property to serve ads. This property fetches the user’s browser window width, and then uses it in conditional statements to serve ad units conditionally. For example, if the width is less than 400, then the user will be served with the 300×250 sized ad units.

While there’s nothing wrong with making Google Ads responsive, be careful not to resize the ad units. This is very important, because Google is very strict regarding customizations in AdSense ad codes. So you should stick to the default ad sizes only. And as far as changing ad units is concerned, well, publishers experiment all the time with colors and sizes to determine what combination works best. You should be fine too. Keep within the limits, and make your site a lot more powerful and dynamic. All the best J