Native Video Ads

Native video 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.

Integrating MoPub Native Video ads into your app is as easy as integrating standard “static” native ads. Native videos ads can be integrated manually as well as with ad placer.

Prerequisites

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

Read the best practices article for guidelines on how native ads can be displayed in your app.

Native Video Behavior

A native video ad is in-feed when it has not expanded due to full screen and is surrounded by your app’s content. This is a native video ad’s default state.

The SDK will automatically play in-feed video ads once a certain portion of the video view is visible to the user. Similarly the in-feed video will automatically pause once an amount of the video view’s area is off the screen. As a result, the user nor the app has control over whether an in-feed ad is playing or not other than the user being able to replay a finished in-feed video.

In-feed video will start muted. The user has the option to unmute and re-mute the video in-feed via tapping on the mute button.

A native video ad becomes fullscreen when the in-feed video has been tapped and has expanded to fullscreen mode.

Similar to in-feed videos, the user nor the app can pause or play fullscreen video. A fullscreen will also always play with sound and cannot be muted.

Define the Layout of Your Native Video Ad

Defining and configuring the layout for your native video ad is very similar to how you would set up a static native ad. The only difference between laying out the two types is that you must provide your video view for the nativeVideoView method in your ad’s view as shown in this example:

@interface YourNativeAdView : UIView <MPNativeAdRendering>

@property (strong, nonatomic) UILabel *titleLabel;
@property (strong, nonatomic) UILabel *mainTextLabel;
@property (strong, nonatomic) UILabel *callToActionLabel;
@property (strong, nonatomic) UIImageView *iconImageView;
@property (strong, nonatomic) UIImageView *mainImageView;
@property (strong, nonatomic) UIImageView *privacyInformationIconImageView;
@property (strong, nonatomic) UIView *videoView; // only for video ads

@end

// YourNativeAdView.m

@implementation YourNativeAdView

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        // Initialize your ad view's subviews
    }
    return self;
}

- (void)layoutSubviews
{
    // layout your views here
}

// The following protocol methods are called when the renderer needs a UI element
// for a specific ad element. Return the view you would like to use for each ad element.
- (UILabel *)nativeMainTextLabel
{
    return self.mainTextLabel;
}

- (UILabel *)nativeTitleTextLabel
{
    return self.titleLabel;
}

- (UILabel *)nativeCallToActionTextLabel
{
    return self.callToActionLabel;
}

- (UIImageView *)nativeIconImageView
{
    return self.iconImageView;
}

- (UIImageView *)nativeMainImageView
{
    return self.mainImageView;
}

- (UIImageView *)nativePrivacyInformationIconImageView
{
    return self.privacyInformationIconImageView;
}

// This method only applies for video.
- (UIView *)nativeVideoView
{
    return self.videoView;
}

@end

The main image view and video view must have the same frame since the video view will replace the main image view when the video begins playing.

Add Support for Video Rendering to your App

In order for the video ad to be displayed, you will have to provide a video renderer configuration to the ad placer or MPNativeAdRequest objects depending on your integration. An example is shown here:

MOPUBNativeVideoAdRendererSettings *nativeVideoAdSettings = [[MOPUBNativeVideoAdRendererSettings alloc] init];
nativeVideoAdSettings.renderingViewClass = [YourNativeAdView class];
nativeVideoAdSettings.viewSizeHandler = ^(CGFloat maximumWidth) {
    return CGSizeMake(100.0f, 312.0f);
};

MPNativeAdRendererConfiguration *nativeVideoConfig = [MOPUBNativeVideoAdRenderer rendererConfigurationWithRendererSettings:nativeVideoAdSettings];

As with static native ads, make sure you set the renderingViewClass and viewSizeHandler properties.

If you are using ad placer, you will pass the video renderer configuration to the ad placer on initialization:

MPTableViewAdPlacer *placer = [MPTableViewAdPlacer placerWithTableView:self.tableView
                                            viewController:self
                                    rendererConfigurations:@[staticNativeAdConfig, nativeVideoConfig]];
placer.delegate = self;

If you are manually requesting ads, you will pass the video renderer configuration to the MPNativeAdRequest object on initialization:

MPNativeAdRequest *adRequest = [MPNativeAdRequest requestWithAdUnitIdentifier:@"YOUR_AD_UNIT_ID" rendererConfigurations:@[staticNativeAdConfig, nativeVideoConfig]];

You can then use either of these objects as you would with static native ads.

Enable Video Ads in the Web UI.

Open your ad unit in the MoPub Web UI and select “Edit Ad Unit” in the top-right corner.

In the form that appears, check the box labeled “Allow video ads for this ad unit.”

Tracking Impressions and Clicks

As with static native ads impressions and clicks will be tracked automatically if you use the provided APIs.

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.