Adding Native Ads to your Website

The following document provides an overview for integrating Audience Network native ads within a mobile website. Instructions below are specifically for publishers with Prebid wrappers but can be leveraged by publishers that use a managed wrapper solution as well.

This documentation is specific to the newest version of our Open Source Prebid Adapter.

Further information on Audience Network Native policy can be found on our Implementation Requirements for Audience Network Ads page.

There are a number of mandatory advertiser assets that must always be included in your native ad design. Failing to include any of these items could result in Facebook disabling your placement:

  • Ad Title
  • CTA (Call-to-Action) Button (eg. Install Now, Learn More)
  • The Advertiser Creative Asset (ex: Image, Video, Carousel) or Advertiser Icon
  • AdChoices icon

In addition your ad must comply with the Audience Network Policies and must be clearly labeled and distinguishable from content.

Steps to implement Native:

  • Edit Divs in adapter. Each class maps to the native assets you want to display. The following are the available assets and definitions:
    Native AssetClassDescription

    Icon Image


    A square image icon, with a 1:1 aspect ratio (required if no fbMediaClass)



    The ad title (required)



    The creative asset (ex: Image, Video, Carousel) (required if no fbAdIcon class)



    The ad subtitle



    The ad body text



    The ad call to action (required)

    Ad Link


    An achor that determines clickable area within native ad

    Social Context


    The ad social context

    Ad Choices


    The ad choices icon (required)

  • You can reorder or remove divs as you see fit as long as the above required assets are included:
    <div class="thirdPartyRoot">
      <a class="fbAdLink">
        <div class="fbAdMedia thirdPartyMediaClass"></div>
        <div class="fbAdSubtitle thirdPartySubtitleClass"></div>
        <div class="fbDefaultNativeAdWrapper">
          <div class="fbAdCallToAction thirdPartyCallToActionClass"></div>
          <div class="fbAdTitle thirdPartyTitleClass"></div>
  • Configure adUnits to specify 'native' as the format (older versions of our adapter may need to specify the param like this: native: true rather than format: 'native'.
    var adUnits = [{
      code: 'div-gpt-ad-1',     
      sizes: [[300, 250]],
      bids: [{
        bidder: 'audienceNetwork',
        params: {
          placementId: '873801679416180_873802436082771',
          testmode: false,
          format: 'native'
  • Traffic native styles that map to above classes with the creative in the ad server (alternatively you can place the styles in our adapter code):
    <!--Ad Tag -->
    var w = window;
    for (i = 0; i < 10; i++) {
      w = w.parent;
      if (w.pbjs) {
        try {
          w.pbjs.renderAd(document, '%%PATTERN:hb_adid%%');
        } catch (e) {
    <!-- Native Styles -->
        .thirdPartyRoot {
          background-color: white;
          color: #444;
          border: 1px solid #ccc;
          border-left: 0;
          border-right: 0;
          font-family: sans-serif;
          font-size: 14px;
          line-height: 16px;
          width: 320px;
          text-align: left;
          position: relative;
        .thirdPartyMediaClass {
          width: 320px;
          height: 168px;
          margin: 12px 0;
        .thirdPartySubtitleClass {
          font-size: 18px;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          height: 16px;
          -webkit-box-orient: vertical;
        .thirdPartyTitleClass {
          padding-right: 12px;
          line-height: 18px;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          height: 36px;
          -webkit-box-orient: vertical;
        .thirdPartyCallToActionClass {
          background-color: #416BC4;
          color: white;
          border-radius: 4px;
          padding: 6px 20px;
          float: right;
          text-align: center;
          text-transform: uppercase;
          font-size: 11px;
        .fbDefaultNativeAdWrapper {
          font-size: 12px;
          line-height: 14px;
          margin: 12px 0;
          height: 36px;
          vertical-align: top;