MoPub ads integration
The following is a step by step process on how to configure advertisement with both MoPub and ShoutEm.
Integrating MoPub with your application
Lets start by adding the iOS integration first:
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:
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):
Setting up an advertising campaign.
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
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
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
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:
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 support@shoutem.com .
Setting up the AdMob integration
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.
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.
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 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!