Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Adding In-App Advertising to Nokia Asha Web Apps

From Wiki
Jump to: navigation, search
Featured Article
14 Oct
2012

This article explains how to add in-app advertising with Inneractive to Nokia Asha Web Apps. A template project that supports in-app ads will be created and the final version is available for download at the end of this page.

Note.pngNote: This is an entry in the Asha Touch Competition 2012Q3

Article Metadata
Code Example
Source file: Media:Template.wgt
Installation file: Media:Template.wgt
Compatibility
Platform(s):
Series 40
Article
Created: igordsm (13 Jul 2012)
Last edited: hamishwillee (09 May 2013)

Contents

Introduction

In-app Advertising is a very popular monetization strategy where the application is distributed for free and revenue for the developer is generated by clicks in ads positioned inside the app. The ads are loaded from the Internet every time the application is used. Web Apps are a natural candidate for In-App Advertising because they are always connected and cannot be executed offline. Nokia Asha Web Apps support InnerActive banner ads out of the box ad Google Adsense with a little more work.

The correct placement of the ads is a vital factor for their acceptance by the user. They should be visible, but not to the point where they impact app usage. In this article we show how to build a template application that positions the ads in an unobtrusive way - following the Inneractive recommendations. We will also see how to add context information about your application to increase your revenue by displaying better targeted ads.

A basic project with ads

Open Nokia WDE, and create a new project (File->New->Series 40 Web App (wgt)) based on the "Basic Project". Name the project "Ads Template". We will make modifications to this project to transform it in a template to use as a starting point to build advertising-supported apps.

Inneractive Ads

To register in Inneractive follow this link. After receiving the email confirmation, login to inneractive and click Add App. Fill in all the information required and click Create. You will receive an App Id. This code is used to identify ad requests from your application and will be required later.

To add Inneractive ads to an app, open index.html and add the following after the div element with ui-content class.

<div id="ads" class="ui-ads">
<div id="inneractiveads"></div>
<script language="javascript" type="text/javascript" src="http://cdn2.inner-active.mobi/wv-js/inneractive_nokia_S40.js"></script>
<script language="javascript" type="text/javascript">
inneractive.parameters.divID = "inneractiveads";
inneractive.parameters.appID = "YOUR_APP_ID_HERE";
inneractive.displayInneractiveAd();
</script>
</div>

This code loads a Javascript file that contains the functions to display the ads. The divID parameter is the ID of the element that should receive the ads. The appID should be set to the value obtained after the app's registration. Finally, the function displayInneractiveAd() is called and the ad is loaded and displayed. To run the application, hit Ctrl+R. The result should look like this:

Ads running on a full touch device.

Inneractive has an official guide about Nokia Asha Web Apps here. This might contain more up to date information about the integration options.

Other ad providers

Other ad providers for mobile web sites include Google Adsense and Vserv.

Google Adsense uses the <iframe> tag, which is not supported in Nokia Asha Web Apps. Also, the Google Adsense for Mobile is exclusive for mobile web sites. If your app is available as a website then this is not a problem, however if your app is supposed to be independent from a website and hosted entirely on the Nokia Store, Adsense won't work.

The same happens with ads for mobile sites from Vserv, they don't work on Nokia Asha Web Apps because Vserv checks the websites that uses their ads. Since a Nokia Asha Web Apps does not have a fixed URL, it can't use their services. It might be possible to request ads from a Application Zone, but when I tried it didn't return any ads.

There are many other ad providers to test but, AFAIK, the only one that works without hassle at time of writing is Inneractive.

Positioning the ads

There are basically two options for the position of the ads: mixed with the content, or in a separate view. We will see examples of how to use these two position styles, but the first we will build a view system that can accommodate both options.

Building apps with multiple views

First of all, create a new CSS file called multi_view.css in the s40-theme/css folder and include it in the index.html file (put the code below on the <head> tag). We will use this file to put most of the classes we create for this example. Add this to the file content:

.ui-ads {
width: 100%;
text-align: center;
height: 80px;
}
 
.view {
overflow: scroll;
display: inline-block;
vertical-align: top;
}
 
.ui-content {
overflow: hidden;
width: 1000px;
}
 
 
html, body {
overflow: hidden;
}

The view class is the most important one here. It will be used to indicate that a <div> is actually a view in our application. You may be wondering why the ui-content has a width of 1000px. The reason is that we will put our views side by side and use a transition to make the view changes smoother and the width of the ui-content must be bigger than the sum of the widths of all our views. You could do view changing manipulating the display property of each view, but the result wouldn't have the pretty transitions.

Also, since Web Apps can run in two types of screens, portrait (240px) and landscape (320px), it is necessary to define another class to indicate the size of the view. The "Basic App" template already defines two different CSS files that are included according to the device screen. These files are single_landscape.css and single_portrait.css, both in the s40-theme/css folder. Open both files. Add the following to single_landscape.css.

