Ionic 2 / Ionic 3 – Adicionando Admob Ads com Cordova e Ionic Native 3.x+

Introdução


Neste tutorial, veremos como implementar anúncios do Google AdMob no iônico para gerar receita com seus aplicativos usando o modelo de negócios de publicidade.

Vamos cobrir como adicionar três tipos de anúncios:

  • Banner Ads
  • Interstitial Ads
  • Reward Video Ads

Começando


Vamos começar nosso tutorial criando um novo projeto Ionic a partir do zero (Opcional) com base no modelo em branco usando o Ionic CLI v3.

ionic start AdmobAdsExample blank 

Em seguida, navegue pela pasta raiz do seu projeto

cd AdmobAdsExample 

Em seguida, instale o plug-in Cordova Admob e seu wrapper Ionic Native 3.x.

ionic cordova plugin add --save cordova-plugin-admob-free        

npm install --save @ionic-native/admob-free

Abra src/app/app.module.ts em seguida, importe o AdMobFree e adicione-o à lista de provedores

import { AdMobFree } from '@ionic-native/admob-free';    

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

Exibindo Banner Ads


Em seguida, abra src/app/app.component.ts and add

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

import { HomePage } from '../pages/home/home';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen , private admobFree : AdMobFree ) {
    platform.ready().then(() => {
    // Okay, so the platform is ready and our plugins are available.
    // Here you can do any higher level native things you might need.
    statusBar.styleDefault();
    splashScreen.hide();
    this.showAdmobBannerAds();
    });
}
showAdmobBannerAds(){
    const bannerConfig: AdMobFreeBannerConfig = {
        isTesting: true,
        autoShow: true
    };
    this.admobFree.banner.config(bannerConfig);

    this.admobFree.banner.prepare()
    .then(() => {
        // banner Ad is ready
        // if we set autoShow to false, then we will need to call the show method here
    })
    .catch(e => console.log(e));    
    }      

}

Injetamos o AdMobFree e criamos o método showAdmobBannerAds () para exibir anúncios de banner quando o Cordova estiver pronto.

Nós passamos duas opções de configuração:

isTesting : true to tell Admob plugin to use only test ads which is the recommended option which you are still developing your app to avoid accidental clcks that may cause problems with your Google Admob account .

autoShow: true para mostrar anúncios de banner imediatamente após criá-los sem usar o método show ().

Depois de desenvolver seu aplicativo, você precisa criar anúncios reais para

Vá para o portal da AdMob e clique no botão “Monetize a new app” para criar um novo bloco de anúncios.

Em seguida, pegue o ID do seu editor de anúncios e adicione-o às opções de configuração:

    const bannerConfig: AdMobFreeBannerConfig = {
        id: 'ca-app-pub-xxx/xxx', 
        isTesting: false,
        autoShow: true
    };

Se você definir autoShow como falso, será necessário chamar o método show () depois de preparar o banner:

    this.admobFree.banner.prepare()
    .then(() => {

        this.admobFree.banner.show()
    })
    .catch(e => console.log(e));    
    }  

Você também pode ocultar o banner com

    this.admobFree.banner.hide()

Ou remova-o completamente

    this.admobFree.banner.remove()        

Mostrando Interstitial Ads


Você também pode exibir anúncios intersticiais da Admob com:

showInterstitialAds(){
    const bannerConfig: AdMobFreeBannerConfig = {
    id: 'ca-app-pub-xxx/xxx',
    isTesting: false,
    autoShow: false
    };
    this.admobFree.interstitial.config(bannerConfig);

    this.admobFree.interstitial.prepare()
    .then(() => {
        this.admobFree.interstitial.show()
    })
    .catch(e => console.log(e));    
    }  

Você pode usar as mesmas opções e métodos de configuração para adicionar anúncios intersticiais.

Mostrando Reward Video Ads


Se você optar por exibir anúncios em vídeo premiados em seu aplicativo para dispositivos móveis, adicione e chame esse método

showRewardVideoAds(){
    const bannerConfig: AdMobFreeBannerConfig = {
    id: 'ca-app-pub-xxx/xxx',
    isTesting: false,
    autoShow: false
    };
    this.admobFree.rewardvideo.config(bannerConfig);

    this.admobFree.rewardvideo.prepare()
    .then(() => {
        this.admobFree.rewardvideo.show()
    })
    .catch(e => console.log(e));    
    }

Conclusão


Aprendemos como gerar receita com aplicativos móveis iônicos com três tipos de anúncios da Admob para que você possa ganhar dinheiro com seus aplicativos para dispositivos móveis caso decida não vendê-los e disponibilizá-los gratuitamente para todos os usuários.

Uma resposta para “Ionic 2 / Ionic 3 – Adicionando Admob Ads com Cordova e Ionic Native 3.x+”

Deixe uma resposta