capacitor-community / admob

Community plugin for using Google AdMob
MIT License
217 stars 68 forks source link

Interstitial in React - Ad wasn't ready #16

Closed dhwalin closed 4 years ago

dhwalin commented 4 years ago

Please let me know what am I missing. AdMob.showInterstitial()

never show interstitial. Below is my code.

import React from 'react';
import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar, isPlatform } from '@ionic/react';
import { Plugins } from '@capacitor/core';
import { AdOptions } from '@capacitor-community/admob';
import './Tab3.css';

const { AdMob } = Plugins;

const Tab3: React.FC = () => {

  AdMob.initialize();
  const adId = {
    ios: 'ca-app-pub-xxxx/xxx',
    android: 'ca-app-pub-xxxx/xxx'
  }

  const platformAdId = isPlatform('android') ? adId.android : adId.ios;

  const optionsInter: AdOptions = {
    adId: platformAdId,
    isTesting: true
    //autoShow: true
  }

  const handleAd = async () => {
    const adStatus = await AdMob.prepareInterstitial(optionsInter);
    if(adStatus.value){

      AdMob.addListener('onAdLoaded', (info: boolean) => {
        // You can call showInterstitial() here or anytime you want.
        console.log("InterInfo",info);
         AdMob.showInterstitial();
    });

    // AdMob.showInterstitial();
      console.log("GoodToGo");
    }

  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 3</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 3</IonTitle>
          </IonToolbar>
        </IonHeader>

        <IonButton onClick={handleAd}>Show Ad</IonButton>

      </IonContent>
    </IonPage>
  );
};

export default Tab3;
rdlabo commented 4 years ago

You should put addListener before prepareInterstitial

Please check demo: https://github.com/capacitor-community/admob/blob/master/demo/angular/src/app/home/home.page.ts

This is not plugin issue.

dhwalin commented 4 years ago

If it is not plugin issue then why following scenario is appearing? Please have a look. Reward video is working absolutely fine. But ad was not ready error in Interstitial.

Working Code of Reward Video:

AdMob.prepareRewardVideoAd(optionsInter).then((info) => {

        if(info.value)
        {
          AdMob.showRewardVideoAd();
        }

      });

Ad wasn't ready error with same code in Interstitial

AdMob.prepareInterstitial(optionsInter).then((info) => {

        if(info.value)
        {
          AdMob.showInterstitial();
        }

      });