Native Video Ads

MoPub Marketplace native video demand is currently in private beta. For more information about using MoPub for native video ads, please contact your account team or sales@mopub.com to learn more.

Prerequisites

This guide assumes that you’ve already integrated static Native Ads into your app. If you haven’t, follow the Native Ads Integration Guide first.

Choose the Integration Method

Native Video also offers Ad Placer and Manual integration methods. Please check this guide for determining the suitable ad integration approach for your apps.

Ad Placer

Integrating MoPub Native Video ads into your app content stream is as easy as integrating standard “static” native ads. To add Native Video ads to an existing app with Native Ads you’ll need to:

  1. Create a layout for your video ads.
  2. Create and add a video ad renderer to your app.
  3. Enable video ads on your ad unit in the MoPub Web UI.

Create a Layout for Native Video Ads

For example: res/layout/native_ad_layout.xml

<RelativeLayout
  <com.mopub.nativeads.MediaLayout android:id="@+id/native_ad_media_layout"
     />
  <ImageView android:id="@+id/native_ad_icon_image"
     />
  <TextView android:id="@+id/native_ad_title"
     />
  <TextView android:id="@+id/native_ad_text"
     />
  <ImageView android:id="@+id/native_ad_daa_icon_image"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:padding="10dp"
     />
</RelativeLayout>

MediaLayout is a custom View provided by MoPub that handles displaying video. You are required to use it for Native Video Ads. We strongly recommend setting your MediaLayout to a fixed width & height based on device size and resolution. The MediaLayout should be designed with a 16:9 aspect ratio.

Create Video Renderer

  1. Create a ViewBinder for your native video layout:
MediaViewBinder videoAdBinder = new MediaViewBinder.Builder()
  .mediaLayoutId(R.id.video_ad_media_layout)
  .iconImageId(R.id.video_ad_icon_image)
  .titleId(R.id.video_ad_title)
  .textId(R.id.video_ad_text)
  .daaIconImageId(R.id.video_ad_daa_icon_image)
  .build();
  1. Create MoPubVideoNativeAdRenderer with the above ViewBinder and register to your Adapter or StreamAdPlacer:
MoPubAdAdapter myAdAdapter = new MoPubAdAdapter(context, myContentAdapter, new MoPubServerPositioning());

// You should still register a renderer for static native ads as well.
myAdAdapter.registerAdRenderer(new MoPubStaticNativeAdRenderer(staticAdBinder));
myAdAdapter.registerAdRenderer(new MoPubVideoNativeAdRenderer(videoAdBinder));

myListView.setAdapter(myAdAdapter);

Enable Video Ads in the Ad Unit Setting

Open your ad unit in the MoPub Web UI and select “Edit Ad Unit” in the top-right corner. In the form that appears, select the option “Enable video ads” for this ad unit.

Enable Video Ads

Manual Integration

The process for inserting manual native video ads is similar, you should have completed the native static manual integration. With the addition of native video, AdapterHelper was modified to use the renderers instead of the ViewBinder that is passed in. Right before declaring the MoPubStaticNativeAdRenderer, add the MoPubVideoNativeAdRenderer as outlined below.

Request the Native Video

  1. Create an XML layout, specifying how video ads should be rendered. The XML layout must include a MediaLayout element. As an example, this layout contains one MediaLayout (for the video), two TextViews (for a title and additional text), and an ImageView (for an icon image).

    For example: res/layout/native_video_ad_layout.xml

     <RelativeLayout
         <com.mopub.nativeads.MediaLayout android:id="@+id/native_ad_video_view"
             />
         <ImageView android:id=@"+id/native_ad_icon_image"
             />
         <TextView android:id="@+id/native_ad_title"
             />
         <TextView android:id="@+id/native_ad_text"
             />
     </RelativeLayout>
    
  2. Create a MediaViewBinder object specifying the binding between your layout XML and the ad’s content.

     MediaViewBinder mediaViewBinder = new MediaViewBinder.Builder(R.layout.native_video_ad_layout)
        .mediaLayoutId(R.id.native_ad_video_view)
        .iconImageId(R.id.native_ad_icon_image)
        .titleId(R.id.native_ad_title)
        .textId(R.id.native_ad_text)
        .build();
    
  3. Create a MoPubVideoNativeAdRenderer object and register it with the MoPubNative instance. Note: The video renderer must be declared before the MoPubStaticNativeAdRenderer.

     MoPubVideoNativeAdRenderer moPubVideoNativeAdRenderer = new MoPubVideoNativeAdRenderer(mediaViewBinder);
     moPubNative.registerAdRenderer(moPubVideoNativeAdRenderer);
    
     // Set up the static ad renderer and register it
    
  4. The remaining process for requesting video native ads is unchanged. Please check steps 5-7 from Request the Static Native Ad

To test your implementation, use the following test ad unit ID: 02a2d288d2674ad09f3241d46a44356e. It will always return a MoPub native video creative.

Render the Native Video

See Rendering Static Native Ads for further instructions of using AdapterHelper to get a returned view.

When using AdapterHelper.getAdView(), when it takes in a ViewBinder, just pass in any non-null ViewBinder, like so:

AdapterHelper.getAdView(convertView, parent, position, new ViewBinder.Builder(0).build());

Last updated October 10, 2018

TWITTER, MOPUB, and the Bird logo are trademarks of Twitter, Inc. or its affiliates. All third party logos and trademarks included are the property of their respective owners.

© 2018 MoPub Inc.