monetize | Mobile Web

Important: InMobi JavaScript tags are optimized for mobile websites, and not for mobile applications, or for third party development platforms. This means that even though it is possible to use InMobi JavaScript tags with mobile applications or third part development platforms, results may vary and InMobi will not be able to provide support.

Setting Up

  • Step 1: Creating an InMobi Account

    To set up an InMobi account:

    1. Sign up as a publisher.

    2. Complete the e-mail verification for your account.

  • Step 2: Registering Your Property

    Contact your InMobi monetization partner or email at developer@inmobi.com

  • Step 3: Integrating the Ad Code

Integrating the Ad Code

To request for an ad with the simplest setup, first integrate with the InMobi ad code. To do this, paste the following code into the page where you want to display ads from InMobi. The code below can be pasted within a div element or as appropriate depending on the structure of your web page.

<script type="text/javascript">
var inmobi_conf = {
siteid : "YOUR-SITE-ID",
slot : "15",
testdeviceid: "HTC Sense"};
</script>
<script type="text/javascript" src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>
		

Details on the inmobi_conf object:

  • The siteid parameter is the unique ID of your site. You can manage your sites by first clicking the My Properties tab and then clicking Manage under your property at dashboard.inmobi.com
  • The slot parameter corresponds to the dimensions of the slot or box where ads appear on your site.

Refer to the Slot Sizes section for the supported ad slot values and the corresponding dimensions.

During development and testing, you must enable the test mode for the property you are integrating with. The test device id must be passed in the “testdeviceid” parameter.
When you are ready to go live, turn off the test mode from your account and you should start receiving live ads.

Notes:

  • The code has to be pasted on all the pages where you want InMobi ads displayed.
  • All ads, excluding Native ads, will be fetched via an Iframe. This will prevent blocking the page load.
  • The ad code script tags must be part of the HTML of the page; they cannot be generated dynamically by JavaScript.
  • Do not insert InMobi ad code in an Iframe tag. If you do, rich-media ads served by InMobi will not function.

If you wish to monetize traffic from EEA region, then implement the mandatory GDPR compliance. You can read further on GDPR regulations here.

GDPR Compliance

Variable Type Inference
consent String true - Publisher has provided consent to collect and use user’s data.

false - Publisher has not provided consent to collect and use user’s data.

Note: Any value other than true and false is invalid and will be treated as value not provided by publisher, i.e. empty value.

gdpr String Whether or not the request is subjected to GDPR regulations, deviation from the set values true and false, indicate an unknown entity.

Example of implementation:

