Native Format Instructions

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

    fbAdIcon

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

    Title

    fbAdTitle

    The ad title (required)

    Media

    fbMediaClass

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

    Subtitle

    fbAdSubtitle

    The ad subtitle

    Body

    fbAdBody

    The ad body text

    Call-to-action

    fbAdCallToAction

    The ad call to action (required)

    Ad Link

    fbAdLink

    An achor that determines clickable area within native ad

    Social Context

    fbAdSocialContext

    The ad social context

    Ad Choices

    fbAdChoices

    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>
        </div>
      </a>
    </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 -->
    
    <script>
    var w = window;
    for (i = 0; i < 10; i++) {
      w = w.parent;
      if (w.pbjs) {
        try {
          w.pbjs.renderAd(document, '%%PATTERN:hb_adid%%');
          break;
        } catch (e) {
          continue;
        }
      }
    }
    </script>
    
    <!-- Native Styles -->
    <style>
        .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;
        }
      </style>