MoPub ads integration
Shoutem allows you to set up your advertising campaign through the MoPub ad mediation service. Shoutem as a company doesn't take any part of your revenue gained in this way, so this is a very effective way of generating more revenue from your app.
The following is a step by step process on how to configure advertisement with both MoPub and ShoutEm.
The following is a step by step process on how to configure advertisement with both MoPub and ShoutEm.
Integrating MoPub with your application
1)
Go to MoPub.com and
register for a MoPub account
. If you already have an account with them, you can
log in
.
2)
After the registration you will be automatically prompted to set up a new MoPub application required for integrating mobile ads to your application.
You must set up apps for iOS, Android and HTML5 versions individually. Per the screenshots below, enter your application name and select the categories your app falls under.
Lets start by adding the iOS integration first:
Select iOS under the Platform field to create an advertisement for an iPhone application.
If your app is not live while you are setting this up, you can use the fake iTunes URL, as this field is mandatory. The following format will work : http://itunes.apple.com/us/app/xxxxxxxxxx . Once the app is actually live in store, remember to change this to the appropriate value.
After setting the iOS app in MoPub, we need to create the first Ad Unit for this application. You can see the setting on the following screenshot.
After you enter all required data, click on the Save and View Code Integration button. At the next screen you will get an Ad Unit Code that we need to copy inside the app builder. inside Settings -> Advertisement -> iOS section.
Please note that the type needs to be banner, regardless of the selected platform. You can leave the refresh interval at its default value.
Copy the code from the image, and enter it inside the app builder under Settings -> Advertisement section. You will need to Activate the section first, by clicking on the Activate button in the top right corner.
After you copy the iPhone integration code, click Save, and go back to MoPub dashboard. We now need to create integration codes for Android and Mobile Web.
Android:
To create the integration for Android app, click on the
Inventory
section in the top menu. You will get a list of your current integrations with your iOS application listed. Click on the
Add a New App
button in the top right corner.
The creation and integration steps are the same as for the iPhone application, but for Android app you need to set the
Platform: Android. Also, if you intend to enter your Android package name, you can find that as the part of the URL of your Android application. For example if your URL inside the Google Play store is:
https://play.google.com/store/apps/details?id=com.shoutem.fiveminutes
then the package name is: com.shoutem.fiveminutes
If your app is not live yet, you can use any fake package name, that is structured as explained above.
Scroll down to find the Ad Unit section. Same as for the iPhone section:
https://play.google.com/store/apps/details?id=com.shoutem.fiveminutes
then the package name is: com.shoutem.fiveminutes
If your app is not live yet, you can use any fake package name, that is structured as explained above.
Scroll down to find the Ad Unit section. Same as for the iPhone section:
- Set the name and Description to something that you will easily remember or is connected to your app.
- Device format must be set to Phone.
- The Ad format must be set to Banner. Other ad formats aren't currently supported in ShoutEm apps, but will probably become in the future.
Mobile Web (HTML5):
The procedure is the same as for the Android app, only that it needs you to enter the URL of your mobile app instead of the package name. If you haven't set a custom URL for your ShoutEm HTML5 app, you can use the generic one, or just enter a fake URL.
After copying all three integration codes (iOS, Android and MobileWeb) to the app builder, you need to save the Advertisement section. Now, when we have finished integrating your ShoutEm app with MoPub, we need to set up an advertising campaign that we will use inside the app.
Setting up an advertising campaign.
Currently you can create advertising campaigns inside the MoPub dashboard itself, or integrate it with other services like AdMob. This short tutorial will cover creating an advertising campaign inside MoPub panel itself, which can be done either by uploading image ads or entering an HTML code that will show as an advertisement.
Before entering our Ads, we need to disable the default test Ad served by MoPub itself. In order to do so, select the Orders section from the top menu. You will see one running ad there, select it and click on the Archive button.
Before entering our Ads, we need to disable the default test Ad served by MoPub itself. In order to do so, select the Orders section from the top menu. You will see one running ad there, select it and click on the Archive button.
Creating a new order
After deleting the test ad, we need to enter our own ads. To start doing so, please click on the
New order
button in the top right corner.
When you click on the new order, you will see a new page with a lot of options, that we will try to outline for you.
Basic order data
Order name - The name of the ad that you will be serving to your users
Advertiser - Your name or the name of your customer for whom you are serving the ad for
Description (optional) - This field is used for adding a description
Advertiser - Your name or the name of your customer for whom you are serving the ad for
Description (optional) - This field is used for adding a description
Creating a line item
Type and priority - Set type Promotional, and priority 13.
Name - The name of the Order that you are making
Start time - You can leave it as default (immediately) or set it to some specific date and time.
End time - The time when your Ad campaign will expire
Day part targeting - Change this only if you want to run your ad at specific day or time.
Budget - Your target performance measurable in impressions per day, or total number of impressions
Rate - This is only used if you are using the Marketplace Ad type (that will be served with other MoPub ads to other apps)
Delivery Speed - Spread impressions evenly, or try to display as many as possible, at each moment in time
After you enter all of the basic data, you need to activate this campaign for all platforms that we have already integrated with your app inside the app builder. To do so, click on the little check mark on top of all of the platforms that we have already integrated.
Other settings are not mandatory, but can be used for Ad localisation and restriction based on age group, location or device family. You can skip all of that and click on the Save and View on the bottom.
Adding a new creative
Creatives are basically advertisement banners themselves. They can be added either by uploading a picture or adding them via HTML code. To start, click on the blue
Add a new creative button.
You can set up two types of Creatives: Image and HTML.
You can set up two types of Creatives: Image and HTML.
Image creative
Please set this up as follows:
Format: 320x50 (Banner)
Creative type: Image
Name: Set this as you wish.
Click URL : If you want your users to be taken somewhere when they click on the ad itself
Image file : Upload the ad image that you wish (watch the resolution!)
HTML Creative
Please set this up as follows:Format: 320x50 (Banner)
Creative type: HTML
Name: Set this as you wish.
HTML code: You can customise this based on your needs. Here is our test example:
<style type="text/css">
body {
font-size: 12px;font-family:helvetica,arial,sans-serif;
margin:0;padding:0;text-align:center;background:white}
.creative_headline {font-size: 18px;}
.creative_promo {color: green;text-decoration: none;}
</style>
<div>Welcome to ShoutEm</div>
<div><a href="http://www.shoutem.com">Create your apps effortlessly!</a></div>
<div>You can now set up your own campaign</div>
body {
font-size: 12px;font-family:helvetica,arial,sans-serif;
margin:0;padding:0;text-align:center;background:white}
.creative_headline {font-size: 18px;}
.creative_promo {color: green;text-decoration: none;}
</style>
<div>Welcome to ShoutEm</div>
<div><a href="http://www.shoutem.com">Create your apps effortlessly!</a></div>
<div>You can now set up your own campaign</div>
Integrating with big advertising networks
In addition to serving your own ads, you can display the ads from one of the bigger advertising networks. In this guide, we will cover the process of setting up the integration with AdMob advertising network. This is the most commonly used advertising network when it comes to mobile apps.
Each of these networks require a specific set of parameters in order to successfully integrate 3rd party ads from their service within your apps. The process of adding the AdMob network an be used as a template for other networks, with a few exceptions. In case you need some more info on this setup, please contact our support service at shoutem@shoutem.com .
Setting up the AdMob integration
You will need to have an AdMob account for this part of the guide. In case you don't have it yet, you can register
here. Once you have the account set up, we ned to create an app that will be used to direct the AdMob ads. Go to the "
Home" tab, and click the "
+ Monetize new app" button, shown on the image below.
In the next window, we choose the app for which we are creating an ad campaign. You can either search for the existent app in one of the stores ( Google Play / iTunes app store ), or add the new app manually. In this guide, we will illustrate adding the new app manually.
App name - In this field, enter the name of your actual app, the way it will be displayed within the store.
Platform - Enter the your app's platform. In case your app is published with multiple platforms, you can repeat this procedure for each platform respectively, apart from the HTML5 one, that AdMob doesn't support anymore. We will be adding the iOS app in this tutorial.
In the next step, we're setting up the ad unit settings. Select banner as an ad type, and fill out the rest of the settings:
Automatic refresh : This setting will determine how often will the new ad impression be generated on your user's device. We recommend setting this somewhere in the 45 - 60 interval.
Text ad style : You can either stick with the standard look of the AdMob ads, or you can customize the ad look, to fit better within your app.
Ad unit name : Assign a simple and recognizable name for your ad unit.
After you click on the save button, the instruction window will appear with some of the relevant data, that we'll need to enter inside the MoPub interface. Inside the instruction window, find the Ad Unit ID parameter, and copy it as we will ned it later on.
Now that you've created the apps, you can modify them additionally through the " Monetize" tab. Click on the monetize tab, and select the app you want to modify. Then, under the Mediation column, click the 1 ad source link. Here, clicking on the current network ( Admob ), will provide you with more options, in terms of default CPM for your ads.
We recommend using the default parameters here, that will " Optimize AdMob Network" , modifying the CPM for this app dynamically.
The last thing you need to set up within the AdMob interface is your account info. You need to specify your account and billing information, in order to successfully receive payments from the AdMob network. You can access the account settings interface, by clicking the " Account" button in the top right. Make sure that you enter valid billing information in order to ensure successful payments for your advertising space.
Implementing AdMob inside MoPub interface
Log into your MoPub interface and select Networks tab in the top right. Next, click the Add Network button in order to open up the network creation interface.
Section 1: Add your account info
Revenue reporting: Set this to enabled.
Authentication type: Set this field to OAuth.
OAuth Login: Click on the " Login via OAuth" link . You will be required to authorize MoPub to access your AdMob data, and log in using your AdMob credentials, in case you aren't logged in already.
Section 2: Set up your inventory
In this section you should be able to see all of your apps created with MoPub ( iOS, Android and HTML5 ), and each of them will have a Published ID field next to them. You will need to paste the Ad unit ID, that we got from the AdMob interface into this field.
Do this for every platform you're setting the adds for ( iPhone, Android or HTML5 ), and enter the appropriate Ad Unit ID, within the Publisher ID field.
We recommend checking the " Run this network automatically" option in the bottom of this section, to assign the default CPM for your apps. In case you want to do this manually, you can leave this option unchecked. But make sure you do this eventually, or else the ads won't display.
Section 3: Advanced Settings.
We suggest leaving all of the fields inside this section empty, as those settings will fit most of the users. Within this section, you can target your ad display to specific geographical locations, or filter the ads display with the selected keywords.
Once you've set this up, click on the "Save and Continue" button in the bottom of the screen.
Your network integration should now be completed, and you should see the ads from the new source appearing within your app in 5 minutes.
We recommend checking the " Run this network automatically" option in the bottom of this section, to assign the default CPM for your apps. In case you want to do this manually, you can leave this option unchecked. But make sure you do this eventually, or else the ads won't display.
Section 3: Advanced Settings.
We suggest leaving all of the fields inside this section empty, as those settings will fit most of the users. Within this section, you can target your ad display to specific geographical locations, or filter the ads display with the selected keywords.
Once you've set this up, click on the "Save and Continue" button in the bottom of the screen.
Your network integration should now be completed, and you should see the ads from the new source appearing within your app in 5 minutes.
Test it out
After giving the information a minute or two to propagate, it would be best to test out the complete setup, and make sure that this actually works. Adding the advertisement into your app is something that requires the app to be rebuilt, so testing will rely on creating a new test build for your app. To make this happen, please contact our support team, who will help you out with this.
After making sure that everything is properly set up, and if your application is already published, please use the Republish button in the app builder and contact us on support@shoutem.com with a short note that you have activated ads after your applications initial publish, and you need us to update your app in the stores because of this.
In case additional questions arise, please contact shoutem@shoutem.com, but we kindly ask you to prepare screenshots from the MoPub dashboard and the app builder, and a short description about the issue that you are having, so our support team can help you out in the least possible amount of time!
After making sure that everything is properly set up, and if your application is already published, please use the Republish button in the app builder and contact us on support@shoutem.com with a short note that you have activated ads after your applications initial publish, and you need us to update your app in the stores because of this.
In case additional questions arise, please contact shoutem@shoutem.com, but we kindly ask you to prepare screenshots from the MoPub dashboard and the app builder, and a short description about the issue that you are having, so our support team can help you out in the least possible amount of time!