Monday 10 September 2012

AdMob ads in PhoneGap apps

Adding ads to your free mobile apps is one of the most common way of earning money in this business. There are multiple ads engine providers, but Google is still the leader. Google ads provider for mobile devices is called AdMob. It offers easy integration with Android, iPhone/IPad and WP7.

While integration with native apps is quite straightwforwrd and well documented, things get more complicated if you create your apps using PhoneGap and HTML5. In the past Admob offered "Smartphone Web" option, that could be presented within your HTML code for smartphone devices. Since May 2012 it's no longer available, as Google wants to make a clear division: use AdMob for purely mobile apps and AdSense for web pages.

Since mobile apps created using PhoneGap are actually web pages displayed within the native app and rendered using default browser engine it seems that AdSense is the way to go. It doesn't work though, with one of the reasons being that Google wants to crawl the sites it displays AdSense ads on.

Solution

So how do we display Google ads in HTML code that belongs to our PhoneGap app?
The answer is: WE DON'T! :)

Instead, we modify our native app container, that displays the HTML. Default PhoneGap templates for all systems (Android, WP7, iOS, ..) create a native, full-screen container for displaying your web app. We can shrink that main container and then display ads on the remaining free space using native AdMob SDK.

The only limitation of this method is that you cannot place your ad inside of your actual HTML appliaction. However, you can still place your ads in most commonly used spaces i.e. header or footer.

Android example

The sample code below presents the MainActivity of an Android app that uses PhoneGap. The code adds AdMob banner at the bottom of a mobile app:
import android.os.Bundle;
import org.apache.cordova.*;
import android.widget.LinearLayout; 
import com.google.ads.*;

public class MainActivity extends DroidGap {
    private static final String MY_AD_UNIT_ID = "YOUR_AD_UNIT_IT"; 
    private AdView adView;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        // Loading your HTML as per PhoneGap tutorial
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
        
        // Adding AdMob banner
        adView = new AdView(this, AdSize.BANNER, MY_AD_UNIT_ID); 
        LinearLayout layout = super.root;  
        layout.addView(adView); 
        adView.loadAd(new AdRequest());
   }    
}

WP7 example

The sample code below presents default XAML created by PhoneGap template for WP7, modified to display AdMob banner at the bottom of a mobile app.

    
       
        
    
    
    
    
    

    
    
    

7 comments:

Unknown said...

Hi, this is great, many thanks. Please let me know how to include the ad at the top of the screen instead of below.
Andy

Anonymous said...

thanks a lot for the post!
really helped me to understand how it works, but I got a small problem that it gives me that the application stopped and it dont work again, and nothing shown up. can u please help?

Unknown said...

Hello Filip, could you provide the full code you made for windows phone? That code you posted which was amended in XMLA file?
Thank you.

andrian said...

Hi, your tutorial is great, by the way do you have complete code for this? thanks

Anonymous said...

This works great on the index.html page but I want ads to show on my about.html page too. Any trick to allow this?

Filip Czaja said...

@google - html pages are displayed by the internet browser component and the AdMob add by a separate component. Even if the browser content changes (e.g. displays the about page in your case) the add should still be there

fisch said...

instead of the banner add i get this red error saying "you must have AdActivity in AndroidManifest.xml..." but when a add it there, the phone gap app goes back full screen ageing, any ideea why? thanks!