How to target mobile ads

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

Backstory

One of my main reasons for developing Advanced Ads was the lack of optimization options in other ad plugins. One of the most important features I missed was enabling or disabling 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 could reach almost the same ad performance on smartphones as on desktops.

I’ve learned that the device is relatively 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.

<div style="display: inline-block; background: #ddd; width: 468px; height: 60px; line-height: 60px; text-align: center;">DEMO FULL BANNER</div>

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 “Device” condition like on the screenshot.

Mobile ads settings of Advanced Ads
If choosing “Mobile”, ads will appear only on mobiles and tablets

To hide an ad from mobile devices, check the Desktop option. The default option is Mobile (including tablets). This is it. Your ad will now be displayed only on mobile devices, including tablets, or only on desktops.

To target tablets and mobiles separately, you can additionally use the “Tablet” condition provided by Responsive Ads.

What else you need to know about mobile ads by device

Unfortunately, it is impossible to distinguish 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 a device is suitable to distinguish 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 big enough devices to fit the ad, you should use 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:

Video: 01:08min
Click on the preview image to load and start the video from YouTube. By clicking you agree that your information will be sent to and processed by YouTube, LLC, 901 Cherry Avenue, San Bruno, CA 94066, USA. Read more

Ad Settings

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

Visitor Conditions

After installing the Responsive Ads add-on, you can see the Browser Width section in your Visitors Conditions meta box.

Mobile ads per browser width
Targeting ads by browser width

The mobile ads settings consist of three settings:

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

Enable responsive ads

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 ruler software might help you determine the right width.

You can leave the second field (max. width) empty or at 0 if 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 process the browser width after the first page view. To distinguish whether to display or hide the ad on the first page view, you can define a fallback width.

You can find this option in Advance Ads > Settings > General > Responsive Ads.

Responsive Ads Fallback settings
You can define the fallback width in the settings

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.