Ionic 2 & 3 - AdMob monetizacija

Ionic 3 – AdMob monetizacija

Share Button

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

AdMob 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:

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

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.

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

AdMob - Banner na dnu stranice

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.

Prikaz oglasa

Oglas preko cijele stranice u konačnici izgleda ovako

AdMob - oglas preko cijele stranice

Zaključak

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

Objavio

Tomislav Stanković

Web i mobile developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

12 misli o “Ionic 3 – AdMob monetizacija”

  1. 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.

    1. 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();
      });

  2. Hi , Im 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 Ill 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.

      1. 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 http://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.

        1. 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.

          1. Ok , I’ve created a brand new app everything runs okay , I did everything like it’s in the tutorial. Im testing my app via https://apps.ionic.io/apps/ on my iPhone via Ionic View. Is it suppoused to work there? Im pretty confused , do I miss something… ? Neither banner is appearing nor something happens when I click the button. 😐

            1. 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 or ionic run ios

              1. 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();});)
                };

                  1. 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

                    1. 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).

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *