With the Background Ads placement in Advanced Ads Pro, you can transform the unused background space of your website into a highly converting and attractive looking ad space. This page contains the main documentation of this also “Skin Ads” called ad position.
Here are the most important facts:
- Placement: “Background Ad”
- Ad Types: “image” only
- Ad Groups: random or ordered group type
- passive cache-busting works, AJAX cache-busting doesn’t
- click tracking with the Tracking add-on works
- the ad is always opening in a new window.
In order to set up background ads, you actually only need one image ad and the Background Ads placement.
The image ad does not need more than the image uploaded and the url entered. If you are using the Tracking add-on, clicks on the background ad will also be counted.
After greating the image ad for the background, go to Advanced Ads > Placements and create a new placement. Look out for the following icon.
After selecing the type, choose a name and the image ad you created (or the ad group if you have one).
The background ad will show up right after you saved the placement.
Setting up a background color for the skin ad
When you click on “advanced options” below the item field in the placement settings, you can also set a background color. This color is filling the background when the image ad does not fill the space at the bottom.
Custom Layout (custom CSS)
If you need a layout adjustment when the background ad is displayed, like a larger margin to the top if the background image also contains important content in the top middle of the page, you can use the CSS class added to the body. The class name is the ID Prefix from the plugin options + “body-background”. So in case your prefix it “examp-“, the body class is examp-body-background.
Best practises for background ads
The background ad image is stretched to fit the whole width of the website, so make sure, that it is large enough. At the same time, you should try to reduce the size of the image file as much as possible to load it faster.
The skin ads are fixed on top of the page. If the image does not cover the bottom, the background color is applied. For a better user experience we recommend to create a background ad image that fades into a single color at the bottom, so that the transition into the background color is not visible.
If your theme does not show the background on smaller devices, you might want to disable it using the “browser width” visitor condition. This will save a lot of bandwidth for mobile users.
It is a common issue that the theme is configured in a way that it either covers or overrides the background ads or prevents them from being clicked. In all cases, you or your theme developer should still be able to see that the body element has a background-image style attribute.
You or your theme developer can either find the element in the theme and adjust it so that it doesn’t cover the background anymore, or you can move the background to another element using the code below in the functions.php file of your theme.
add_filter( 'advanced-ads-pro-background-selector', 'my_custom_background_selector' );