<script type="text/javascript">n
var inmobi_conf = {
siteid : "YOUR-SITE-ID",
slot : "15",
gdpr : "true",
consent : "false",
</script>
<script type="text/javascript" src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>
		

Ads.Txt

Ads.txt, or Authorized Digital Sellers, is an IAB project designed to improve transparency in the advertising ecosystem, allowing publishers to declare who is authorized to sell their inventory. Ads.txt is a text file publishers post on their root domain to identify the Authorized Digital Sellers for a participating publisher, allowing brands to have confidence they are buying authentic publisher inventory.

TAG (Trustworthy Accountability Group) requires that a publisher who is integrating with InMobi to monetize on the mobile web, MUST add InMobi to their ads.txt file before they are able to go live.

Step 1: Create

If you don't already have one, create a .txt file and name it ads.txt.

Step 2: Add InMobi Entry

Sample ads.txt file

Add an entry in the Ads.txt for InMobi which would be similar to the following information: ‘inmobi.com,74dcd2c4fa2d401cb74bbb9c124a268c,DIRECT,83e75a7ae333ca9d’

Note: Contact your Aerserv Account Manager to find the exact entry to add to your ads.txt file.

IAB Field Name Description Example Requirement Status
Domain Name of the Advertising System The domain name of the system to which bidders connect. inmobi.com Mandatory
Seller Account ID InMobi Publisher Account ID 74dcd2c4fa2d401cb74bbb9c124a268c Mandatory
Type of Account/Relationship The type of account is, either:
  • DIRECT: The publisher directly controls the account in Field 2 on the system in Field 1.
  • RESELLER: The publisher has authorized another entity to control the account indicated in Field 2 and resell their ad space via the system in Field 1.

    Note: The IAB specifies that DSPs should treat this field as case insensitive when interpreting data. InMobi recommends that the value in this field be typed in all capital letters.

Direct Mandatory
Certification Authority ID An ID that uniquely identifies the system in Field 1 within a certification authority.

Note: The TAG ID for all InMobi lines in the ads.txt file is 83e75a7ae333ca9d.

83e75a7ae333ca9d Optional, but highly recommended

Step 3: Post

Post the ads.txt file to the root directory of your domain's server for the appropriate website. The file can be accessible via HTTP or HTTPS but must be located under a standard relative path: "ads.txt". The HTTP request header must contain "Content-Type: text/plain".

Requesting Ads on Demand

By default, the JavaScript ad code automatically requests for an ad when the page is first loaded. To fetch ads on demand, or after the page has loaded, add the parameter manual:true to the config object:

<div id="my-ad-slot">
<script type="text/javascript"> 
var inmobi_conf = { 
siteid : "YOUR-SITE-ID", 
slot : "slot number", 
manual: true };
</script>
<script type="text/javascript" src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>
</div>
		

With the manual:true parameter present, the ad is not loaded automatically at page load. The ad can be fetched at any time in the life cycle of the page using the getNewAdfunction. You must provide the HTML id of a div element to identify the location where the ad will be displayed.

<script type="text/javascript">
_inmobi.getNewAd(document.getElementById('my-ad-slot'));
</script>
		

Note: After the ad has been loaded, a new ad can be fetched into the same slot using the same getNewAd call. This can be used to periodically reload the ad slot.

_inmobi.getNewAd can have a config object as an optional second parameter. If provided, the new config object will be used for making ad requests.

<script type="text/javascript"> 
var newConfig = { 
siteid : "YOUR-SITE-ID", 
slot : "slot number", } 
_inmobi.getNewAd(document.getElementById('my-ad-slot'), newConfig);
</script>
		

Integrating with Interstitial Ads

InMobi’s Javascript integration for mobile web allows you to display full screen interstitial ads at any point of your page’s lifecycle. To display interstitial ads, add the parameters adtype:"int" and manual:true to the config object.

Interstitial ads have a close button to allow users to close the ad and return to your content. When users click this button, all of the listener functions registered on the close event will be called.

To receive a callback when the ad is closed, register a JavaScript handler via _inmobi.addEventListener(). Refer to the example shown above.

The interstitial ad should be presented in a modal dialog, so that the user can interact with or dismiss the interstitial ad to proceed. Typically, an interstitial ad is present over a translucent overlay covering the entire browser viewport area, preventing the user from interacting with the web page, with the ad placed in the center.

<div id=”my-ad-slot”>
<script type="text/javascript"> 
var inmobi_conf = { 
siteid : "YOUR-SITE-ID", 
slot : "slot number", 
manual: true, 
adtype: "int" };
</script>
<script type="text/javascript" src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>
<script type="text/javascript"> _inmobi.addEventListener("close", function(event){/* handle close button */});</script><br></div>
		

Later, when you want to show the interstitial ad, fetch the ad with the following code:

<script type="text/javascript"> _inmobi.getNewAd(document.getElementById('my-ad-slot'));</script>
		

When _inmobi.getNewAd is invoked, the ad is fetched and displayed.

_inmobi.getNewAd can have a config object as an optional second parameter. If provided, the new config object will be used for making ad requests.

<script type="text/javascript"> 
var newConfig = { 
siteid : "YOUR-SITE-ID", 
slot : "slot number", } 
_inmobi.getNewAd(document.getElementById('my-ad-slot'), newConfig);
</script>
		

Here is an example of a modal window using CSS and HTML. This example assumes a 320px wide ad slot, and is optimized for iOS and Android browsers:

<body> ... <!-- end of page content --> <!-- begin ad interstitial overlay --> 
<div id="overlay"> 
<div id="hbox"> 
<div id="my-ad-slot"> 
<script type="text/javascript"> 
var inmobi_conf = { 
siteid : "YOUR-SITE-ID", 
slot : "slot number", 
manual: true, 
adtype: "int" }; 
</script> 
<script type="text/javascript" src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>
</div>
</div>
</div>
<style type="text/css" media="screen"> 
#overlay { visibility: hidden; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1000; background-color: #ccc; display: table; } 
#hbox { display: table-cell; vertical-align: middle; } 
#my-ad-slot { margin: 0; } 
</style> 
<script type="text/javascript" charset="utf-8"> 
function showInterstitial() { 
_inmobi.getNewAd(document.getElementById('my-ad-slot')); 
document.getElementById('overlay').style.visibility = 'visible'; 
} 
function hideInterstitial() { 
document.getElementById('overlay').style.visibility = 'hidden'; } 
_inmobi.addEventListener("close", hideInterstitial); 
</script>
</body>
		

Note: To receive interstitial ads from the server, the slot parameter must be one of 14, 16, or 17.

Integrating with Native Ads

Native ads allow publishers to display ads which are similar in look and feel to your native content allowing you to give your users a unique experience. A native ad response contains ad assets in a publisher-specified format. Common assets include an icon, screenshot of the app (for app download ads), and textual assets such as title, subtitle and description.

For creating specific templates for your app layout, please contact us.

To fetch native ads you will need to provide an HTML element in which you intend to place the ad. This element should be of the same type and size as the rest of your content around the ad.

elem is the html element (typically a div) that will contain the native ad.

( Note: it is the element object and not the element’s id. InMobi recommends using a div element to place the ad. iFrames are not recommended).

Apart from standard parameters, the config object provided must have an onSuccess handler function. Optionally, the config object can also supply an onError function. An example config which also has the signature of onSuccess and onError callback:

<script type="text/javascript"> 
var newConfig = { 
siteid : "YOUR-SITE-ID", 
onSuccess : function(ad,elem){ // Dom manipulation to display the ad on page // Set up click listeners here }, 
onError : function(code,elem){ if(code === “nfr”) // Handle no fill case here }, , }
</script>
		

To fetch a native ad call the following API:

_inmobi.getNativeAd(elem, config);
		

The onSuccess callback is a mandatory param without which ads will not be served. The onSuccess callback provides an “ad” parameter which is a json object containing references to the assets as defined in the template.

Registering a Native Ad Render

The InMobi JS library will automatically track when the impression is viewable and record it accordingly.

Registering a Native Ad Click

The ad object apart from the asset keys also contain two functions which have to be used for reporting and handling ad clicks, which are:

  • ad.reportAdClick(): Report ad click alone and take care of opening landing page yourself.
  • ad.reportAndHandleAdClick(): Report ad click and let inmobi open landing.

An ad click has to be defined by you to be in line with the native experience of your mobile website. If you choose to open the landing page yourself, you must use the value of “landing_url” key from the ad object.

A sample ad object:

ad = {
“title” : “Starwars”,
“description” : “The most awaited game of the year, available for free download now”,
“landingURL” : “http://starwars.game.link”
“icon_url” : “some_image_url”,
“reportAdClick” : function() { //defined by inmobi },
“reportAndHandleAdClick” : function() { //defined by inmobi },
}
		

You can also provide the onError callback in the config object. The onError handler passes two parameters - code and elem. Code is the error code for the ad request failure and elem is the ad element for which the ad was requested. At this time, “NFR” is the only code that you will get from inmobi. You can view this github repo to see a sample integration.

Handling No-fills

The InMobi Javascript ad code allows your code to detect if InMobi was unable to fill an ad request and invokes an error handler specified by you to handle this error. This callback must be provided in the onError parameter in the config object.

The onError handler passes two parameters - code and elem. Code is the error code for the ad request failure and elem is the ad element for which the ad was requested. At this time, “NFR” is the only code that you will get from inmobi. You can refer to the sample code below or InMobi’s github repository to see a sample integration.

var inmobi_conf={
siteid : "YOUR_SITE_ID_HERE",
onSuccess : function(ad,div){ 
div.getElementsByTagName("img")[0].setAttribute("src",ad.icon.url);
div.getElementsByTagName("h3")[0].innerHTML=(ad.title);
div.onclick=ad.reportAndHandleAdClick;
div.getElementsByTagName("p")[0].innerHTML=ad.description;
div.style.display="";
},onError : function(code,div){console.log(code);if(code = “NFR”) {// Call the next Ad network to request for native ads or handle appropriately}}};
		

Slot Sizes

The following slot sizes are supported:

Parameter Value

Slot Size

Intended Inventory

1

120x20

All Phones (Feature Phones, iOS, Android)

2

168x28

All Phones (Feature Phones, iOS, Android)

3

216x36

All Phones (Feature Phones, iOS, Android)

4

300x50

All Phones (Feature Phones, iOS, Android)

9

320x48

Smartphones and Tablets (iOS, Android, Others)

10

300x250

Smartphones and Tablets (iOS, Android, Others)

11

728x90

Smartphones and Tablets (iOS, Android, Others)

12

468x60

Smartphones and Tablets (iOS, Android, Others)

13

120x600

Smartphones and Tablets (iOS, Android, Others)

14

320x480

Smartphones and Tablets (iOS, Android, Others) – Interstitial ads

15

320x50

Smartphones and Tablets (iOS, Android, Others) – Rich media expandable ads

16

768x1024

Tablets (iOS and Android) - Portrait interstitial ads

17

800X1280

Tablets (iOS, only) - Portrait Interstitial ads

Auto Refreshing Ads

You can now enable auto refresh of text and banner ads, and specify a refresh interval (of seconds). Auto refresh of rich media ads is also supported, but only when the rich media ad is not in the expanded state.

<div id="my-ad-slot">
<script type="text/javascript">
var inmobi_conf = {
siteid : "Your-SITE-ID",
slot : "slot number",
test: true,
autoRefresh: 60, // note: in seconds, the minimum accepted value is 20
};
</script>
<script type="text/javascript" src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script> 
</div>
		

Note: Auto refresh is not supported for Interstitial and Native ads.

Notifying Errors Using Callback

Note: This section only applies to non-native ads.

A publisher can be notified when an error is encountered while serving ads. This helps the publisher take appropriate steps to make better use of the information provided via the callback system. Currently, this notification is supported in the NFR scenario only.

For example, if a publisher faces an NFR (No-Fill Response) scenario, a callback is sent notifying that there is an NFR. The publisher can now take steps to address and blank real estate issue that was caused by non-availability of ads.

<div id="my-ad-slot">
<script type="text/javascript"> 
var inmobi_conf = { 
siteid : "YOUR-SITE-ID", 
slot : "slot number", 
onError : function(code) { if(code == "nfr") { document.getElementById("my-ad-slot").style.display = "none"; // do something else. call to other ad network or logic to display in-house ads, etc. } } };
</script>
<script type="text/javascript" src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>
</div>
		

In the above code example, the parameter code will give nfr when no ads are returned.

Serving Sticky Banner Ads

Sticky banner ads are those that remain stable in a position on the screen even when the page is scrolled up or down. InMobi supports sticky banner ads when integrated using the JavaScript Ad Code. This feature is configurable where you can choose to set the sticky ad to the left or right, or on top or bottom of the screen.

<div id="my-ad-slot" class="inmobi-ad">
<script type="text/javascript"> 
var inmobi_conf = { 
siteid : "YOUR-SITE-ID", 
slot : "slot number", 
sticky: "top" // "top", "right", "bottom" and "left". left and right only in case of 120x600 slot size. // Works only when the ad code has a container with class "inmobi-ad", on iOS 5 and above. };
</script><script type="text/javascript" src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>
</div>
		

Important!

The sticky banner ad feature currently works only on devices running iOS version 5 or later. On other devices, the parameter is ignored, and the sticky banner ad behaves like a normal banner ad, and is shown in the page at the position where the code is inserted.

Notes:

  • The left and right placement of sticky ads work only in the case of 120x600 slot size.
  • The sticky ads feature works only when the ad code has a container with the inmobi-ad class.

Passing Demographic Information

Demographic data about the user may be passed to InMobi's Ad Server to assist with ad targeting.

Demographic parameters are specified along with the Site ID, Slot, and so on, in the inmobi_conf object.

Supported Parameters

Parameter Name

Intended Inventory

age

User’s age in years. Must be a positive integer.

gender

User’s gender. Accepted values are f or m in lower case.

location

Format: City-State-Country

interests

A comma-separated list of keywords denoting user’s area of interests as agreed by the user or detected by your application. For example, cars, sports, F1, stocks.

postalCode

Example: 95035

areaCode

Example: 408

dateOfBirth

Format: YYYY:MM:DD. Example: 1974:12:12

income

Example: 250000

latlong

Example: 37.771008,-122.41175

education

Example: UG or PG

ethnicity

Example: asian, hispanic

Example containing demographic information:

<script type="text/javascript">
var inmobi_conf = {
siteid : "Your-Property-ID",
slot : 15,
gender: "m",
age: 25,
interests: "cricket,hockey,golf"
};
</script>
<script type="text/javascript" src="http://cf.cdn.inmobi.com/ad/inmobi.js"></script>
		

HTML5 API Implementations

The HTML5 spec brings a lot of functionality to the browsers, such as caching, easy access to geo, and other APIs that easily allow access to the files system, and to check for connectivity.

Showing a "House Ad" When Offline

First, make sure you have a local copy of the ad you want to display. You need to cache it so that it can be displayed without internet access. You can read more about the HTML5 applicationCache API here. After you have your house ad cached, add the following line to your inmobi_conf variable:

house_ad_path: "<relative/path/to/house/ad>"
		

Then add this script near the end of your page:

<script type="text/javascript">
if (!(navigator.onLine)) { // if there is no online access, show local image
var houseAd = document.createElement("img");
houseAd.src = inmobi_conf["house_ad_path"];
document.getElementById("<div id of space for ad>").appendChild(houseAd);
}
else { // if there IS internet, then contact InMobi and dynamically put the script file inside of the parent div element of the ad
var sc = document.createElement("script");
sc.src = "http://cf.cdn.inmobi.com/ad/inmobi.js";
sc.type = "text/javascript";
document.getElementById("<div id of space for ad>").appendChild(sc);
}
</script>
		

Now you will have a layout that will not break if your users don't have connectivity. You can also show whatever you want in that scenario.

Important!

There is no connectivity in this scenario, so ensure that you do not link the ad to anything that requires Internet access.

Utilizing Geolocation

Using the geolocation API, utilizing geo-coordinates is now easier. You can read the official docs for geolocation here.

Geo targeted ads need to be implemented as shown here:

<div id="inmobiIntegration1">
<script type="text/javascript" src="JSAdCode/build/inmobi-dev.js"></script>
<script>
function addGeoCoords(position) {
var inmobi_conf = {
siteid : "Your-Property-ID",
slot : "15",
latlong:position.coords.latitude + ',' + position.coords.longitude
};
_inmobi.getNewAd(document.getElementById('inmobiIntegration1'), inmobi_conf);
}
navigator.geolocation.getCurrentPosition(addGeoCoords);
</script>
</div>
		

Now, you can serve your users geo-targeted ads.

Mobile Web Testing

After integrating the InMobi Ad Tracker JavaScript tags with your mobile web site, ensure that you test the integration by performing the below steps, before launching your advertising campaign:

  1. Delete your browser cookies.
  2. Get your tracking URL.
  3. From your mobile device, click the tracking URL for campaign tracking. This should redirect you to the Landing Page of your campaign.
  4. On your mobile website, go through the steps on how a user can perform to generate a conversion. Doing this, triggers all the JavaScript tags that you integrated, and it would read the cookie placed on your browser during click time, which pings our servers.

Your mobile website is successfully integrated and you are ready to launch your advertising campaign.