JavaScript Guides

Back

Home

In-App Advertisement for JavaScript Developers

This tutorial for HTML5 and JavaScript developers explains how you can integrate InMobi banners into you MoSync HTML5 application.

Getting Started With In-App Advertisements Using InMobi

InMobi is an ad banner provider you can use for in-app adverticements in your HTML5/JS app.

An easy way to get started is to use InMobi's test account. In the long run, however, you will need your own InMobi developer account and a site id. MoSync developers can sign up for an account with InMobi at www.inmobi.com/partners/MoSync. See InMobi's JavaScript documentation for more information about their JavaScript API.

To try out the InMobi Ad API, you can use either MoSync Reload or the MoSync SDK.

Using MoSync Reload

1. Start Reload

Start the Reload Server/Development UI (to get started with Reload, consult the guide Using MoSync Reload).

2. Create a New Project

In the Reload Development UI, create a New Project with type Web based, and name it MyAdsApp.

3. Connect a Device

If needed, install the Reload Client app on one or more devices/emulators, and connect to the server (again, consult the guide Using MoSync Reload for further instructions).

4. Reload the App

Run the app on your device to confirm that it works by pressing Reload in the Development UI. You should see this user interface displayed on connected devices:

5. Add Code To Display an Ad Banner

Open the file index.html in the LocalFiles folder of the project.

Add the followoing code from the InMobi JavaScript documentation to the place in index.html where you want the ad banner to display. Add it for example right after the opening body tag in index.html:

<script>
  var inmobi_conf = {
    siteid : "4028cba631d63df10131e1d3191d00cb",
    slot : "15",
    test: true }; 
</script>
<script src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>

The siteid "4028cba631d63df10131e1d3191d00cb" is a test it provided by InMobi. The slot number "15" specifies that the add should be 320 by 50 in size (see list of slot sizes for further details).

6. Test the Result

Save the file index.html and press the Reload button in the Development UI to see the result. The app should now look something like this, displaying the testbanner at the top of the screen:

You can also add interstitial ads to your app using similar code. For interstitial ads you need to use specific slot numbers. To experiment further with the Ad API and learn more, please consult the InMobi's JavaScript Documentation.

Using the Eclipse-based MoSync SDK

Using InMobi's JavaScript advertisement API with the MoSync SDK is as simple as using it with Reload. Just open the MoSync Eclipse IDE and create a new project in the from the HTML/JS WebUI template, then edit the file index.html as outlined above.

To get started with developing HTML5/JS apps using MoSync SDK, check out the guide Getting Started with HTML5 and JavaScript.

Full Code Example

The following is the full code example for the updated version of index.html:

<!DOCTYPE html>
<!--
* @file index.html
*
* Template application that shows examples of how to access
* device services from JavaScript using the Wormhole library.
-->
<html>
  <head>
    <meta name="viewport" content="width=320, user-scalable=no">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Wormhole Template App</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script type="text/javascript" charset="utf-8" src="js/wormhole.js"></script>
    <script type="text/javascript">
      /**
       * Displays the device information on the screen.
       */
      function displayDeviceInfo()
      {
        document.getElementById("platform").innerHTML = device.platform;
        document.getElementById("version").innerHTML = device.version;
        document.getElementById("uuid").innerHTML = device.uuid;
        document.getElementById("name").innerHTML = device.name;
        document.getElementById("width").innerHTML = screen.width;
        document.getElementById("height").innerHTML = screen.height;
      }

      /**
       * Vibrate device.
       */
      function vibrate()
      {
        navigator.notification.vibrate(500);
      }

      /**
       * Play one beep sound.
       */
      function beep()
      {
        navigator.notification.beep(1);
      }

      /**
       * Change page background to a random color.
       */
      function changeColor()
      {
        var color = "#" +
          (Math.random() * 0xFFFFFF + 0x1000000)
            .toString(16).substr(1,6);
        document.documentElement.style.backgroundColor = color;
        document.body.style.backgroundColor = color;
      }

      // Register event listeners.

      // The "deviceready" event is sent when the system
      // has finished loading.
      document.addEventListener(
        "deviceready",
        displayDeviceInfo,
        true);

      // Close the application when the back key is pressed.
      document.addEventListener(
        "backbutton",
        function() { mosync.app.exit(); },
        true);
    </script>
  </head>
  <body>
    <div id="screen">

      // Start of ad banner code.
      <script>
        var inmobi_conf = {
          siteid : "4028cba631d63df10131e1d3191d00cb",
          slot : "15",
          test: true
        };
      </script>
      <script src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>
      // End of ad banner code.

      <div class="pane" id="heading">Customized Wormhole Technology</div>
      <div class="pane" id="info">
        <div class="infoItem">Platform: <span id="platform">&nbsp;</span></div>
        <div class="infoItem">Version: <span id="version">&nbsp;</span></div>
        <div class="infoItem">UUID: <span id="uuid">&nbsp;</span></div>
        <div class="infoItem">Name: <span id="name">&nbsp;</span></div>
        <div class="infoItem">Width: <span id="width">&nbsp;</span></div>
        <div class="infoItem">Height: <span id="height">&nbsp;</span></div>
      </div>
      <div class="pane button" onclick="vibrate()">Vibrate</div>
      <div class="pane button" onclick="beep()">Beep</div>
      <div class="pane button" onclick="changeColor()">Change Color</div>
    </div>
  </body>
</html>