With the Background Ads placement in Advanced Ads Pro, you can transform your website’s unused background space into a highly converting and attractive looking ad space. You can display ad units or ad groups in the background of your layout. These image ads can also contain a link.

This page contains the main documentation of this ad position.

Overview

Here are the most important facts:

  • Placement type: “Background Ad”
  • Ad Types: “image” only
  • Ad Groups: random or ordered group type
  • click tracking with the Tracking add-on works
  • the link of the ad is always opening in a new window.
Background Ads Placement of Advanced Ads
Creating a new placement to embed skin ads to your website

Usage

To set up this type of 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 this ad will also be counted.

After creating the image ad for the background, go to Advanced Ads > Placements and create a new placement of the type Background Ad. Choose a name and the image ad you created (or the ad group if you have one).

The background advertisement 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 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 practices for this type of ads

The background ad image is stretched to fit the website’s whole width, 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 ad units are fixed on top of the page. If the image does not cover the bottom, the background color is applied. 

We recommend creating a background ad image that fades into a single color at the bottom for a better user experience 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.

Example of a skin ad integrated with Advanced Ads
Example of a background advertisement integrated with Advanced Ads

Troubleshooting

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 to not 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' ); function my_custom_background_selector(){ return '.main-container'; //replace '.main-container' with the class or id used in your theme } 

Note: replace .main-container with the overlaying element.

Go to your site and right-click on the area where you would like the background ad to appear. Then click on “inspect”. That should open the developer console in your browser, highlighting the HTML element that is covering that space.

Look at the HTML element to see if it has an id or class attribute. E.g., <div id="container" class="grid-1 block">.

If there is an id then replace .main-container in your code with the value + #. So in my example, that would be #container.

If there are only classes then you can use them. E.g., .grid-1 or, if there are multiple classes .grid-1.block.

What else you need to know

Limitations on AMP

Depending on the solutions and settings you are using to create AMP pages, the background ads could show up on them.

Click tracking, however, will not work on AMP.

Alternative placements for background ads

If the background ads don’t work well with your theme, and you can’t solve it yourself or don’t have a developer, you might get faster results with another placement.

Try to show two sticky ads instead of the background ads on the positions left and right of the content. You can target them with the Browser Width Condition to the appropriate screen widths. For mobile users, insert a sticky ad at the bottom of the page instead.

Another advantage of this alternative is that you can use any ad code there and are not limited to image ads.

Monetizing your website’s background with The Moneytizer

If you don’t know how to monetize and market your website’s background yet, register with The Moneytizer. The network offers its publishers ad media for this placement, which you can insert via a custom script in your page’s footer. You don’t need the background ad placement for this network.

This tutorial will show you how to integrate ads from The Moneytizer into WordPress using our plugin.