Usage of the Cordova AdMob plugin in our apps

Hi David,
I was trying to use the Admob plugin included in AB. I got it running quickly however it takes a second or two any time it loads interstitial ad, which disrupts the flow of the app. To overcome that, instead of AB functions, I used the JS functions available for the admob plugin to prepare the ad before displaying it. I managed to prepare it but for showing it, it throws error that by tracking it in chrome inspect, led me to this: Uncaught TypeError: Cannot read property 'Value' of undefined $rootScope.EventsTextarea.Value = ""+$rootScope.EventsTextarea.Value+"\nEvent Loaded, Netwok: "+$rootScope.AdMobNetwork+""; So I wonder, is there a way that I can prepare ads in AB without using the JS functions to avoid the errors?
I appreciate any assistance on this a lot!

Hello Amin,

We need to touch various things here. First of all, AB actions are finally translated to the right Javascript code, so, there must no difference between use AB actions and Javascript, since at the end we are talking about Javascript code.

What I am thinking is that the AdMob plugin relies in Internet to work... that is, probably to show an ad one or more HTTP requests are required, so maybe the quality of the internet connection matter here. Maybe the second show is faster?

Are you try with the AdMob app sample? Can you see the same "slow" behaviour? When I try this sample in the past (not too much time ago) I can't note any "slow" behaviour... both "banners" and "interstitials" appaer reasonably well.

---

Hi David,
We have used Admob pro plugin in a Cordova app before. This delay is a usual thing if you go directly for displaying the ad before buffering it. So instead if showing the ad directly, if you use AdMob.prepareInterstitial earlier and then use AdMob.showInterstitial() when and where you need it, the ad appears very quickly.
I have tried the ad mob sample, it works, but the functions are limited, in my case here it lacks the prepare function. Internet speed could be a factor indeed, and because the app users could have any internet speed we should definitely load the ad beforehand otherwise ads become very annoying, more annoying that what they already are.
I suspect the event listener not being handled correctly as the reason, I am preparing the ad, but to show it I am not handling events well. So my question is, is there any function like "AdMob.prepareInterstitial" in the AB Admob plugin that I can use?
I leave my functions below, incase they ring a bell:
JS function ----> new_adMob_interstitial_ad if(AdMob) { AdMob.prepareInterstitial({ license: "YOUR LICENSE HERE", adId: window.App.RootScope.admobID, isTesting: true, autoShow: false, success: function(){ //alert("admob AD created"); }, error: function(){ //alert("admob AD NOT created"); } }); } JS function ---> show_ad AdMob.isInterstitialReady(function(ready) { if(ready) { AdMob.showInterstitial(); } else { // abc } });

Hello Amin,

You are right, methods like "prepareInterstitial" can be good. In fact the AdMob Javascript plugin uses it... but also uses their argument "autoShow" set to true, which causes that the interstitial appear right after their preparation.

Taking a look at the AdMob plugin API, the API appear very, very easy to use.

So, maybe I can enhance the AdMob Javascript plugin in the near future, but, for now, you must use the AdMob API directly, Amin. My recommendation is that you forget the AdMob Javascript plugin complete, just follow and use the AdMob plugin API.

Then please... post here any problem that you can have and I will try to help you.

---

Hi David,
As suggested I am trying to add the Admob plugin and use its functions directly. However I am struggling with how a cordova plugin could be added to an AB project. Similar to the example provided, at "custom plugins" I tried "cordova-plugin-admob", "https://github.com/floatinghotpot/cordova-admob-pro", "https://github.com/floatinghotpot/cordova-admob-pro.git" and ""cordova-plugin-admobpro"" and all either broke the app, broke build or caused error "Admob not defined" in the app.
Any advice is greatly appreciated.

Hello Amin,

In principle, use the Cordova Custom plugins option like below must be enough:

So you must use the plugin's ID: cordova-plugin-admob

Additionally, the above can be also a valid way to do it if we need:

---

Hello Amin,

Just to note... remember that, as any other Cordova plugin, their API must be used inside or after the app Ready event.

---

Hi David,
Thanks for your help. I actually noticed last night that I can not call plugin functions at "ready". I also added ad-mob plugin by specifying the version I need at custom plugins "cordova-plugin-admobpro --save --variable PLAY_SERVICES_VERSION=16.0.0" . In addition to that, to add ad-mob plugin, "Google Play Services" also has to be added to the Android SDK. Got it running and the functions I have included at the first post work like a charm in case some one likes to use them. Thanks a lot for your assistance, it is always very much appreciated :)

Hello Amin,

The plugin documentation is our friend. :-) The Ready event note is valid for all the Cordova plugins, and, for Cordova itself: before the Ready event the Cordova's stuff and plugins are not available to use, so we must use it inside or after the Ready event. About the the plugin's installation flag, the AdMob sample don't use it... and works... but maybe it's becuause it's just a test... or maybe because I have the right Google Play services here in the Android SDK.

The plugin works very well, and, certainly their API is quite simple. However, my intention is to enhance the AdMob Javascript plugin of App Builder, in order to have available methods like to prepare the interstitials, but also to prepare and show videos, etc. But I need some time in order to work on it! So in the meanwhile, and, like always, we can directly use the Cordova's plugin Javascript API.

---

Hi David,
Indeed, documents are life savers! I have another question though! in AdMob Javasript plugin, you have created a few functions to respond to "ad present event", "ad fail event" etc. I was wondering where in AB, JS event listeners could be implemented? Nearly anywhere I put "$(document).on('onAdPresent', function(e){XYZ}" it throws an error. I appreciate any hint on that.

Figured it out, I could put event listener any where, it was a missing bracket :) should be:"$(document).on('onAdPresent', function(e){XYZ})" I had missed the bracket at the end and were questioning the code's place :D

Hello Amin,

Yes; we can attach "general" events anywhere, maybe with a few cautions: attach it in a place that made it available for our purposes (if we attach events in a Button Click, they are not available until the button is clicked...), don't attach the same events twice (if this is possible), so, we must control it, or, attach the events in a place that is only executed one time in the app life, for example, the app Ready event.

---

Hi David,
That is exactly what I have done. Thanks for your extraordinary support :)

Thanks for your kindly words, Amin! :-)

---

Hello Amin,

May you can want to continue directly using the AdMob Cordova plugin, which is perfectly right. Anyway, the AdMob Javascript plugin of App Builder has been enhanced to allows to prepare interestitials before show it, among other changes, fixes and enhancements. The AdMob sample has been also enhanced to show the latest Javascript plugin changes.

---

Thanks David, I am currently using the AdMob plugin for this project but since the AdMob Javascript was very simple to use, will switch to it for the next projects. Thanks a lot David for updating it :)