Monetization with Inneractive on Firefox OS

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

  1. Download the library from the Github page, specifically inneractive.js.
  2. Include the inneractive.js script in your HTML (or through any other script loader):
  3. <script src="inneractive.js"></script>
  4. Create an account at Inneractive. Once your account is approved you can access the console and create an App.

    Create App - Inneractive Console

    This will generate a unique ‘App ID’ and can be found at the bottom of the Dashboard.

    Dashboard - Inneractive Console

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.

More articles by Robert Nyman [Editor emeritus]…


15 comments

  1. Luke

    Firefox OS seems like a neat project. I’m wondering how it will compare with Android though. If Firefox apps run with Firefox on Android, what is the benefit? Integration of more APIs, and no preinstalled bloatware like Google Play /Facebook/50 other built-in apps? Will the web browser and operating system be upgradeable, unlike Android?

    I’ve seen articles like this focus on the JS end of things, but is it at all possible to root a Firefox phone, like Android and be able to overclock/underclock/tweak and use standard Linux tools or backup?

    October 31st, 2013 at 19:55

  2. Jason Weathersby

    Firefox OS supports OTA updates through the vendor. If you are using an unlocked phone you can flash your own custom build or use a build provided by the vendor. The source for the OS and all the system apps are available for anyone to download and tweak. One of the major advantages is all the system level apps are written in HTML5, making them fairly simple to alter and interrogate for educational purposes. For a detailed look at the system architecture take a look at this MDN article:
    https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture

    On the rooted question, the ZTE and the Geeksphone developer phones come this way, but the others will depend on the carrier whether they support doing this or not. Gonk is a linux kernel so I suppose the developer can do the same things that are possible with a similar android phone.

    November 1st, 2013 at 09:20

  3. MykeP

    Hi!

    Inneractive hasn’t paid for a long time to lots of their users. I suppose that if you’re a big fish like disney or zynga you have no problem with them, but small players have been in trouble for a long time. Just check facebook or twitter.

    November 2nd, 2013 at 03:47

  4. Hillel Fuld

    MykeP, hi, this is Hillel from Inneractive and I just wanted to let you know that we do in fact pay all our developers and continue to do so. Many of the developers that often speak about not receiving payments have not yet met the payment threshold and others have not waited for the payment period to end. We view our payments as a very important issue and Mozilla developers as a top priority. Feel free to reach out to me with any questions. Thanks!

    November 4th, 2013 at 22:58

  5. William Forrest

    Nice! Very simple to use. Will the ads be heavy from the client to download?”

    November 4th, 2013 at 23:05

    1. Louis Stowasser

      The ads should only be some JavaScript code and small image so nothing too heavy.

      November 6th, 2013 at 15:25

  6. Hu

    As FirefoxOS apps are written in HTML5, basically any Website Ads provider should work right ? Inneractive has nothing particular to do with FirefoxOS, it’s just like adSense and others ?
    Also what happens on FirefoxOS when a user click an ad in a App ? Does it open a new view with the Internet Browser or does it display inside the app ?

    November 6th, 2013 at 05:56

    1. Louis Stowasser

      Correct! We just created an easy to use library for Inneractive ads. The complications arise in CSP restrictions where ad networks use JavaScript code that will not be allowed to run in packaged apps. This library gets around this issue by generating the ad code in an IFrame.

      When you click an ad it will open the page in the external browser app, not the app itself.

      November 6th, 2013 at 15:23

      1. Hu

        Ok thanks for your reply.

        November 10th, 2013 at 07:19

  7. Kedar Lasane

    FireFox OS going to give tough compitition to android and ios…
    Its user interfaces seems simply awesome.There is one doubt in my mind-
    can I place offline ads to apps?
    If yes then How??

    November 18th, 2013 at 21:38

    1. Louis Stowasser

      Offline ads aren’t supported in this library. It would be a bit tricky to do advertising offline as statistics need to be sent to ad networks in real time to know who clicked an ad or viewed an ad.

      November 18th, 2013 at 22:42

      1. The Tech Digit

        Thanks Louis for your precious reply. Oh I forgot point Statitics in Ads as

        November 26th, 2013 at 17:37

    2. Luke

      Speaking of user interface, what is the recommended framework – jquery ui? xul? jquery-mobile?

      November 18th, 2013 at 23:27

  8. Daniel Zorro

    Its a shame that inner-active take so much time approving sing-up request, is 3 week ago when I request for a user and I’m still waiting

    November 23rd, 2013 at 17:20

  9. Haowe

    I have tried inner-active in my first firefox os app for two days.
    But I removed it because unacceptable CPC rate. (under $0.005)
    Maybe I will retry several months later.

    November 26th, 2013 at 08:48

Comments are closed for this article.