[Solved] How to call Js function in ionic app

1

Hi guys,
I have intall Admob plugin GitHub - appfeel/admob-google-cordova: AdMob ads Cordova/Phonegap/Intel XDK plugin for Android iPhone with latest SDK's and work well on my app. I have add admob.js file with this code:

var isAppForeground = true;

function initAds() {
  if (admob) {
    var adPublisherIds = {
      ios : {
        banner : "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
        interstitial : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII"
      },
      android : {
        banner : "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
        interstitial : "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII"
      }
    };

    var admobid = (/(android)/i.test(navigator.userAgent)) ? adPublisherIds.android : adPublisherIds.ios;

    admob.setOptions({
      publisherId:      admobid.banner,
      interstitialAdId: admobid.interstitial,
      tappxIdiOs:       "/XXXXXXXXX/Pub-XXXX-iOS-IIII",
      tappxIdAndroid:   "/XXXXXXXXX/Pub-XXXX-Android-AAAA",
      tappxShare:       0.5,

    });

    registerAdEvents();

  } else {
    alert('AdMobAds plugin not ready');
  }
}

function onAdLoaded(e) {
  if (isAppForeground) {
    if (e.adType === admob.AD_TYPE.INTERSTITIAL) {
      console.log("An interstitial has been loaded and autoshown. If you want to load the interstitial first and show it later, set 'autoShowInterstitial: false' in admob.setOptions() and call 'admob.showInterstitialAd();' here");
    } else if (e.adType === admob.AD_TYPE_BANNER) {
      console.log("New banner received");
    }
  }
}

function onPause() {
  if (isAppForeground) {
    admob.destroyBannerView();
    isAppForeground = false;
  }
}

function onResume() {
  if (!isAppForeground) {
    setTimeout(admob.createBannerView, 1);
    setTimeout(admob.requestInterstitialAd, 1);
    isAppForeground = true;
  }
}

// optional, in case respond to events
function registerAdEvents() {
  document.addEventListener(admob.events.onAdLoaded, onAdLoaded);
  document.addEventListener(admob.events.onAdFailedToLoad, function (e) {});
  document.addEventListener(admob.events.onAdOpened, function (e) {});
  document.addEventListener(admob.events.onAdClosed, function (e) {});
  document.addEventListener(admob.events.onAdLeftApplication, function (e) {});
  document.addEventListener(admob.events.onInAppPurchaseRequested, function (e) {});

  document.addEventListener("pause", onPause, false);
  document.addEventListener("resume", onResume, false);
}

function onDeviceReady() {
  document.removeEventListener('deviceready', onDeviceReady, false);
  initAds();

  // display a banner at startup
  admob.createBannerView();

  // request an interstitial
  admob.requestInterstitialAd();
}

document.addEventListener("deviceready", onDeviceReady, false);

And call it in index.html

<script src="js/admob.js"></script>

So right now in another html pages how i can call banner or interstitial to show it in my app?
i have try this code in js file

$$(‘.banner’).on(‘click’, function () {
admob.showBannerAd();
});

and call it in html with onClick but not working. Can you help me plz!!!

<a class="item item-thumbnail-left" href="#" onclick="banner">
  <img src="cover.jpg">
  <h2>Pretty Hate Machine</h2>
  <p>Nine Inch Nails</p>
</a>
2

Realy need your help!!!

3

you could put the whole code in a base-controller of your app --> there you can put the banner function the scope and call it in your views with ngClick.

But in your code you are adding an event listener for “click” on all elements with the css-class banner and additionally to a-tag. Your a-tag has no css-class “banner”. So you can remove the onclick=“banner” and the href="#" and add the css-class banner to the element

4

Hi @bengtler,
I got downloaded a sample code app with this code
use admob pro plugin GitHub - floatinghotpot/cordova-admob-pro: đŸ”„ Cordova Plugin for Google AdMob, DFP, ADX. Easy monetization using mobile Ad, with single line of JavaScript. Compatible with Cordova CLI, Inoic, PhoneGap Build, etc.
It working on app with ActionSheet and show ads as well, but i don’t know where code to call in html file

.factory(“AdMob”,[“$window”,function(e){var n=e.AdMob;if(n){document.addEventListener(“onAdFailLoad”,function(e){console.log(“error: “+e.error+”, reason: “+e.reason+”, adNetwork:”+e.adNetwork+“, adType:”+e.adType+“, adEvent:”+e.adEvent)}),document.addEventListener(“onAdLoaded”,function(e){console.log("onAdLoaded: "+e)}),document.addEventListener(“onAdPresent”,function(e){console.log("onAdPresent: "+e)}),document.addEventListener(“onAdLeaveApp”,function(e){console.log("onAdLeaveApp: "+e)}),document.addEventListener(“onAdDismiss”,function(e){console.log("onAdDismiss: "+e)});var t={position:n.AD_POSITION.BOTTOM_CENTER,bgColor:“black”,isTesting:!1},o={};ionic.Platform.isAndroid()&&(o={banner:“ca-app-pub-795925064315xxxx/xxxxxxxxxx”,interstitial:“ca-app-pub-795925064315xxxx/xxxxxxxxxx”}),ionic.Platform.isIOS()&&(o={banner:“ca-app-pub-795925064315xxxx/xxxxxxxxxx”,interstitial:“ca-app-pub-795925064315xxxx/xxxxxxxxxx”}),n.setOptions(t),n.prepareInterstitial({adId:o.interstitial,autoShow:!1,success:function(){console.log(“interstitial prepared”)},error:function(){console.log(“failed to prepare interstitial”)}})}else console.log(“No AdMob?”);return{showBanner:function(){n&&n.createBanner({adId:o.banner,position:n.AD_POSITION.BOTTOM_CENTER,autoShow:!0,success:function(){console.log(“banner created”)},error:function(){console.log(“failed to create banner”)}})},showInterstitial:function(){n&&n.showInterstitial()},removeAds:function(){n&&n.removeBanner()}}}]);

and in js file

.controller(“AdmobCtrl”,[“$scope”,“$ionicActionSheet”,“AdMob”,function(e,n,t){e.manageAdMob=function(){n.show({buttons:[{text:“Show AdMob Banner”},{text:“Show AdMob Interstitial”}],destructiveText:“Remove Ads”,titleText:“Choose the ad to show”,cancelText:“Cancel”,cancel:function(){},destructiveButtonClicked:function(){return console.log(“removing ads”),t.removeAds(),!0},buttonClicked:function(e,n){return"Show AdMob Banner"==n.text&&(console.log(“show AdMob banner”),t.showBanner()),“Show AdMob Interstitial”==n.text&&(console.log(“show AdMob interstitial”),t.showInterstitial()),!0}})}}])

Then how i can call banner or interstitial in html file?
and how can setup auto show interstitial and banner when first load app and load again show interstitial ?
I really need your help. Thank you so much!

5

Admob pro plugin support ionic framework.
Everything solve thanks

1 Like
6

hi, I want to ask a question, how to show always the banner ? this code works very well but admob banner not show continuous ?