Integrating Google AdMob Advertisements in Ionic

Integrating Google AdMob Advertisements in Ionic

Advertisements, though not at all times the easiest way to monetise a enterprise, are one of many best methods to doubtlessly earn some cash from an software or web site. Google’s commercial platform means that you can simply implement commercials with out having to safe offers with advertisers your self – you show Google’s adverts and also you get a proportion of the fee for these adverts.

Google has a service particularly for cell functions known as AdMob. In this tutorial, we will likely be protecting the best way to add Google AdMob to an Ionic software. We will cowl each banner adverts (which show a horizontal banner on the backside of your software) and interstitial adverts (which pop up and canopy all the display screen).

Before We Get Started

Last up to date for Ionic 3.1.0

Before you undergo this tutorial, you must have not less than a fundamental understanding of Ionic ideas. You should additionally have already got Ionic arrange in your machine.

If you’re not accustomed to Ionic already, I’d advocate studying my Ionic Beginners Guide or watching my beginners series first to rise up and operating and perceive the essential ideas. If you need a way more detailed information for studying Ionic, then check out Building Mobile Apps with Ionic.

1. Generate a New Ionic Application

We’re going to start out by producing a brand new clean Ionic software, to do this simply run the next command:

ionic begin ionic-admob clean

Once that has completed producing, you must make it your working listing:

2. Integrate the AdMob Plugin

In order to make use of Google AdMob, we might want to use a Cordova plugin. There are just a few plugins out there that we are able to use, however we will likely be utilizing one known as AdMob Free. As you’ll be able to doubtless inform from the title, this can be a free to make use of neighborhood maintained plugin.

Run the next instructions to put in the AdMob Free plugin

cordova plugin add cordova-plugin-admob-free --save 
npm set up @ionic-native/admob-free --save

This will set up the Cordova plugin and the Ionic Native package deal that we are going to be utilizing to assist use the plugin. We may even must set this plugin up in the appliance.

Modify src/app/app.module.ts to replicate the next:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AdMobFree } from '@ionic-native/admob-free';

import { MyApp } from './app.part';
import { HomePage } from '../pages/residence/residence';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  suppliers: [
    StatusBar,
    SplashScreen,
    AdMobFree,
    {present: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

We have added AdMobFree as a supplier, so now we can inject it anyplace that we’d like in our software.

3. Create a Google AdMob Account

In order to show actual commercials in your software, you have to to arrange your Google AdMob account (though, you’ll be able to skip this for now and simply use check commercials when you like).

To create an account you must go here and enroll. Once you’ve got logged in, you have to to click on this button:

Monetize New App Button

From there, it is possible for you to to create a brand new advert unit. First, you have to so as to add your software:

Add New Application

after which create the commercials that you simply wish to use:

Create Ad

after which it is possible for you to to seize the Ad Unit ID, which it is possible for you to to make use of to show your advert (you’ll provide this to the plugin later).

First, let’s strive making a banner commercial. Using this plugin is definitely actually easy, we simply want to offer just a little configuration after which make a name to the put together() operate.

Modify src/pages/residence/residence.ts to replicate the next:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from '@ionic-native/admob-free';

@Component({
  selector: 'page-home',
  templateUrl: 'residence.html'
})
export class HomePage {

    constructor(public navCtrl: NavController, public admob: AdMobFree) {

    }

    presentBanner() {

        let bannerConfig: AdMobFreeBannerConfig = {
            isTesting: true, // Remove in manufacturing
            autoShow: true
            //id: Your Ad Unit ID goes right here
        };

        this.admob.banner.config(bannerConfig);

        this.admob.banner.put together().then(() => {
            // success
        }).catch(e => console.log(e));

    }

}

We create a configuration object for the banner advert, which we use to set isTesting to true (which is able to enable us to only use check adverts for now) and autoShow to true (which is able to trigger the advert to show as quickly as it’s prepared). When you’re utilizing actual commercials, you must eliminate the isTesting flag and ensure to produce your Ad Unit ID utilizing the id property.

We allow this configuration by calling the config operate, after which we simply name the put together() operate to create the commercial. Once this banner is prepared, it should robotically show on the backside of your software.

For testing functions, we are going to simply set off this code with a button click on.

Modify src/pages/residence/residence.html to replicate the next:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button (click on)="presentBanner()">Show Banner</button>
</ion-content>

Here’s what it ought to appear to be:

AdMob Banner Ad

Creating an interstitial commercial is mainly precisely the identical. Let’s have a look.

Modify src/pages/residence/residence.ts to replicate the next:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from '@ionic-native/admob-free';

@Component({
  selector: 'page-home',
  templateUrl: 'residence.html'
})
export class HomePage {

    constructor(public navCtrl: NavController, public admob: AdMobFree) {

    }

    presentBanner() {

        let bannerConfig: AdMobFreeBannerConfig = {
            isTesting: true, // Remove in manufacturing
            autoShow: true
            //id: Your Ad Unit ID goes right here
        };

        this.admob.banner.config(bannerConfig);

        this.admob.banner.put together().then(() => {
            // success
        }).catch(e => console.log(e));

    }

    launchInterstitial() {

        let interstitialConfig: AdMobFreeInterstitialConfig = {
            isTesting: true, // Remove in manufacturing
            autoShow: true
            //id: Your Ad Unit ID goes right here
        }; 

        this.admob.interstitial.config(interstitialConfig);

        this.admob.interstitial.put together().then(() => {
            // success
        });

    }

}

The solely distinction right here is that we make a name to interstitial as a substitute of banner. We will in fact additionally want so as to add a button to set off the interstitial advert.

Modify src/pages/residence/residence.html to replicate the next:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button (click on)="presentBanner()">Show Banner</button>
    <button ion-button (click on)="launchInterstitial()">Show Interstitial</button>
</ion-content>

Here’s what it should appear to be:

AdMob Interstitial

Summary

It will be fairly tough to make any vital sum of money from commercials in cell functions, and they are often fairly annoying for customers. But there’s room to do it appropriately, and in the correct circumstances, the Google AdMob platform will be an effective way to monetise an software.

TAGS
Share This

COMMENTS

Wordpress (0)