Ionic 2 admob shows black box at the bottom and not loading the actual ads. But the testing ads are working fine


#1

Ionic 2 admob shows black box at the bottom and not loading the actual ads. But the testing ads are working fine.


#2

How did you implement “admob”? Plugin name, code, tutorials used…


#3

ionic plugin add cordova-plugin-admobpro

This is my (admobpro) provider

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { AdMob } from 'ionic-native';

import 'rxjs/add/operator/map';

/*
  Generated class for the AdMobPro provider.
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class AdMobPro {
  private _opt;
  private _admobid;

  constructor(platform: Platform) {
    	console.log('Hello Admobpro Provider');
    	platform.ready().then(() => {
	      	this._admobid = {};

			if(platform.is('android')) {
				this._admobid = { // for Android
					banner: 'ca-app-pub-3767919174603479/5069124487',
					interstitial: 'ca-app-pub-3767919174603479/6545857682'
				};
			}

		   // 	if(platform.is('ios')){
		   //  	this._admobid = { // for iOS
					// banner: 'ca-app-pub-4803471214797648/1352675016',
					// interstitial: 'ca-app-pub-4803471214797648/7259607815'
		   //  	};
		   // 	}      
	      	this.init();
	    });
  }

  init(){
  	console.log("AdMob init");
  	if( !AdMob ){
  		console.log("No AdMob?");
  		return;
  	} 

   	// Register AdMob events
   	// new events, with variable to differentiate: adNetwork, adType, adEvent
   	
   	document.addEventListener('onAdFailLoad', function(data){
		console.log('onAdFailLoad: ' + JSON.stringify(data));
	});
	
   	document.addEventListener('onAdLoaded', function(data){
		console.log('onAdLoaded: ' + JSON.stringify(data));
   	});
   	
	document.addEventListener('onAdPresent', function(data){
		console.log('onAdPresent: ' + JSON.stringify(data));
   	});
   	document.addEventListener('onAdLeaveApp', function(data){
    	console.log('onAdLeaveApp: ' + JSON.stringify(data));
   	});

   	document.addEventListener('onAdDismiss', function(data){
    	console.log('onAdDismiss: ' + JSON.stringify(data));
   	});
   	

   	this._opt = {
		// bannerId: admobid.banner,
		// interstitialId: admobid.interstitial,
		// adSize: 'SMART_BANNER',
		// width: integer, // valid when set adSize 'CUSTOM'
		// height: integer, // valid when set adSize 'CUSTOM'
		position: AdMob.AD_POSITION.BOTTOM_CENTER,
		// offsetTopBar: false, // avoid overlapped by status bar, for iOS7+
		bgColor: 'black', // color name, or '#RRGGBB'
		// x: integer,     // valid when set position to 0 / POS_XY
		// y: integer,     // valid when set position to 0 / POS_XY
		isTesting: false, // set to true, to receiving test ad for testing purpose
		// autoShow: true // auto show interstitial ad when loaded, set to false if prepare/show
   	};

   	AdMob.setOptions(this._opt);
   	this.showBanner();
  }

  showInterstitial(){
  	if( !AdMob ) return false;
  	console.log("showInterstitial");
	AdMob.prepareInterstitial({
	    adId: this._admobid.interstitial,
	    autoShow: true
   	})

   	return true;
  }

  showBanner(){
  	if( !AdMob ) return false;

  	console.log("showBanner" );
	AdMob.createBanner({
	    adId: this._admobid.banner,
	    position: AdMob.AD_POSITION.BOTTOM_CENTER,
	    autoShow: true
	})
	return true;
  }

 removeAds() {
   		if( AdMob ) AdMob.removeBanner();
   	}
}

and this implimentation in home file

 showBanner(){
    console.log('showBanner');
    this.adMobPro.showBanner();
  }
  removeBanner(){
    console.log('removeBanner');
    this.adMobPro.removeAds();
  }
  showInterstitial(){
    console.log('showInterstitial');
    this.adMobPro.showInterstitial();
  }

#4

same problem here. Did you fix it @akkii922?