Show Native Ads with Prebid.js

In this tutorial, we’ll set up Prebid.js to show native ads.

We’ll use the AppNexus 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 Google Ad Manager as the ad server, but the concept and implementation should be pretty similar to other ad servers.

For a full working code sample using the techniques described on this page, see the Prebid Native Example.

• Show Native Ads with Prebid.js
  • How Native Ads Work
  • Prerequisites
  • Implementation
    • 1. Set up your ad slot
    • 2. Add native ad units
      • Pre-defined native types
    • 3. Add your native ad tag to the page body as usual
  • Sending Asset Placeholders
    • 1. Configure which assets to send as placeholders
    • 2. Prebid.js sends placeholder values
    • 3. Native template replaces the placeholders
  • Working Examples
  • Further Reading

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:

1. Prebid.js requests native demand from bidder adapters
2. 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. For example:

• hb_native_title
• hb_native_body
• hb_native_body2
• hb_native_brand
• hb_native_image
• hb_native_icon
• hb_native_linkurl
• hb_native_privacy
• hb_native_privicon
• hb_native_rating
• hb_native_cta

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 GAM Step by Step - Native Creatives.

Prerequisites

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.

Implementation

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.

const slot = {
    code: '/19968336/prebid_native_adunit',
    div: 'div-prebid-native-test-1',
    size: [1, 1],
};

2. Add native ad units

The native object (shown below) contains the following keys that correspond to the assets of the native ad:

Specific bidders may not support all of the fields listed below or may return differing responses for the assets that are requested.

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.

pbjs.addAdUnits({
    code: slot.code,
    mediaTypes: {
        native: {
            image: {
                required: true,
                sizes: [150, 50]
            },
            title: {
                required: true,
                len: 80
            },
            sponsoredBy: {
                required: true
            },
            clickUrl: {
                required: true
            },
            privacyLink: {
                required: false
            },
            body: {
                required: true
            },
            icon: {
                required: true,
                sizes: [50, 50]
            }
        }
    },
    bids: [{
        bidder: 'appnexus',
        params: {
            placementId: 13232354
        }
    }, ]
})

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:

• image
• title
• sponsoredBy
• clickUrl

And the following optional fields:

• body
• icon
• cta

A native “image-type” ad unit can be set up as shown in the following example.

const adUnits = [{
    code: 'adUnit-code',
    mediaTypes: {
        native: {
            type: 'image'
        }
    }
    bids: [{
        bidder: 'appnexus',
        params: {
            placementId: 13232354
        }
    }]
}];

There are two methods for defining sizes for image-like assets (image and icon). Both are shown below, but the first example (using sizes) is more widely supported by demand partners.

Using mediaTypes.native.image.sizes (or mediaTypes.native.icon.sizes for icons):

mediaTypes: {
    native: {
        image: {
            required: true,
            sizes: [150, 50]
        }
    }
}

Using mediaTypes.native.image.aspect_ratios (or mediaTypes.native.icon.aspect_ratios for icons):

mediaTypes: {
    native: {
        image: {
            required: true,
            aspect_ratios: [{
                min_width: 300,        /* Optional */
                min_height: 200,       /* Optional */
                ratio_width: 2,        /* Required */
                ratio_height: 3,       /* Required */
         }]
        }
    }
}

3. Add your native ad tag to the page body as usual

<div id="div-prebid-native-test-1">
    <script>
        googletag.cmd.push(function() {
            googletag.display('div-prebid-native-test-1');
        });
    </script>
</div>

Sending Asset Placeholders

Prebid.js sends received asset values to a native template defined in your ad server using key-value targeting. The key-value targeting pairs are passed to the ad server as query string parameters. In some cases, sending native asset values as query string parameters may cause errors. For example, a long clickUrl value can exceed an ad request URL limit, or special characters within a body can get mangled by URL encoding. In these cases, you can opt to send URL-safe placeholder values to the ad server, and then in the native template, replace the placeholder values with the actual native values through a non-URL request to and response from Prebid.js. Here’s how it works:

1. Configure which assets to send as placeholders

Within mediaTypes.native, add sendId: true to any asset object you wish to send as a placeholder. For example, to send body and clickUrl as placeholders:

mediaTypes: {
  native: {
    body: {
      sendId: true
    },
    clickUrl: {
      sendId: true
    },
  },
},

To highlight a point noted above, if you anticipate your asset’s values will contain special characters (eg. ! # , = ;) - it’s highly recommended that you enable this placeholder setting for those assets. Most ad servers generally don’t permit certain special characters in their ad request URL; they may stop reading the query data past that point or throw errors. By using the placeholders, it will help you avoid having those characters directly interact with the ad server’s parser. Thus it will help ensure your native ads render and work as expected for the end-user.

2. Prebid.js sends placeholder values

For the assets configured with sendId: true, Prebid.js sends a placeholder value describing the asset type and the adId for the associated ad. In this example, Prebid.js would send the body and clickUrl assets as values like hb_native_body:38a33cef3e926f and hb_native_linkurl:38a33cef3e926f. The value after the : in each of these examples is the adId generated by Prebid for that native ad object.

3. Native template replaces the placeholders

Finally in the native template on the adserver, search for any expected placeholder values and replace them with their actual values.

Placeholder values will start with the hb_native_... key for that asset type, contain a : separator, and end with the adId for that ad object (available via the Prebid targeting key hb_adid). When Prebid.js receives a postmessage request in the form

{
  "message": "Prebid Native",
  "action": "assetRequest",
  "adId": "38a33cef3e926f",
  "assets": [
    "hb_native_body",
    "hb_native_linkurl"
  ]
}

it will respond to that request with the actual asset values for that adId in the form

{
  "message": "assetResponse",
  "adId": "30655b7d68dc51",
  "assets": [
    {
      "key": "body",
      "value": "This is a Prebid Native Creative"
    },
    {
      "key": "clickUrl",
      "value": "https://prebid.org/dev-docs/show-native-ads.html"
    }
  ]
}

A script within the native template can listen for this response and replace the placeholder values with their actual values.

The native-trk.js script from prebid-universal-creative can replace native placeholder values with their actual values. If a native template includes a link with a pbAdId attribute set to the targeting key hb_adid, and a class attribute set to "pb-click", the function pbNativeTag.startTrackers will replace any placeholders found within the HTML template (but not CSS template) with their actual values automatically. For more on how to set this up in a native template, see Style Your Native Ad

Working Examples

• Prebid Native Examples

Further Reading

• GAM Step by Step - Native Creatives (Ad Ops Setup Instructions)