By
Monetization is important for any viable platform so developers can benefit from their hard work and to further encourage quality apps. Mozilla teamed up with the ad network, Inneractive, to create a simple library for integrating ads into apps and games specifically for Firefox OS.
This article will go through the process of integrating Inneractive ads in your Firefox OS app.
Getting Started
- Download the library from the Github page, specifically
inneractive.js. - Include the
inneractive.jsscript in your HTML (or through any other script loader): - Create an account at Inneractive. Once your account is approved you can access the console and create an App.
This will generate a unique ‘App ID’ and can be found at the bottom of the Dashboard.
Creating the Ad
Your app should have access to the global Inneractive object. Create an ad with the function createAd.
var myAd = Inneractive.createAd(options)
options is an object where you customize the ad. The available options
are:
- APP_ID – This can be found in the previous section when creating an App through the Inneractive Console.
- TYPE – Can be one of three types of ads:
Banner: Small ad that is usually constant at the bottom of the screen.Rectangle: Medium sized ad that is usually centered in the middle of
the screen.Interstitial: Fullscreen ad to display usually during levels or
screens.
- REFRESH_RATE – Time in seconds between rotating ads. Minimum is 15 seconds, default is 30.
Example
var options = {
TYPE: "Banner",
REFRESH_RATE: 18,
APP_ID: "Test_App_ID"
};
var myAd = Inneractive.createAd(options);
Placing the Ad
Once the ad has been created with your options, you need to place it on the screen.
The function addTo will place the ad into the DOM tree under a parent node. You can usually just use document.body for this:
myAd.addTo(document.body);
This will place the ad under the <body> element of your webpage.
Then you need to position the ad with the function placement. This function takes two arguments, vertical position and horizontal position where the options are top, bottom, center and left, right, center.
For a banner ad to sit at the bottom of the screen you would do the following:
myAd.placement("bottom", "center");
A rectangle that is exactly in the center of the screen:
myAd.placement("center", "center");
Removing the Ad
If you need to remove the ad from the screen for whatever reason, use the function remove.
myAd.remove();
Once the ad is removed you cannot bring it back and will need to create a new ad with Inneractive.createAd().
If you have any issues or need support using the library you can file issues on the Github Issue Tracker.
More Monetization options
With Firefox OS you may use any of your favorite ad networks that would work in a browser such as Google Adsense using their integration code.
You also have the option of integrating In-app payments for selling digital goods through your app or game.
About Louis Stowasser
I am a Partner Engineer for Mozilla, maintainer of Gamedev Weekly and creator of the CraftyJS game engine, based in Brisbane Australia.
More articles by Louis Stowasser…
About Robert Nyman [Editor emeritus]
Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.
15 comments