Adding AdMob to Ionic

Ionic Framework ionic-v3
1

how to use admob in ionic 2

2

I am planning on to do the same, and I will probably use this : https://github.com/floatinghotpot/cordova-admob-pro

EDIT: If anyone got it working, please post here. After adding ionic plugin add com.google.cordova.admob
I get an error like this while building :

image
Selection_021.png791×447 30.9 KB

3

Hi,
I follow http://pointdeveloper.com/ionic-2-banner-ads-with-admob-pro-plugin/ step by step but stick in step two.
error when ionic plugin add com.google.cordova.admob

D:\GitHub\ionic2Banner>ionic plugin add com.google.cordova.admob
Error: Registry returned 404 for GET on https://registry.npmjs.org/com.google.cordova.admob

D:\GitHub\ionic2Banner>
4

I’m following the same tutorial and I get the same error:

ionic plugin add com.google.cordova.admob

(node:7344) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
Error: Registry returned 404 for GET on https://registry.npmjs.org/com.google.cordova.admob


Caught exception:
 undefined

Mind letting us know? https://github.com/driftyco/ionic-cli/issues

I could install the plugin running the following command:

ionic plugin add cordova-plugin-admobpro

(node:4872) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
Fetching plugin "cordova-plugin-admobpro" via npm

Installing "cordova-plugin-admobpro" for android

Fetching plugin "cordova-plugin-extension" via npm
Installing "cordova-plugin-extension" for android
Installing "cordova-plugin-admobpro" for ios
Installing "cordova-plugin-extension" for ios

However, when trying to configure the MyApp component:

if (window.AdMob) AdMob.createBanner({
	adId: admobid.banner,
	isTesting: true,
	position: AdMob.AD_POSITION.BOTTOM_CENTER,
	autoShow: true
});

I get the following error:

Property ‘AdMob’ does not exist on type ‘Window’.

Also I couldn’t add the following lines:

config: {
	tabbarPlacement: 'bottom'
}

I get the following error:

[ts]
Argument of type ‘{ template: string; config: { tabbarPlacement: string; }; }’ is not assignable to parameter of type ‘{ selector?: string; inputs?: string; outputs?: string; properties?: string; events?: strin…’.
Object literal may only specify known properties, and ‘config’ does not exist in type ‘{ selector?: string; inputs?: string; outputs?: string; properties?: string; events?: strin…’.
(property) tabbarPlacement: string

5

I get it working:

1) Create project:

ionic start ionic2admob tabs --v2

cd ionic2admob

2) Add android platform:

ionic platform add android

3) Add ios platform:

ionic platform add ios

4) Add AdMob plugin:

ionic plugin add cordova-plugin-admobpro

5) Import AdMob in app.ts:

import {StatusBar, AdMob} from 'ionic-native';

6) Add code to platform.ready().then(() => { … } in App.ts:

var admobid = {};
// select the right Ad Id according to platform
if (/(android)/i.test(navigator.userAgent)) {
admobid = { // for Android
  banner: 'ca-app-pub-6869992474017983/9375997553',
  interstitial: 'ca-app-pub-6869992474017983/1657046752'
};
} else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = { // for iOS
  banner: 'ca-app-pub-6869992474017983/4806197152',
  interstitial: 'ca-app-pub-6869992474017983/7563979554'
};
} else {
admobid = { // for Windows Phone
  banner: 'ca-app-pub-6869992474017983/8878394753',
  interstitial: 'ca-app-pub-6869992474017983/1355127956'
};
}

AdMob.createBanner({
isTesting: true,
autoShow: true
});

7) Build Android:

ionic build android

8) Copy .apk to Android device and install it.

6

Thanks. It works. However, everything goes fine for android phone but the ads do not shows on android tablets.
I have no idea why it happen. I put both interstitial and banner. Tablets only shows interstitial once a while, banner does not show at all.
Do you try on the reward base or IAP before, is it working?

7

Add AdMob ionic 2 rc1:

8

Hi,

Can I apply this to InMobi with Ionic2 RC4?

Thanks

9

Yes, you can.

I have success fully managed to render admob with {isTest:true}
but, not in production.

I get black background-color without ads showing up.

10

I have implemented AdMob on RC4,
but here is my problem.

when i comment the {"isTest":true} property or remove it and build an app,
I get black background covered. Below is the capture from the real device and real app downloaded from Google Play Store.

image
KakaoTalk_Photo_2017-01-04-16-05-31.jpeg540×960 113 KB

At the bottom of the screenshot, you can see black box where it should have displayed AdMob.
I successfully tested the admob with {"isTest":true} but in production mode, it just not working.

I couldn’t figure out what went wrong.

11

Sometimes it needs time to start showing up ads …
its working in development mode? If yes, then it must be working by now?

12

does anyone have Interstitial work on RC4?

the banner works fine for me, but when I call prepareInterstitial

it shows Uncaught (in promise): null

13

do you know how long it will take for ads to be working??
Because, it’s not working for 2 days.

14

Interstitial works find in RC4, but still black screen

15

If you use chrome to inspect your project when running on device, there will be another html page of google ads.
do you use production mode to build your project? like ionic run android --prod
what is your cordova-plugin-admobpro and ionic-native version?

16

Yes, i have built the app with ionic run android --prod mode

and I downloaded the cordova-plugin-admobpro as what ionic documentation native has described.

Ionic version

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
ios-deploy version: 1.9.0 
ios-sim version: 5.0.9 
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002
17

have you new a project to test admob plugin?
I’m using

“ionic-native”: “2.2.12”
plugin name=“cordova-plugin-admobpro” spec=“~2.25.2”

but keep get EXCEPTION: Uncaught (in promise): null when use interstitial
thought it might be the problem of ionic-native

update

I finally solved it by using original way
just declare AdMob directly at top, not use ion-native.

18

Guys, I’ve posted a video tutorial here, hope it’ll help some of you: Adding AdMob In Ionic 2

1 Like
19

what version of ionic-native and admobpro plugin do you use?

20

Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
Node Version: v6.7.0

AdMobPro version 2.25.0
"ionic-native" version “2.2.11”,