.full-width {
width: 320px;
}

Add the following to single_portrait.css.

.full-width {
width: 240px;
}

This way the full-width class will make our elements occupy the whole width of the screen, no matter the device's orientation. Replace the ui-content div with the code below. Note that there must be no space or line breaks between the </div> and a new <div>. Also, add the id #header to the element that contains the title of the app.

<div id="content" class="ui-content">
<div class="view full-width">
<h1>View 1</h1>
<input type="button" name="button1" class="ui-button" value="Go to View 2" />
</div><div class="view full-width">
<h1> View 2</h1>
<input type="button" name="button1" class="ui-button" value="Go to View 1" />
</div>
</div>

This HTML defines two views that occupy the entire width of the device. If you run the app now, only the first view should be visible. To make the second view visible we can use the margin-left property of the #content<div>. If we set it to -100%, the second view will be visible. In this spirit, we will define two more classes, one for each view. Unfortunately, setting the margin to -200% didn't work with my tests, so we'll need to add these two classes again in the respective orientation css files.

Add the following to single_portrait.css:

.view1 {
margin-left: 0px;
-webkit-transition: margin-left 0.5s linear;
}
 
.view2 {
margin-left: -240px;
-webkit-transition: margin-left 0.5s linear;
}

Add the following to single_landscape.css:

.view1 {
margin-left: 0px;
-webkit-transition: margin-left 0.5s linear;
}
 
.view2 {
margin-left: -320px;
-webkit-transition: margin-left 0.5s linear;
}

The last thing is to make the buttons work. We will use the functions of the MWL library. The one we will use is mwl.switchClass. In the button in the first view, add the following:

onclick="mwl.scrollTo('#header');mwl.switchClass('#content', 'view1', 'view2');"

Add the following to the button on the second view:

onclick="mwl.scrollTo('#header');mwl.switchClass('#content', 'view2', 'view1');"

This code adds the class corresponding to the destination view and remove the class of the current view. The changes in the margin-left property will be smoothed because of the transition, giving a nice "change view" effect. Below are images of our example running on a portrait full touch simulator and on a landscape simulator.

Ads mixed with the content

To put the ads mixed with the content it is sufficient to put the <div> with the ads where you want them to appear in the content. Common options are to put them at the bottom of the page after the content, or at the top of the page before the content. These two options are easily done with our view system. To put the ads before the content, just paste the code defined in the ui-ads <div> before the #content <div>. This will make the ads visible in every view.

Putting the ads below the content is a litte more delicate. The ads are visible, but the content comes first and the user's eyes might not meet the ad, so this is not a recommended placement.

Ads in separate views

This is the recommended placement by Inneractive. The idea is to put ads between views of your application, taking care not to include too many (otherwise the user might be driven out by them). Note: the view with the ads should have the same look and feel as the rest of the app! The ads must appear natural and the best way to do this is to blend them in the app visuals.

We will make the ads occupy the entire screen between views in two phases. In the first phase the ads will be shown without transitions. In the second phase we will add smooth transitions to show the ads.

To make the adds appear alone in the screen we will set the height of the #content element to zero, making it invisible. Then we will make the ui-ads <div> visible. Open views.css and add the following classes:

.ui-ads-hide {
display: none;
}
 
.ui-ads-show {
display: block;
}
 
.ui-content-hide {
height: 0px;
}
 
.ui-content-show {
height: auto;
}

These classes control the visibility of the content and ads block. Now add the .ui-ads-hide to the ui-ads <div>. Now if you want to show an add when the first button is clicked, replace the old onClick handler with:

onclick="mwl.switchClass('#content', 'ui-content-show', 'ui-content-hide'); mwl.switchClass('#ads', 'ui-ads-hide', 'ui-ads-show');mwl.switchClass('#content', 'view1', 'view2');"

To add the ad view to any button, just add the following code before any action in your onClick handler

mwl.switchClass('#content', 'ui-content-show', 'ui-content-hide'); mwl.switchClass('#ads', 'ui-ads-hide', 'ui-ads-show');

Now the ads view will be shown when the button is clicked. However, there is no way to skip the ad and move to the next view. We will add a button to skip the ads. Add the following code at the end of the #ads element.

<input type="button" name="button1" class="ui-button" value="Skip ads" onclick="mwl.switchClass('#content', 'ui-content-hide', 'ui-content-show'); mwl.switchClass('#ads', 'ui-ads-show', 'ui-ads-hide');"/>

See below the resulting screens.

The code above works, but the view change is abrupt. We would like to introduce a smooth transition, like the transition between views implemented earlier. This will take a little more work, because we will need to define the exact height of every view we create. In this spirit, open views.css and add the following:

.view1-height {
height: 450px;
-webkit-transition: height 0.5s linear;
}
 
.view2-height {
height: 300px;
-webkit-transition: height 0.5s linear;
}

Now add the ui-ads-hide to the #ads element and wrap the #content element with a new div, like the example below. There's much more text in the first view to demonstrate that our template supports scrolling correctly.

<div id="content_wrapper" class="full-width view1-height">
<div id="content" class="ui-content">
<div class="view full-width">
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<h1>View 1</h1>
<input type="button" name="button1" class="ui-button" value="Go to View 2" onclick="" />
</div><div class="view full-width">
<h1> View 2</h1>
<input type="button" name="button1" class="ui-button" value="Go to View 1" onclick="" />
</div>
</div>
</div>

Also, replace the button in #ads with a div, like this:

<div id="ads" class="ui-ads ui-ads-hide">
<div id="inneractiveads"></div>
<script language="javascript" type="text/javascript">
inneractive.parameters.divID = "inneractiveads";
inneractive.parameters.appID = "Montagner_IsItDown_Nokia";
inneractive.displayInneractiveAd();
</script>
<div id="btnAdSkip">
 
</div>
</div>

Finally, create a new javascript file named ads.js with the following content and include it in the index.html.

function set_ad_return(cl) {
var btn = document.getElementById("btnAdSkip");
btn.innerHTML = "<input type=\"button\" id=\"btnAdSkip\" class=\"ui-button\" value=\"Skip ads\" onclick=\"mwl.switchClass('#ads', 'ui-ads-show', 'ui-ads-hide'); mwl.switchClass('#content_wrapper', 'ui-content-hide', '" + cl + "'); mwl.timer('reset_ad_return', 1000, 1, 'mwl.switchClass(\'#btnAdSkip\', \'ui-ads-show\', \'ui-ads-hide\'); inneractive.displayInneractiveAd();');\" />";
mwl.switchClass('#btnAdSkip', 'ui-ads-hide', 'ui-ads-show');
}

This function puts a "Skip Ads" button in the #ads element that redirects to the correct view. Since each time the button should redirect to a different view, this function creates a new button for each ad impression. When the button is clicked, it also requests a new ad, so each time the view is shown, a new ad appears.

Inneractive suggest that ads should be appear after the user has become engaged with the application. In games, that means that the ads should be placed after the user played a little. In apps, the ads should come after the end of a task. In this spirit, we will add the ads only on the transition from the second view to the first.

Add the following to the first button:

onclick="mwl.switchClass('#content_wrapper', 'view1-height', 'view2-height'); mwl.scrollTo('#header'); mwl.switchClass('#content', 'view1', 'view2'); "

Add the following to the second button:

onclick="mwl.switchClass('#content_wrapper', 'view2-height', 'ui-content-hide'); mwl.switchClass('#ads', 'ui-ads-hide', 'ui-ads-show'); mwl.switchClass('#content', 'view2', 'view1');mwl.timer('ad_skip', 5000, 1, 'set_ad_return(\'view1-height\');');"

The main difference this time is that we add a timer to make the "Skip Ads" button appear only after 5 seconds. This lets the user watch the ads a little before he/she decides not to click. Below there is a video of this example running on a Nokia C3-00. The quality is not great, but it illustrates the final result well. Notice that the transitions work as expected, despite the device being old and slow compared to the new Asha line.


Created template running on a Nokia C3-00.

Tips from Inneractive

Inneractive maintains a page with tips and best practices about ad placement. This is a very interesting resource that everyone that wants to optimize their ad-supported apps should look at.

Refining your ads

The last step in this article is to pass more information about your app to Inneractive so they can show you better targeted ads. This extra information is passed setting a few variables in the inneractive.parameters namespace.

The parameters are listed below:

  • Age (of the user). Set the inneractive.parameters.age property.
  • Gender (of the user). Set the inneractive.parameters.gender property.
  • Keywords - comma separated keywords for this specific section. Set the inneractive.parameters.keywords property.
  • Category (of the app). Set the inneractive.parameters.category property.
  • Coarse location - comma separated list of containing country, state, city values. The country can be obtained from the navigator.homeCountry property. See this article to know more about this property. It provides a complete code example that obtains the country from the homeCountry property. Set the inneractive.parameters.location property to send the country information.
  • GPS location (of the device). This is covered in the following section.

GPS Location

Web apps can query the position of the device using W3C's geolocation API. Below is an example that sets the inneractive.parameters.GPSLocation with the device's position obtained by this API. The parameter will be sent in the next requests after the position has been obtained.

function setGPSPosition(position) {
inneractive.parameters.GPSLocation = position.coords.longitude + "," + position.coords.latitude;
}
 
navigator.geolocation.getCurrentPosition(setGPSLocation);

Conclusion

This article presented a way to build Web apps that relies on the newly added In-App Advertising API to monetize. The code example is available File:Template.wgt.

This page was last modified on 9 May 2013, at 10:33.
935 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×