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! 

Create Phonegap application

Here we  are create Phonegap applicton step by step.

1. Install nodejs

To create phonegap app using CLI we need nodejs. We can download node js from nodejs.org. and install  nodejs.
Following installation you should be use node and npm in your command line

2. Install cordova

Install the cordova module using npm utility of Node.js. The cordova module will automatically be downloaded by the npm utility.

 Open Nodejs commend

C:\>npm install -g cordova

3. Create the App

Go to the directory where you maintain your source code, and run a command such as the following:

cordova create hello com.example.hello HelloWorld

The first argument hello specifies a directory to be generated for your project. This directory should not already exist, Cordova will create it for you. Its www subdirectory houses your application's home page, 

The second argument com.example.hello provides your project with a reverse domain-style identifier. This argument is optional, but only if you also omit the third argument, since the arguments are positional. You can edit this value later in the config.xml file

The third argument HelloWorld provides the application's display title. This argument is optional. You can edit this value later in the config.xml file, but do be aware that there may be code generated outside of config.xml using this value, such as Java class names. 

4. Add Platforms

Before you can build the project, you need to specify a set of target platforms. Your ability to run these commands depends on whether your machine supports each SDK

Go to app folder

   cordova platform add ios

   cordova platform add amazon-fireos

   cordova platform add android

   cordova platform add blackberry10

   cordova platform add firefoxos

Running commands to add or remove platforms affects the contents of the project's platforms directory, where each specified platform appears as a subdirectory.

5. Build the App

By default, the cordova create script generates a skeletal web-based application whose home page is the project's www/index.html file. Edit this application however you want, but any initialization should be specified as part of the deviceready event handler, referenced by default from www/js/index.js.

Run the following command to iteratively build the project:

cordova build

Sorce(Phonegap)