Guidelines on integrating Admob into Ionic framework

I tried following the steps outlined in this post: AdMob not loading ads in ionic/angular app

After running the app using "ionic build ios && ionic emulate ios," I still see no ads, no black bar, nothing at all.

Can someone help me figure out what I may have missed?

Appreciate any assistance. Thanks!

Answer №1

To access AdMob in your Ionic app, you can refer to the guidelines provided at https://github.com/appfeel/admob-google-cordova/wiki/Angular.js,-Ionic-apps:

  • Begin by installing the plugin using the standard method (details available here):

    ionic plugin add cordova-admob
    
  • Add the specified script to your index.html file (simply include it, no need to manually copy any files as the plugin handles this during app preparation):

    <script src="lib/angular-admob/angular-admob.js"></script>
    
  • Now, integrate AdMob into your Ionic application.

Here is a brief example:

var app = angular.module('myApp', ['admobModule']);

app.config(['admobSvcProvider', function (admobSvcProvider) {
  // Optionally configure the options here:
  admobSvcProvider.setOptions({
    publisherId:          "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",  // Required
    interstitialAdId:     "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",  // Optional
  });
}]);


app.run(['admobSvc', function (admobSvc) {
  // You can also set options here (or in any controller):
  // admobSvcProvider.setOptions({ ... });

  admobSvc.createBannerView();
  // Alternatively, you can use admobSvc.createBannerView(options);


  // Event handling:
  $rootScope.$on(admobSvc.events.onAdOpened, function onAdOpened(evt, e) {
    console.log('adOpened: type of ad:' + e.adType);
  });
}]);

Answer №2

Here are the steps you need to follow:

  1. ionic platform add android
     ionic platform add ios
  2. cordova plugin add com.rjfun.cordova.plugin.admob
  3. Copy and paste the code into the app.js's run module

The code snippet is as follows:

$ionicPlatform.ready(function() {
    if(window.plugins && window.plugins.AdMob) {
        var admob_key = device.platform == "Android" ? "ANDROID_PUBLISHER_KEY" : "IOS_PUBLISHER_KEY";
        var admob = window.plugins.AdMob;
        admob.createBannerView( {
            'publisherId': admob_key,
            'adSize': admob.AD_SIZE.BANNER,
            'bannerAtTop': false
        }, 
        function() {
            admob.requestAd({ 'isTesting': false }, 
        function() {
            admob.showAd(true);
        }, 
        function() { console.log('failed to request ad'); });
        }, 
        function() { console.log('failed to create banner view'); });
    }
});

Best regards.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent overlapping of nodes and edges in a D3 force-directed layout

Check out this fascinating example at http://bl.ocks.org/mbostock/1747543: In the demonstration, Mike illustrates how to prevent nodes from colliding with each other in a graph. I'm curious if it's feasible to also prevent collisions between no ...

The value is currently unset in the TypeScript language

