Set Up Native

Prebid Mobile enables publishers to display native ads within their apps. This page provides instructions for setting up ad ops for both Google Ad Manager and MoPub.

Follow these instructions to set up a Native ad with HTML and CSS. For more detailed information refer to the Google Ad Manager documentation.

  1. Sign in to your Google Ad Manager account.
  2. Click Delivery > Native.
  3. Click New Native Ad.

  4. Click Select in the “HTML & CSS editor” box. The Define ad settings page will appear. On this page, do the following to create your native ad template:

    a. Select an ad size of fluid. This tells Ad Manager to automatically size the ad to match available space.
    b. Select an existing format or create a new one. (Formats are the variables that make up the content of your ad.)
    c. Style your ad with HTML and CSS. (See the code sample below.)
    Add your styles in the CSS tab in Ad Manager.

    A native ad is made up of assets, image URL, titles, descriptions, icons, etc. that are plugged into the template we’ve just created. 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 Mobile’s support for native ads works by requesting native demand from bidder adapters. The native ad responses get placed on specific keys that are sent into your ad server.

    The native-trk.js linked in the code example below will find hb_native_keys and replace them with native assets. For more detailed information and a list of available keys see our documentation that explains how Native ads work.

    d. Set the targeting to default and save.

  5. Create a line item targeting this ad unit and an hb_pb price; for expected creatives, put in the ad format you specified in step 4.b.
  6. Create a native creative using the native styles (and the ad format created/used with the native styles), associating it with the line item.


Example 

<div class="sponsored-post">
  <div class="thumbnail"></div>
  <div class="content" class="pb-click">
    <h1><a target="_blank" href="hb_native_linkurl" class="pb-click">hb_native_title</a></h1>
    <p>hb_native_body</p>
    <div class="attribution">hb_native_brand</div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/native-trk.js"></script>
<script>
  var pbNativeTagData = {};
  pbNativeTagData.uuid = "%%PATTERN:hb_cache_id%%";
  pbNativeTagData.env = "mobile-app";
  window.pbNativeTag.startTrackers(pbNativeTagData);
</script>

MoPub

These instructions describe how to add a Native ad with the MoPub SDK. For more detailed information review the MoPub Native ad documentation for iOS and Android.

  1. Create a Medium rectangle Ad Unit.
  2. Create a non-guaranteed line item targeting this ad unit and an hb_pb price.
  3. Create a creative with 300x250 Medium Rectangle format, choose HTML and put in the following code:
<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content" class="pb-click">
      <h1><a target="_blank" href="hb_native_linkurl" class="pb-click">hb_native_title</a></h1>
      <p>hb_native_body</p>
      <div class="attribution">hb_native_brand</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/native-trk.js"></script>
  <script>
  var pbNativeTagData = {};
  pbNativeTagData.uuid = "%%PATTERN:hb_cache_id%%";
  pbNativeTagData.env = "mobile-app";
  window.pbNativeTag.startTrackers(pbNativeTagData);
  </script>

Further Reading

All demos, instructions, documentation and code included on the Prebid.org website are released
under the Apache License. | Credits