HB Blog 94: MoPub - Mobile Ad Server Integration In Android And iOS.

MoPub is a hosted ad serving solution built specifically for mobile publishers. It helps to grow your mobile advertising business with powerful ad management. etc.
In this post, I will show how to integrate MoPub ads in Android as well as iOS.

For Android,
Here are the basic integration steps: -

1.     Check out the files from our repository.
2.     Add our SDK (and dependencies) to your project.
3.     Create ad units in your app.

Download the MoPub Android SDK: -

The MoPub SDK is distributed as source code that you must include in your application.
MoPub Android Full SDK.zip
Includes everything you need to serve HTML and MRAID MoPub advertisements and built-in support for the Millennial Media ad network - including the required third party binaries.

Using Gradle: -

Open your project's settings.gradle file and make sure the MoPub SDK is included as a module:
include ':app', ':mopub-sdk'
Open your project's build.gradle file and add jcenter as a repository and the MoPub SDK as a dependency:
repositories {
    jcenter()
}
...
dependencies {
    compile project(':mopub-sdk')
...
}
This is required in order to resolve the MoPub SDK's compile time dependency on com.mopub.volley:mopub-volley:1.1.0.

Follow the instructions on the Android Developer Site for setting up Google Play Services. It is always recommend to use the latest version of Google Play Services. 

http://developer.android.com/google/play-services/setup.html

Load banner ads in your app: -

1. Check your AndroidManifest.xml file.
Add following permissions,

1 2 3 4

<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

You’ll also need to include the following custom Activities (even though you won’t instantiate them directly):

1 2 3 4

<activity android:name="com.mopub.mobileads.MoPubActivity" android:configChanges="keyboardHidden|orientation|screenSize"/> <activity android:name="com.mopub.mobileads.MraidActivity" android:configChanges="keyboardHidden|orientation|screenSize"/> <activity android:name="com.mopub.common.MoPubBrowser" android:configChanges="keyboardHidden|orientation|screenSize"/> <activity android:name="com.mopub.mobileads.MraidVideoPlayerActivity" android:configChanges="keyboardHidden|orientation|screenSize"/>

2. Define a slot for your banner ad in your layout XML.
The MoPub SDK provides a custom View subclass, MoPubView, that handles requesting and loading ads.
Include this XML block to your Activity’s or Fragment’s layout.

1 2 3 4

<com.mopub.mobileads.MoPubView android:id="@+id/adview" android:layout_width="fill_parent" android:layout_height="50dp"/>

3. Load an ad into the banner slot.
In your Activity or Fragment code, declare an instance variable for your MoPubView:
private MoPubView moPubView;
You should already have created an ad unit on MoPub’s site and received an Ad Unit ID. You’ll use it now to identify that ad unit in your app and request ads from MoPub that are relevant for your users.
In your Activity’s onCreate() or your Fragment’s onCreateView() method, set your MoPubView’s Ad Unit ID, then simply call loadAd() to fetch and display the ad:

1 2 3 4 5

... moPubView = (MoPubView) findViewById(R.id.adview); moPubView.setAdUnitId("xxxxxxxxxxx"); // Enter your Ad Unit ID from www.mopub.com moPubView.loadAd(); ...

When the hosting Activity or Fragment is destroyed, be sure to also destroy the MoPubView by calling:

1	moPubView.destroy();

Additional Listener Interface: - MoPubView provides a listener interface, BannerAdListener, which you can use to stay informed about ad lifecycle events. 

BannerAdListener includes the following methods:

1 2 3 4 5 6 7 8 9 10

// Sent when the banner has successfully retrieved an ad. public void onBannerLoaded(MoPubView banner); // Sent when the banner has failed to retrieve an ad. You can use the MoPubErrorCode value to diagnose the cause of failure. public void onBannerFailed(MoPubView banner, MoPubErrorCode errorCode); // Sent when the user has tapped on the banner. public void onBannerClicked(MoPubView banner); // Sent when the banner has just taken over the screen. public void onBannerExpanded(MoPubView banner); // Sent when an expanded banner has collapsed back to its original size. public void onBannerCollapsed(MoPubView banner);

For iOS,
Here are the basic integration steps: -

1.     Download the MoPub SDK
2.     Add the SDK to your Xcode project.
3.     Create and use a Banner or Interstitial ad.

Download the MoPub iOS SDK: -
The MoPub SDK is distributed as source code that you must include in your application.
MoPub Full SDK.zip
Includes everything you need to serve HTML and MRAID MoPub advertisiments and built-in support for three major third party ad networks - iAd, Google AdMob, and Millennial Media - including the required third party binaries.

Using CocoaPods: -

The MoPub SDK is available through Cocoapods, a popular dependency management system for Objective-C projects.
To download and incorporate the MoPub SDK into your project using Cocoapods, add the following line to your project's podfile:
pod 'mopub-ios-sdk'
After running pod install (if you’re setting up Cocoapods for the first time) or pod update (if you’re adding MoPub to an existing Cocoapods project), your project will be ready to use the base MoPub SDK.

Load banner ads in your app: -

You can create an ad unit (a space for ads) on the MoPub online dashboard. Upon your first visit, you'll be prompted to register your application and set up an ad unit. Afterwards, you can retrieve your ad unit ID by clicking "Get code snippet" in the top right corner of the ad unit page.
Adding a banner to your application takes only a few, easy steps:

1.     In your view controller's header file: Import the MPAdView.h header file and declare an MPAdView *adView property. Declare that your view controller implements the MPAdViewDelegate protocol.
2.     In your view controller's implementation file, instantiate an MPAdView, passing in your ad unit ID. This is typically done in -viewDidLoad.
3.     Register your view controller as the adView's delegate.
4.     Set the adView's frame and add the adView to your controller's view hierarchy.
5.     Center the adViewon screen to account for iPhone 6 and iPhone 6 plus
6.     Implement the -viewControllerForPresentingModalView MPAdViewDelegate method. The adView will use the view controller returned by this method to present modals when tapped. Typically your controller can simply return self.
7.     Finally, load an ad by sending adView the -loadAd message.

// MyViewController.h

1 2 3 4 5

#import "MPAdView.h" @interface MyViewController : UIViewController <MPAdViewDelegate> @property (nonatomic) MPAdView *adView; @end

// MyViewController.m

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

#import "MyViewController.h" @implementation MyViewController - (void)viewDidLoad { // ... your other -viewDidLoad code ... self.adView = [[MPAdView alloc] initWithAdUnitId:@"<YOUR_ADUNIT_ID_HERE>" size:MOPUB_BANNER_SIZE]; self.adView.delegate = self; self.adView.frame = CGRectMake((self.view.bounds.size.width - MOPUB_BANNER_SIZE.width) / 2, self.view.bounds.size.height - MOPUB_BANNER_SIZE.height, MOPUB_BANNER_SIZE.width, MOPUB_BANNER_SIZE.height); [self.view addSubview:self.adView]; [self.adView loadAd]; [super viewDidLoad]; } #pragma mark - <MPAdViewDelegate> - (UIViewController *)viewControllerForPresentingModalView { return self; } ... @end

Additional Delegate Callbacks: -

MPAdViewDelegate includes a variety of optional callbacks you can use to be notified of events, e.g. when an ad has successfully loaded, or when the ad is about to present or dismiss a modal view. Check out the MPAdViewDelegate protocol in MPAdview.h for a list of these methods.

1 2	// Called when the banner has successfully retrieved an ad. -adViewDidLoadAd: