Monetizing an Ionic Framework App with StartApp

After several days of searching for an advertising solution (that was not Admob or Adsense) for the Ionic Framework in order monetize my bespic app. I finally found an ad network that didn’t directly enable this but with a few small tweaks I was able to make this ad network work with my Ionic application. The following is an explanation of how I achieved this:

Disclaimer: I make no claim to know the StartApp terms and services please use the following code at your own discretion, I am not responsible for anything that may result from using this code in your application.

Step 1 Register with StartApp.

Go to StartApp and register. This part is fairly starightforward, just follow the instructions given

Step 2 Register your app and create an ad space

From the left side menu click “Apps and Sites”, then on the right side of the screen click “Add New App”.

Type in all the info correctly, and click the “No” radio button under “Mediation”. then Click “Add App”.

You’ll now see your App on the “Apps and Sites” page. if you hover your mouse over your app you’ll see a gear icon on the very left side, as in the picture bellow. click on it and create an ad from here. Also in the picture bellow you’ll see a red box, this is where you’ll find your app ID, this will be your productId later on so copy it.

ionic-startapp-img1

At the top right of your page you will find your “Account ID” copy this code down, later on it will be your publisherId.

Step 3 Create your Javascript ad tags

We’re going to modify some of the code that StartApp tells us to use

For this You’ll need to create a factory (inside a new module or add it to an existing module).

Bellow is the beginning of our factory. We start the module and factory, I included $cordovaDevice and we’ll see why later. We’re also going to start writing a function that we’ll be able to call from our Angular Controllers for each page. This getBanner function has a “container” as a function parameter, this will be the the elementID of the div where we want our banner ad to appear.

angular.module('myAppName.services', []).factory('Ads', function($cordovaDevice) {
    var o = {
    };

    o.getBanner = function(container){

next we’ll add our own options and variables as instructed here . You’ll need to change the publisherId and productId with your own (we got these in step 2). for the optional parameters it is up to you if you want to feed values into variables. we added $cordovaDevice earlier so that we can share the device info with startapp (although it is optional)

// needed to place a banner where we want
startappContainerId = container;

// Required parameters. (required)
var publisherId = 'replaceMeWithPublisherId';
var productId ='replaceMeWithProductId';
var width = 320;
var height = 50;

//To get some device info too pass to StartApp use this (optional)
var device = $cordovaDevice.getDevice();
var manufacturer = device.manufacturer;
var model = device.model;
var uuid = device.uuid;

// Optional parameters. (optional)
var userId = uuid;
var packageName = "";
var isp = "";
var contentRating = "";
var gender = "";
var age = "";
var category = "";
var networkType = "";
var geoLongitude = "";
var geoLatitude = "";
var subPublisherId = "";
var subProductId = "";
var domain = "";
var deviceManufacturer = manufacturer;
var deviceModel = model;
var userAdvertisingId="";
var noAdUrl= "";

next we can add the remaining code of the factory, this is simply the code found here, but skipping the first 3 lines (because we defined the startappContainerId variable above) followed by the ending tag

    }
    return o;
});

If that was a little confusing I have added a full example code on GitHub

Step 4 Add the banner location and call getBanner

First we’ll add the following in our html template body where we want the banner to show up.

 <div id="myBannerLocation1"></div>

Now add “Ads” factory as a dependency for your controller and call the getBanner fucntion to the same controller. optionally you can refresh the ad every X milliseconds too. You can call this function from any controller and add banner ads to as many pages as you want

angular.module('myAppName.controllers', ['ionic', 'myAppName.services'])
.controller('TopPicsCtrl', function($scope, Ads) {

    Ads.getBanner('myBannerLocation1');

    // if you would like the add to reload a new ad, you can use the code bellow (it is set to refresh every 20 seconds). 
    //comment it out if you do not want to refresh the ad.
    setTimeout(function(){ Ads.getBanner('startappContainerTopPics'); }, 20000);

});

Note: you could add the getBanner function directly to the controller if you wanted, the reason i didn’t is the code is very long and to avoid clutter in the controller

Step 5 make sure to add the factory to index.HTML

You can use this line in head of index.html to add the services.js and cotrollers.js (if your doesnt have these already)

<script src="js/services.js"></script>
<script src="js/controllers.js"></script>

Here is an Example on my GitHub: it is not a complete app and will not work (it’s not an actual ionic App) but is meant as a added guide.

Tip : by using my referral URL for StartApp.com you’ll make an extra 15$ on your first 100,000 impressions and another $15 on your app’s 1000th download !! ( Proof it’s not BS)

2 thoughts on “Monetizing an Ionic Framework App with StartApp

  1. sagar chaudhari

    hey..!great work..!its working..!
    ads are getting displayed..!but after clicking it..nothing happens..!
    am i missing something..out of this..!?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *