Monetize With MoPub

Rajul Arora edited this page Nov 14, 2017 · 2 revisions

Twitter Kit provides easy integration with the MoPub SDK v4.6.0+, which makes it easy to monetize your app with native ads in Twitter Timelines <show-timelines>. With just a few lines of code, you can:

  • Display engaging native ads inside Twitter timelines <show-timelines>
  • Implement native ad best practices
  • Style ads with customizable light and dark styles to match the exact look and feel of your app

Create a MoPub Account and Ad Unit

NOTE: It is recommended that you create a new native ad unit ID for timeline ads.

Follow these 3 steps to set up an ad unit ID:

To learn more about MoPub's ad exchange and marketplace, see more

Integrate MoPub SDK

Integrate the MoPub SDK into your app following the Getting Started guide.

Show MoPub Ads in Twitter Timelines

Twitter Kit automatically integrates with the MoPub SDK so it is not necessary to import it in your code. The following snippets are all you need to start displaying MoPub Native Ads in timelines:

// Swift
import TwitterKit

class UserTimelineViewController: TWTRTimelineViewController {
  override func viewDidLoad() {

      let client = TWTRAPIClient()
      let dataSource = TWTRUserTimelineDataSource(screenName: "twitterdev", apiClient: client)
      let adConfig = TWTRMoPubAdConfiguration(adUnitID: TWTRMoPubSampleAdUnitID, keywords: nil)
      self.init(dataSource: dataSource, adConfiguration: adConfig)
// Objective-C

// FABUserTimelineViewController.h
#import <UIKit/UIKit.h>
#import <TwitterKit/TwitterKit.h>

@interface FABUserTimelineViewController : TWTRTimelineViewController

// FABUserTimelineViewController.m
#import "FABUserTimelineViewController.h"
#import <TwitterKit/TwitterKit.h>
@implementation FABUserTimelineViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  TWTRAPIClient *client = [[TWTRAPIClient alloc] init];
  self.dataSource = [[TWTRUserTimelineDataSource alloc] initWithScreenName:@"twitterdev" APIClient:client];
  self.adConfiguration = [[TWTRMoPubAdConfiguration alloc] initWithAdUnitID:TWTRMoPubSampleAdUnitID keywords:nil];


Configure Ad Colors & Themes

To change the colors of the ads, you have two options:

  1. Set the theme property of the TWTRMoPubNativeAdContainerView. The default is TWTRNativeAdThemeLight
// Swift
TWTRMoPubNativeAdContainerView.appearance().theme = .dark
// Objective-C
[TWTRMoPubNativeAdContainerView appearance].theme = TWTRNativeAdThemeDark;
  1. Set the visual properties using UIAppearanceProxy for TWTRMoPubNativeAdContainerView
// Swift
TWTRMoPubNativeAdContainerView.appearance().adBackgroundColor =
TWTRMoPubNativeAdContainerView.appearance().backgroundColor = UIColor.darkGray
TWTRMoPubNativeAdContainerView.appearance().primaryTextColor =
[TWTRMoPubNativeAdContainerView appearance].adBackgroundColor = [UIColor blackColor];
[TWTRMoPubNativeAdContainerView appearance].backgroundColor = [UIColor darkGrayColor];
[TWTRMoPubNativeAdContainerView appearance].primaryTextColor = [UIColor blueColor];
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.