In this tutorial you are going to learn how to display ads for mobile devices or specific browser sizes in your WordPress site using Advanced Ads.

Methods explained in this tutorial.

  1. mobile ads – ads for mobile or desktop
  2. responsive ads – ads by browser size

Backstory

One of my main reasons to develop the Advanced Ads plugin was the lack of optimization options in other ad plugins. One of the most important features I missed was a way to enable or disable ads for desktop or mobile devices only. Before Advanced Ads I did a lot of hacking and testing. After I understood that ad setups on mobile sites might be completely different from desktop sites, I was able to reach almost the same ad performance on smartphones as on desktops.

One important thing I’ve learned is that the device is rather easy to check, but not always trustworthy. New devices hit the market and also on smartphones there are a lot of display sizes available. When using a responsive layout, on some smartphones there might be enough space for a full banner (468×60), on others only a mobile banner (320×50) or medium rectangle would fit (300×250). Therefore, for Advanced Ads I developed methods to either check the device (mobile or desktop) or the browser size before displaying a specific ad.

1. Mobile Ads – ads for mobile or desktop

Setup

This method uses

This method makes use of the mobile/desktop visitor condition feature.

Ad Settings

First of all, you need an ad to inject into the content. If you don’t have one already, just create it in your WordPress dashboard under Ads > Add New. Choose a custom title and the plain text ad type.

For test purposes you can use the following ad content.

Visitor Conditions

Visit the Visitor Conditions meta box to define some additional settings regarding the device that users, who should see the ad, are using.

To display an ad on mobile devices only select the “only on mobile devices” option like on the screenshot.

visitor condition for mobile adsTo hide an ad from mobile devices, check the not on mobile devices option. The default option is Display on all devices.

This is it, your ad will now be displayed only on mobile devices (or desktop).

What else you need to know about mobile ads by device

Unfortunately, it is not possible to distinct between mobile, desktop and tablet devices, since the  wp_is_mobile()  method used here does not support tablets. Most tablet users will currently be matched as mobile traffic.

As mentioned above, enabling ads by device is good to distinct between mobile and desktop users. This can be used to display ads for mobile specific ad networks or content that should only be visible for desktop or mobile users. To position ads only on devices that are big enough to fit the ad you should make use of the following method.

2. Responsive Ads – ads by browser size

This is the best solution for sites with responsive layouts that want to make sure the ad size really fits.

Setup

This method uses

Features

Since Responsive Ads works by browser size. You could define specific ranges the browser or device must have before an ad is visible. Your setup might for example look like this:

fromto
Mobile Banner (320×50)320px500px
Full Banner (468×60)500px1060px
Large Banner (Custom size: 700×90)1060px

See the video of the Responsive Add-On to get a better idea of this feature:

advancedads-responsive-addon
(click to start)

Get this add-on.

Ad Settings

For test purposes you can use the dummy banner code I already mentioned in the first method above.

Visitor Conditions

After installing the Responsive Ads add-on you can see the Display by browser size section in your Visitors Conditions meta box.

ad-by-browser-sizeThe mobile ads settings consist of three settings:

  1. enable check for device size
  2. set the range of width the browser must have in order to display the ad
  3. choose a fallback method in case the browser width is still unknown

Enable responsive ads

In order to use the options provided by Responsive Ads you need to enable the field Display ad by browser size.

Set browser width range

Next, you can choose the range of the browser width for which the ad should be displayed.

If your site has a responsive layout you might want to check in the frontend for which browser sizes which ad size matches. Often, layouts have some margins and patterns, so that a mobile ad with a width of 320 pixels might actually not fit in a browser with 320 pixels width. Different browser tools, image editing software or a ruler software might help you to determin the right width.

You can leave the second field (max width) empty or at 0 in case you don’t want to limit the maximum browser width.

Be aware that this option is indeed for the browser and not the device width. So you can even test it by making your current browser window a bit smaller.

Fallback method

Responsive ads processes the browser width after the first page view. To distinct whether to display or hide the ad on the very first page view you can choose a fallback method. This fallback is based on the device (mobile or desktop) as explained in method 1 here in this tutorial.

What else you need to know about responsive ads

Responsive Ads comes with 1 year of support, including help to correctly set up ads on responsive layouts.

More information about the Responsive Ads add-on.