Monetize With MoPub

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:

• Create a MoPub account if you do not have one already
• Add your application to the MoPub dashboard once you have a MoPub account
• Create a new native ad unit with the desired configurations

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() {
      super.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
@end

// 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];
}

@end

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;

2. Set the visual properties using UIAppearanceProxy for TWTRMoPubNativeAdContainerView

// Swift
TWTRMoPubNativeAdContainerView.appearance().adBackgroundColor = UIColor.black
TWTRMoPubNativeAdContainerView.appearance().backgroundColor = UIColor.darkGray
TWTRMoPubNativeAdContainerView.appearance().primaryTextColor = UIColor.blue

[TWTRMoPubNativeAdContainerView appearance].adBackgroundColor = [UIColor blackColor];
[TWTRMoPubNativeAdContainerView appearance].backgroundColor = [UIColor darkGrayColor];
[TWTRMoPubNativeAdContainerView appearance].primaryTextColor = [UIColor blueColor];