The variable `this.engenes_comparte` is showing up as undefined inside the subscribe function, but it works fine outside of it. baja(){ this._restService.getEngines(this._globalService.currentFisherMan.nid).subscribe((data : any[]) => { le ...

Adjust the camera in threejs to be positioned inside a different object

My goal is to adjust the camera controlled by trackballControl to match the position of an object. Currently, it's functioning correctly but as demonstrated in this example, each time the camera changes its position, the z value also changes, which i ...

Detecting the presence of an object in JavaScript or jQuery

My current code is able to save the HTML content of clicked divs in localStorage and then append it to the #result div when the 'Saved Events' button is clicked. However, I am facing a challenge where I need to check if objects already exist in # ...

Retrieving complete credit card information with the help of JavaScript

I've been grappling with extracting credit card data from a Desko Keyboard, and while I managed to do so, the challenge lies in the fact that each time I swipe, the card data comes in a different pattern. Here is my JavaScript code: var fs = require ...

It seems like I'm having trouble sharing a collection of objects

Hey there, here's where I currently stand. I've got some code that sends an array of items to a .NET WebAPI (c#). var stuff = []; $('#items').find('input').each(function(){ var text = $(this).val(); stuff.push({ ID: ...

Is your angularjs localstorage giving you trouble?

I am encountering an issue with local storage on my webpage. Upon initial visit, I am seeing an outdated value from local storage. However, upon refreshing the page, I am able to access the current value. How can I prevent this error and ensure that I only ...

Using cfajaxproxy in conjunction with URL rewriting capabilities

I have successfully integrated the cfajaxproxy tag, but encountered an issue with the cfc's location in the root directory of my site. When accessing a page within the root directory through a rewritten URL (e.g. mysite.com/one/two/ -> mysite.com/ ...

I'm looking to integrate Jest in my React project with npm. How can I achieve

I've developed my application with create react app and npm. While reviewing the official documentation for jest at https://jestjs.io/docs/tutorial-react, I noticed that they only provide information on testing CRA apps using yarn. Does this suggest t ...

Encountering a 404 (Not Found) error when attempting to make an API call in React JS with Azure MVC

When trying to make a POST API call from my React app to an Azure MVC controller, I encountered an error in the console: POST http://localhost:3000/api/SampleData/AcknowledgeRole 404 (Not Found) This error is puzzling because I have clearly defined the ...

Troubleshooting: Angular input binding issue with updating

I am currently facing a challenge with connecting a list to an input object in Angular. I was expecting the updated values to reflect in the child component every time I make changes to the list, but strangely, the initial values remain unchanged on the sc ...

Load the entire AngularJS webpage using AJAX requests

I'm facing a challenge where I need to integrate an entire legacy page, along with some AngularJS elements, into our new page using AJAX. Initially, all I could see was the raw AngularJS markup: Rank ID {{$index+1}} {{player.playerid}} Afte ...

Understanding AngularJS and how to effectively pass parameters is essential for developers looking

Can anyone help me figure out how to properly pass the html element through my function while using AngularJS? It seems like this method works without AngularJS, but I'm having trouble with the "this" keyword getting confused. Does anyone know how I c ...

The battle between CSS and jQuery: A guide to creating a dynamic zebra-style table without relying on additional plugins

Is there a better way to create a dynamic zebra styling for table rows while still being able to hide certain elements without losing the styling? In this code snippet, I'm using the CSS :nth-of-type(even) to style even rows but running into issues wh ...

What is the reason behind having a selectedOptions property rather than just a selectedOption?

Why does the selectedOptions property of select return an HTMLCollection instead of just one HTMLOptionElement? As far as I understand (correct me if I'm wrong), a select element can only have one selected option, so why do I always need to access it ...

What is the best way to instantly update $scope when working with non-angular code?

Working with a non-angular library requires establishing communication between them. <div id="MoipWidget" data-token="{{personaltoken}}" callback-method-success="successCB" callback-method-error="errorCB"></div> Upon page load, a token must b ...

Unlocking the secret to accessing state in a JavaScript file using VUEX

Can anyone help me figure out why I can't access the currentUser property from the state in my vuex store's user.js file? I'm trying to use it in auth.js, but when I write: store.state.currentUser.uid === ... This is the error message I&apo ...

Insert a div element into the JavaScript file

I have a JavaScript code snippet that needs to be inserted after the "Artwork" section. Here is the code: <div class="image-upload"> <label for="files"> <img src="ohtupload.jpg"> </label> </di ...

Ways to address issues in my tree-building algorithm when the parent ID is missing

Currently, I'm in the process of creating a function to build a tree. Everything seems to be functioning correctly until I encounter a scenario where a document is added with a parentID that doesn't exist in the list. The root node is intended to ...

Embedding image URLs fetched from JSON data within <li> elements

I have successfully retrieved a JSON response, which is displayed using the code below: Within my HTML document, I have the following structure: <ol id="selectable"></ol> In my JavaScript code, I make use of the following: <script type=" ...