Display a free Admob banner within an Ionic 3 application

I have integrated Admob's banner into my Ionic 3 app following the guidelines provided in the Ionic documentation at this link.

Below is the code snippet I used for displaying the banner on the homepage:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig} from '@ionic-native/admob-free';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public admob: AdMobFree) {
    this.showInterstitialAds();
  }

  showInterstitialAds() {
    const bannerConfig: AdMobFreeBannerConfig = {
      id: 'ca-app-pub-id',
      isTesting: true,
      autoShow: true
    };
    this.admob.interstitial.config(bannerConfig);

    this.admob.interstitial.prepare()
      .then(() => {
        this.admob.interstitial.show()
      })
      .catch(e => console.log(e));
  }
}

However, despite implementing the code correctly, the banner is not showing up when I run the app. I do not have any adblock extensions installed and have also created an account on Google Admob. Can someone point out what mistake I might be making?

Answer №1

My app is not displaying the banner, even though I don't have any adblock extensions installed and I have already created an AdMob account on Google. What could be causing this issue?

The AdMob native plugin is designed to work only on actual devices.

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

Encountering difficulties testing MatTable row population in Karma testing

Can someone please assist me in identifying the issues with my coding method? I attempted to replicate the techniques demonstrated in this tutorial on Harnesses Here is an Angular component that consists of a simple data table (MatTable) connected to a re ...

Looking for a way to style the user's selection in a Ng Bootstrap typeahead component without using resultFormatter?

I have implemented a ngBootstrap typeahead for selecting a person from a list of results. Each result, which is an object retrieved from an API, is displayed as Name + ID in the list by using the resultFormatter input. However, after clicking on a result, ...

Error: Cannot modify the constant property 'name' of the function."&squo;

As I attempted to enter text into the input box, an error message appeared after typing my first letter stating "cannot assign to read only property". Below is the code I am referring to: The code of the component can be found here: This is the specifie ...

Whenever a query is entered, each letter creates a new individual page. What measures can be taken to avoid this?

Currently, I am working on a project that involves creating a search engine. However, I have encountered an issue where each time a user types a query, a new page is generated for every alphabet entered. For instance, typing 'fos' generates 3 pag ...

When attempting to send an email with nodemailer, an error message popped up saying "setImmediate is not defined."

let transporter = nodemailer.createTransport({ host: "sandbox.smtp.mailtrap.io", port: 2525, auth: { user: "xxxxxx", pass: "xxxxxx" }, tls: { rejectUnauthorized: false } ...

Issue with Firebase authentication failing upon page reload

I'm currently delving into a project that involves the integration of Firebase and React. I have successfully implemented registration and login functionalities, but now I am seeking to add some form of security in order to control access to certain p ...

What are effective strategies for troubleshooting Dependency Injection problems in nest.js?

Can someone explain the process of importing a third-party library into NestJS using Dependency Injection? Let's say we have a class called AuthService: export class AuthService { constructor( @Inject(constants.JWT) private jsonWebToken: any, ...

md-sidenav causing anchor tags to malfunction

Having issues with Angular 4, Angular Material 2, and Node 8 (although the problem was present in version 6 as well). My md-sidenav with anchor tags as content is not responding to CSS styling or clicks. I've checked for open tags, tried different mod ...

Exploring the world of Ionic and Angular on Coursera

I've been following a Coursera tutorial, but I've encountered an error. Although I have the code provided by the teacher, it's not working as expected. Unfortunately, I am unsure of what additional code to include since everything seems to ...

The process of ensuring a component is able to watch for the router even when it is not within the router

I am facing an issue with setting v-if for an element to get a boolean value from a function when the router changes the URL. Here is the code snippet for my Header component: <template> <header class="wfm-header"> <div class=" ...

A guide to mastering Nested Table creation in Angular

I'm in the process of creating a dynamic table using an array of data let data = [{ "criterialimitId": "3", "criteriaName": "Test", "criteriaId": "1", "criteria": "Max Wager", "type": "DAILY", "oprLimit": "2.5", "status": "1", "acti ...

The element event does not trigger an update on the view

I am trying to display the caret position of my editor on a specific place on the website. I have created a directive and service to share variables between the controller and directive. Inside the directive, I have enabled events like "keyup", "mouseup", ...

Show image using Typescript model in Angular application

In my Angular (v8) project, I have a profile page where I typically display the user's photo using the following method: <img class="profile-user-img" src="./DemoController/GetPhoto?Id={{rec.Id}}" /> However, I am considering an alternative ap ...

Generate a TemplateRef and place it into the template of the component

Inquiring about Angular 5.0.2 After reviewing the example provided on NgTemplateOutlet at https://angular.io/api/common/NgTemplateOutlet I am eager to discover if there is a method to dynamically generate a TemplateRef and then insert it into the componen ...

Forcing a property binding update in Angular 2

Take a look at this particular component import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], template: ` <div> <h3>Input with two decimals</h3> <input type ...

The package import path varies between dynamic code generation and static code generation

I have organized the src directory of my project in the following structure: . ├── config.ts ├── protos │ ├── index.proto │ ├── index.ts │ ├── share │ │ ├── topic.proto │ │ ├── topic_pb. ...

Deactivating a form field depending on a selected radio button in Angular 2

If I have two radio buttons, with a click function called localClick for the first button to give value 1 and the second button to give value 2. <div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"&g ...

How to use jsZIP in angular to bundle several CSV files into a single zip folder for download

I have a code snippet below that demonstrates how to create data for a CSV file and download the CSV file in a zip folder: generateCSVfiles() { this.studentdata.forEach(function (student) { this.service.getStudentDetails(student.studentId).subsc ...

Ways to compel string type or disregard type?

When using the following code snippet: <Image src={user?.profilePictureUrl} alt={user?.name} /> An error is encountered: Type 'string | null | undefined' is not assignable to type 'string | StaticImport'. Type 'undefined ...

The class constructor in the TSdx package must be invoked with the 'new' keyword

I recently developed a npm package using TSdx to create a small Jest reporter. However, when I try to use this package in another project, an error occurs. Uncaught TypeError: Class constructor BaseReporter cannot be invoked without 'new' at ...