This tutorial will teach you how to display ads for mobile devices or specific browser sizes in your WordPress site using Advanced Ads.
Table of Contents
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 only for desktop or mobile devices.
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, many display sizes are 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, I developed methods for Advanced Ads to check the device (mobile or desktop) or the browser size before displaying a specific ad.
Mobile Ads – ads for mobile, tablet or desktop
Ad Settings
First of all, you need an ad to inject into the content. If you don’t already have one, 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>
Search the Visitor Conditions meta box to define some additional settings regarding the device that visitors who should see the ad use.
To display an ad on mobile devices, only select the “Device” condition like on the screenshot.
To hide an ad from mobile devices, but show it on Desktops and Tablets, select the options Desktop and Tablet.
That’s it. Your ad will now be displayed only on mobile devices, tablets, or desktops.
Responsive Ads – ads by browser size
This is the best solution for sites with responsive layouts that want to ensure the ad size fits.
Since the Responsive Ads add-on 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:
| from | to | |
| Mobile Banner (320×50) | 320px | 500px |
| Full Banner (468×60) | 500px | 1060px |
| 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 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.
The mobile ads settings consist of three settings:
- enable check for device size
- set the range of width the browser must have to display the ad
- choose a fallback method in case the browser width is still unknown
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 should check in the frontend for which browser sizes which ad size matches. Often, layouts have some margins and patterns, so a mobile ad with a width of 320 pixels might not fit in a browser with 320 pixels width. Different browser tools, image editing software, or ruler software might help you determine the correct 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’s width. 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. You can define a fallback width to distinguish whether to display or hide the ad on the first page view.
You can find this option in Advance Ads > Settings > General > Responsive Ads.
What else you need to know about responsive ads
Modern iPads request the desktop version of a website by default. One can change that in the Safari options. So it is more reliable to use the Browser Width condition to determine the available space on such devices.
Responsive Ads comes with one year of support, including help to correctly set up ads on responsive layouts.
Starting in 2009, Thomas’ own word game website grew to 40 MM page impressions per month. He then built Advanced Ads to help his colleagues to place ads and test different ad positions and networks tests without any coding skills. Thomas now enjoys improving the product for our more than 150,000 users worldwide.