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:
1 2 |
$ ionic plugin add cordova-plugin-admobpro $ npm install --save @ionic-native/admob |
Sada referencu na plugin trebate dodati u app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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. 🙂
Hello, I read your document with google translate and it saved my life actually. But I have a small question. How can I run Insterstitial every 2 min? I can’t make it with setInterval.
Hi Bora, thank for your comment and sorry for late answer I was on the trip.
You can achieve that with use of Observable.
import {Observable} from 'rxjs/Rx';
Observable.interval(2000 * 60).subscribe(x => {
this.functionWithInsterstitialAd();
});
Hi , I
m currently trying to add AdMob as you've showed , everything looks fine , but it doesnt work ?
If Im doing everything as it’s shown in the tutorial above , I receive the following error : ” Cannot read property ‘banner’ of undefined” .
If I remove
interface AdMobType {
banner: string,
interstitial: string
};
var admobid: AdMobType;
if( /(android)/i.test(navigator.userAgent) ) {
admobid = {
banner: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
interstitial: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx'
};
}
and just replace
this._admob.createBanner({
adId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
isTesting: true,
autoShow:true
});
this._admob.prepareInterstitial({
adId: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx',
isTesting:true,
autoShow:false
});
the project is being build and it runs cool on Genytool , but when I click the button nothing happens , no ads or something 🙁
05/07/2017 u 11:23
I have also created my own ads in AdMob , so I have my ad ids
05/07/2017 u 11:57
HI , It’s again me , sorry for the spam ? now the error doesn’t appear , everything is the same like in your tutorial , but no ads showing on Genytool simulator ? Do you have any suggestions where this may come from ? Tomorrow I
ll try on a real device to see if it works
05/07/2017 u 12:04
It’s me again , now I see that Im getting kind of strange errors in my console while running
npm install –save @ionic-native/admob
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})
npm WARN @ionic-native/ad-mob@3.1.1 requires a peer of @ionic-native/core@3.1.1 but none was installed.
npm WARN @ionic-native/ad-mob@3.1.1 requires a peer of @angular/core@2.4.8 but none was installed.
npm WARN @ionic-native/ad-mob@3.1.1 requires a peer of rxjs@5.0.1 but none was installed.
I merged your comments into one. 🙂
If you have new Google AdMob account try waiting 30 minutes for Ads to appear.
Also, check which version of Ionic Native you use.
I’ve checked it , it’s the latest , 2.9.0 🙁 btw Ja sum vo Bugarija , hvala brate.. 🙂
So this is the issue I get https://imgur.com/a/y2C1W , do you think that AdMob doesn’t work because of this ? I’ve searched a lot in google but I can’t find anyone who had experienced that issue.
Nema na čemu, susjed. 🙂
Set all Ionic Native plugins to “^3.12.1” or “^3.13.1” version because yours current AdMob 3.1.1 depends on AngularCore 2.4.8 version.
npm WARN @ionic-native/ad-mob@3.1.1 requires a peer of @angular/core@2.4.8 but none was installed.
And be sure to test the application on device.
Ok , I’ve created a brand new app everything runs okay , I did everything like it’s in the tutorial. I
m testing my app via https://apps.ionic.io/apps/ on my iPhone via Ionic View. Is it suppoused to work there? I
m pretty confused , do I miss something… ? Neither banner is appearing nor something happens when I click the button. 😐Ionic View is only for testing the layout basic functionality of your app. Ionic View only provides a fixed number of Ionic Native plugins. So if you are testing something special – it will not work.
Use
ionic run android
orionic run ios
Hi , it’s me again. I’ve got my mac and tested on xCode with itself emulator ( ionic cordova run ios) the ads are working perfectly. Do you have any suggestions how to make video ad? I’ve made video ad in admob and I’ve tried
home.html
Open AdVideo</button {
this._admob.showRewardVideoAd();
});
};
06/07/2017 u 13:18
oh my god my code bugged?
home.html
ShowVideoAd
home.ts
showVideoAd(){
let options = {
adId : ‘ca-app-pub-xxxxxxx/xxxxxx’,
isTesting : false
};
this._admob.prepareRewardVideoAd(options)
.then(() => { this._admob.showRewardVideo();});)
};
You’re on the right path. Video ads should work as any other type of ads.
Hvala za tvoj odgovori brate . I have a strange issue related to rewarded videoAds , I’ve just used
this._admob.onAdFailLoad().subscribe(() => {
alert(‘Ad failed load’);
});
this._admob.onAdLoaded().subscribe(() => {
alert(‘ad loaded correctly’);
});
events , to see if something is wrong. Unfortunately , almost everytime onAdFaiLoad() fires up , although sometimes the rewarded video ad is working perfectly. It is like , 1 in 5 times when I launch my app through my emulator , the ad is working , other 4 times , it fails to load , do you think that is because Im testing it on emulator , or there is something other thing that causes that issue 🙁 I am stucked in that issue for 2 days
As far as I know and use Google AdSense/AdMob this is happening when Google has no relevant ad to show and then displays an empty space which can seem to you as a error. Try to find option, in your ad settings , that will fill in the space with some color instead of displaying blank space or that will display an ad of some other type (text or image).
Nice tutorial.. Can you please make a tutorial for inline ads. Inline ads
Hi, thanks for your comment.
What do you mean when you say ‘inline ads’? Do you have any example of what do you want to achieve?
great tutorial can you send me source code for ads because my code dosent run with me
Unfortunately I do not have source code, but as far as I can see the syntax of the plugin has changed.