How to Add Native Admob ad in Phonegap/Cordova App

 Google’s AdMob ads platform to monetize and promote their web app.
Easily create apps using the web technologies you know : HTML, CSS, and JavaScript. PhoneGap is a free and open source framework that allows you. But when it comes to monetizing via ads, just putting Adsense code is not working . We’ll go through a simple process that I came across to integrate the native admob android sdk to our cordova apps and games without using any phonegap plugins.

Install the Native Android SDK

The Google Mobile Ads SDK is part of Google Play services. Make sure that you have the latest version of Play services by opening up your SDK manager. You can open the SDK manager by selecting Tools > Android > SDK Manager. This is where you can download Android SDKs.

Once Google Play services is installed, Add Service in your project

Include Admob’s Library

 Add the following lines in your MainActivity.java right below other imports.

import com.google.android.gms.ads.AdRequest;

import com.google.android.gms.ads.AdSize;

import com.google.android.gms.ads.AdView;

import com.google.android.gms.ads.InterstitialAd;

Configure your AdMob ad unit ID

Now, inside the main class of your MainActivity.java file, create a new private string  AD_UNIT_ID like this:

/** Your ad unit id. Replace with your actual ad unit id. */

private static final String AD_UNIT_ID = "ca-app-pub-xxxxxxxxxxxxxxxxxxx";

Make sure to replace xxxxxxxxxxxxxxx with your own ID as putting incorrect ID there will result in no ads showing up.

Add one more private variable mAdView of AdView type 

private AdView mAdView;

This will be the container for the ad. Now, inside the onCreate function, add the following lines at the bottom:

//baneerad

  mAdView = new AdView(this);

  mAdView.setAdUnitId(AD_UNIT_ID );

  mAdView.setAdSize(AdSize.BANNER);

  LinearLayout layout = super.root;

  layout.addView(mAdView);    

  layout.setHorizontalGravity(android.view.Gravity.CENTER_HORIZONTAL);

  mAdView.loadAd(new AdRequest.Builder().build());

So the entire code file should look like this:

package com.project.android;

import android.os.Bundle;
import android.util.Log;
import android.widget.LinearLayout;
import org.apache.cordova.*;
import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdSize;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.InterstitialAd;

public class MainActivity extends DroidGap
{
   private static final String AD_UNIT_ID = "ca-app-pub-xxxxxxxxxxxxxxxxx";
    private AdView mAdView ;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
      super.onCreate(savedInstanceState);
        // Set by in config.xml
        super.loadUrl(Config.getStartUrl());
        //super.loadUrl("file:///android_asset/www/index.html")
       
   mAdView = new AdView(this);
  mAdView.setAdUnitId(AD_UNIT_ID );
  mAdView.setAdSize(AdSize.BANNER);
  LinearLayout layout = super.root;
  layout.addView(mAdView);    
  layout.setHorizontalGravity(android.view.Gravity.CENTER_HORIZONTAL);
  mAdView.loadAd(new AdRequest.Builder().build());
 
    }
}

Final Steps

The last step is to define the newly created Ads activity into the AndroidManifest.xml file. Add this line in your manifest file after the closing tag of your main activity.

 <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />       

        <activity android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" android:name="com.google.android.gms.ads.AdActivity" android:theme="@android:style/Theme.Translucent" />

    

Now you must be able to see the ads when running the app in an emulator or on a real device. If you run into a problem or doesn't get it to work then drop a comment here and i will  help you!