Arhiva monetizacija - Tomislav Stanković

Prije nego krenete s izradom mobilne aplikacije za pretpostaviti je da imate nekakav cilj koji želite tom aplikacijom postići. Jedan od tih ciljeva može biti zarada.

U ovom ću blog postu prikazati kako u Ionic aplikaciju dodati AdMob oglase pomoću kojih možete zaraditi na svojoj aplikaciji.

Što je AdMob?

AdMob je Googleova platforma za monetizaciju mobilnih aplikacija. Ono što je Google AdSense/AdWords za web stranice to je AdMob za mobilne aplikacije. Dostupan je za iOS i Android aplikacije.

Kreiranje oglasa

Na adresi https://apps.admob.com/ trebate kreirati oglasnu jedinicu koja će se prikazivati u vašoj Ionic aplikaciji.

Na slici sam zaokružio što točno trebate ubaciti u aplikaciju kako bi se oglas prikazao.

Dodavanje AdMob plugina

Plugin ćete dodati naredbama:

$ ionic plugin add cordova-plugin-admobpro
$ npm install --save @ionic-native/admob

1 2	$ ionic plugin add cordova-plugin-admobpro $ npm install --save @ionic-native/admob

Sada referencu na plugin trebate dodati u app.module.ts

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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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

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

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 { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

AdMob,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

Sada ste spremni za implementaciju oglasa.

Implementacija

U ovom primjeru oglas ćemo implementirati u app.component.ts što znači da će nam se oglas prikazivati na svim stranicama aplikacije.

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 { AdMob } from '@ionic-native/admob';

import { HomePage } from '../pages/home/home';

interface AdMobType {
  banner: string,
  interstitial: string
};

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

  constructor(platform: Platform, _statusBar: StatusBar, _splashScreen: SplashScreen, private _admob: AdMob) {
    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();
  
     var admobid: AdMobType;
  if( /(android)/i.test(navigator.userAgent) ) { // for android & amazon-fireos
    admobid = {
      banner: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx', 
      interstitial: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx'
    };
  } else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // for ios
    admobid = {
      banner: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx', 
      interstitial: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx'
    };
  } else { // for windows phone
    admobid = {
      banner: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx', 
      interstitial: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx'
    };
  }

  this._admob.createBanner({
    adId: admobid.banner,
    isTesting: true,
    autoShow: true
  })
  
  this._admob.prepareInterstitial({
    adId: admobid.interstitial,
    isTesting: true,
    autoShow: false
  })

    });
  }
}

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 { AdMob } from '@ionic-native/admob';

import { HomePage } from '../pages/home/home';

interface AdMobType {

banner: string,

interstitial: string

};

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any = HomePage;

constructor(platform: Platform, _statusBar: StatusBar, _splashScreen: SplashScreen, private _admob: AdMob) {

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();

var admobid: AdMobType;

if( /(android)/i.test(navigator.userAgent) ) { // for android & amazon-fireos

admobid = {

banner: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',

interstitial: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx'

};

} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // for ios

admobid = {

banner: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',

interstitial: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx'

};

} else { // for windows phone

admobid = {

banner: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',

interstitial: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx'

};

}

this._admob.createBanner({

adId: admobid.banner,

isTesting: true,

autoShow: true

})

this._admob.prepareInterstitial({

adId: admobid.interstitial,

isTesting: true,

autoShow: false

})

});

}

isTesting: true neka stoji sve dok radite na aplikaciji, a false možete staviti kada aplikacije ide u produkciju.

Banner na dnu stranice izgleda ovako

Sljedeći primjer tiče se oglasa koji se prikazuje preko cijele stranice aplikacije. To možete implementirati nakon neke korisnikove akcije. Za sada ćemo taj oglas prikazati klikom na gumb.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AdMob } from '@ionic-native/admob';

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

  constructor(private _admob: AdMob) {

  }

  showInterstitials(){
    if (AdMob) this._admob.showInterstitial();
  }

}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

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

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(private _admob: AdMob) {

}

showInterstitials(){

if (AdMob) this._admob.showInterstitial();

}

Prikaz oglasa

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 3 Aplikacija - AdMob
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  Ovo je primjer Ionic 3 aplikacije koja sadržava AdMob oglase.
  <ul>
    <li>Više o AdMob oglasima na adresi https://www.google.com/admob/index.html</li>
  </ul>

  <button ion-button (click)="showInterstitials()">Prikaži oglas preko cijele stranice</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic 3 Aplikacija - AdMob

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

Ovo je primjer Ionic 3 aplikacije koja sadržava AdMob oglase.

<ul>

<li>Više o AdMob oglasima na adresi https://www.google.com/admob/index.html</li>

</ul>

<button ion-button (click)="showInterstitials()">Prikaži oglas preko cijele stranice</button>

</ion-content>

Oglas preko cijele stranice u konačnici izgleda ovako

Zaključak

I to je sve! Možete krenuti zarađivati. 🙂

Oznaka: monetizacija

Ionic 3 – AdMob monetizacija

Što je AdMob?

Kreiranje oglasa

Dodavanje AdMob plugina

Implementacija

Zaključak