Show Native Ads with Prebid.js
In this tutorial, we’ll set up Prebid.js to show native ads.
We’ll use the AppNexus AST adapter since that adapter supports native ads, but the concepts and setup will be largely the same for any bidder adapter that supports the
"native" media type.
Similarly, we’ll use DFP as the ad server, but the concept and implementation should be pretty similar to other ad servers.
- How Native Ads Work
- Working Examples
- Related Topics
How Native Ads Work
A native ad is made up of assets such as a title, description, image URL, that are plugged into a publisher-defined HTML template. The template includes placeholder macros for those assets, and may be styled to match the form of the surrounding page.
At a high level, Prebid.js’ support for native ads works like this:
- Prebid.js requests native demand from bidder adapters
- It sends the received assets to a native template defined in your ad server using key-value targeting
The native ad responses get placed on specific keys that are sent into your ad server:
Note that these keys correspond directly to the
mediaTypes.native object you define in your ad unit (which is described in more detail below).
The ad ops team will then reference these keys in the ad server to set up the title, body, etc. For ad ops setup instructions, see Set up Native Ads in your Ad Server.
Keep the following prerequisites in mind during the implementation:
- Make sure to work with native-enabled bidders. To see which bidders have native demand, see Bidders with Video and Native Demand.
This section describes the implementation using code samples, but ignores some of the details that are common to all Prebid.js setups.
1. Set up your ad slot
In this example we’ll store the ad slot info in a variable for reference throughout the page. We use a 1x1 static ad slot size since AppNexus (our demand partner in this example) uses that size for native creatives.
2. Add native ad units
The native object (shown below) contains the following keys that correspond to the assets of the native ad:
||The title of the ad, usually a call to action or a brand name.|
||Text of the ad copy.|
||The name of the brand associated with the ad.|
||The brand icon that will appear with the ad.|
||A picture that is associated with the brand, or grabs the user’s attention.|
||Where the user will end up if they click the ad.|
||Call to Action text, e.g., “Click here for more information”.|
Each key’s value is an object with several fields. Most important is the
required field, which says whether that asset should be filled in by the bid response. Specifically, bids that do not have all of the native assets marked as required will be dropped from the auction and will not be sent to the ad server.
Prebid.js validates the assets on native bid responses like so:
- If the asset is marked as "required", it checks the bid response to ensure the asset is part of the response
- However, Prebid.js does not do any additional checking of a required asset beyond ensuring that it's included in the response; for example, it doesn't validate that the asset has a certain length or file size, just that that key exists in the response JSON
For each native ad unit, all of the bidders within that ad unit must have declared native support in their adapter if you want ads to appear. If there are any bidders without native support in a native ad unit, requests will not be made to those bidders. For a list of bidders with native support, see Bidders with Video and Native Demand.
Pre-defined native types
Prebid.js defines “types” of native ad for you as a convenience. This way you have less code to maintain, that is hopefully more descriptive of your intent.
For now there is only the
image type, but more will be added.
The image native ad type implies the following required fields:
And the following optional fields:
image ad unit can be set up in the manner below:
3. Add your native ad tag to the page body as usual:
- Setting up Prebid Native in DFP (Ad Ops Setup Instructions)