Skip to content

Events

Jump to bottom Edit New page
Marc Pascual edited this page Jun 16, 2020 · 16 revisions

Events

AdMobAds Cordova library will use the same events for Android as for iOS (the iOS ones are mapped to the Android ones). See Google Docs for more info.

onAdLoaded

Called when an ad is received.

  • event: JSON object.
    Example: { adType : 'banner' }
    • adType can be admob.AD_TYPE.BANNER or admob.AD_TYPE.INTERSTITIAL

Cordova

Javascript

document.addEventListener(window.admob.events.onAdLoaded, async (ad) => {
    if (ad.adType === window.admob.AD_TYPE.BANNER) {
        await window.admob.createBannerView( { bannerAdId: 'ca-app-pub-3940256099942544/6300978111' });
        await window.admob.showBannerAd();
    }
});

Angular

import { Component, OnInit } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Admob, IAdMobEvent } from '@ionic-native/admob';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
    constructor(private admob: Admob, private platform: Platform) { }

    async ngOnInit(): Promise<void> {
        await this.platform.ready();
        this.admob.onAdLoaded().subscribe(async (ad: IAdMobEvent) => {
            if (ad.adType === this.admob.AD_TYPE.BANNER) {
                await this.admob.showBannerAd();
            }
        });
        await this.admob.createBannerView({ bannerAdId: 'ca-app-pub-3940256099942544/6300978111' });
    }
}

Capacitor

Stencil

import { Component } from '@stencil/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css',
    shadow: false,
})
export class HomePage {

    private adMobAdsPlugin: AdMobAdsPlugin;

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onAdLoaded', async (ad: IAdMobEvent) => {
            if (ad.adType === 'banner') {
                await this.adMobAdsPlugin.showBannerAd();
            }
        });
        await this.adMobAdsPlugin.createBannerView({
            bannerAdId: 'ca-app-pub-3940256099942544/6300978111',
            autoShowBanner: false,
        });
    }
}

Angular

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

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

    private adMobAdsPlugin: AdMobAdsPlugin;

    async ngOnInit(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onAdLoaded', async (ad: IAdMobEvent) => {
            if (ad.adType === 'banner') {
                await this.adMobAdsPlugin.showBannerAd();
            }
        });
        await this.adMobAdsPlugin.createBannerView({
            bannerAdId: 'ca-app-pub-3940256099942544/6300978111',
            autoShowBanner: false,
        });
    }
}

React

import React, { Component } from 'react';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';
import { Plugins } from '@capacitor/core';

export default class HomePage extends Component {
    private adMobAdsPlugin: AdMobAdsPlugin;

    constructor(props: any) {
        super(props);
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
    }

    async componentDidMount() {
        try {
            this.adMobAdsPlugin.addListener!('onAdLoaded', async (ad: IAdMobEvent) => {
                if (ad.adType === 'banner') {
                    await this.adMobAdsPlugin.showBannerAd();
                }
            });
            await this.adMobAdsPlugin.createBannerView({
                bannerAdId: 'ca-app-pub-3940256099942544/6300978111',
                autoShowBanner: false,
            });
        } catch (err) {
            console.log('Error creating banner:', err);
        }
    }

    render() {
        return 'your page content';
    }
}

onAdFailedToLoad

Called when an ad request failed.

  • event: JSON object.
    Example: { adType : "[string]", error : [integer], reason : "[string]" }
    • adType can be admob.AD_TYPE.BANNER or admob.AD_TYPE.INTERSTITIAL
    • error is the error code and is usually one of the following:
      • AdRequest.ERROR_CODE_INTERNAL_ERROR
      • AdRequest.ERROR_CODE_INVALID_REQUEST
      • AdRequest.ERROR_CODE_NETWORK_ERROR
      • AdRequest.ERROR_CODE_NO_FILL
    • reason is an english string with the reason of the error (for logging purposes).

Cordova

Javascript

document.addEventListener(window.admob.events.onAdFailedToLoad, ad => { });

Angular

import { Component, OnInit } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Admob, IAdMobEvent } from '@ionic-native/admob';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
})
export class HomePage implements OnInit {
    constructor(private admob: Admob, private platform: Platform) { }

    async ngOnInit(): Promise<void> {
        await this.platform.ready();
        this.admob.onAdFailedToLoad().subscribe((ad: IAdMobEvent) => { });
    }
}

Capacitor

Stencil

import { Component } from '@stencil/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css',
    shadow: false,
})
export class HomePage {

    private adMobAdsPlugin: AdMobAdsPlugin;

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onAdFailedToLoad', (ad: IAdMobEvent) => {});
    }
}

Angular

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

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

    private adMobAdsPlugin: AdMobAdsPlugin;

    async ngOnInit(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onAdFailedToLoad', (ad: IAdMobEvent) => {});
    }
}

React

import React, { Component } from 'react';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

export default class HomePage extends Component {
    private adMobAdsPlugin: AdMobAdsPlugin;

    constructor(props: any) {
        super(props);
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
    }

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin.addListener!('onAdFailedToLoad', (ad: IAdMobEvent) => {});
    }

    render() {
        return 'your page content';
    }
}

onAdOpened

Called when an ad opens an overlay that covers the screen. Please note that onPause event is raised when an interstitial is shown.

  • event: JSON object.
    Example: { adType : 'banner' }
    • adType can be admob.AD_TYPE.BANNER or admob.AD_TYPE.INTERSTITIAL

Cordova

Javascript

document.addEventListener(window.admob.events.onAdOpened, ad => { });

Angular

import { Component, OnInit } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Admob, IAdMobEvent } from '@ionic-native/admob';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
})
export class HomePage implements OnInit {
    constructor(private admob: Admob, private platform: Platform) { }

    async ngOnInit(): Promise<void> {
        await this.platform.ready();
        this.admob.onAdOpened().subscribe((ad: IAdMobEvent) => { });
    }
}

Capacitor

Stencil

import { Component } from '@stencil/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css',
    shadow: false,
})
export class HomePage {

    private adMobAdsPlugin: AdMobAdsPlugin;

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onAdOpened', (ad: IAdMobEvent) => {});
    }
}

Angular

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

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

    private adMobAdsPlugin: AdMobAdsPlugin;

    async ngOnInit(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onAdOpened', (ad: IAdMobEvent) => {});
    }
}

React

import React, { Component } from 'react';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

export default class HomePage extends Component {
    private adMobAdsPlugin: AdMobAdsPlugin;

    constructor(props: any) {
        super(props);
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
    }

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin.addListener!('onAdOpened', (ad: IAdMobEvent) => {});
    }

    render() {
        return 'your page content';
    }
}

onAdClosed

Called when the user is about to return to the application after clicking on an ad. Please note that onResume event is raised when an interstitial is closed.

  • event: JSON object.
    Example: { adType : 'banner' }
    • adType can be admob.AD_TYPE.BANNER or admob.AD_TYPE.INTERSTITIAL

Cordova

Javascript

document.addEventListener(window.admob.events.onAdClosed, ad => { });

Angular

import { Component, OnInit } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Admob, IAdMobEvent } from '@ionic-native/admob';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
})
export class HomePage implements OnInit {
    constructor(private admob: Admob, private platform: Platform) { }

    async ngOnInit(): Promise<void> {
        await this.platform.ready();
        this.admob.onAdClosed().subscribe((ad: IAdMobEvent) => { });
    }
}

Capacitor

Stencil

import { Component } from '@stencil/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css',
    shadow: false,
})
export class HomePage {

    private adMobAdsPlugin: AdMobAdsPlugin;

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onAdClosed', (ad: IAdMobEvent) => {});
    }
}

Angular

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

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

    private adMobAdsPlugin: AdMobAdsPlugin;

    async ngOnInit(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onAdClosed', (ad: IAdMobEvent) => {});
    }
}

React

import React, { Component } from 'react';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

export default class HomePage extends Component {
    private adMobAdsPlugin: AdMobAdsPlugin;

    constructor(props: any) {
        super(props);
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
    }

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin.addListener!('onAdClosed', (ad: IAdMobEvent) => {});
    }

    render() {
        return 'your page content';
    }
}

onAdLeftApplication

Called when the user has clicked an ad and lefts the current application.

  • event: JSON object.
    Example: { adType : 'banner' }
    • adType can be admob.AD_TYPE.BANNER, admob.AD_TYPE.INTERSTITIAL or admob.AD_TYPE.AD_TYPE_REWARDED

Cordova

Javascript

document.addEventListener(window.admob.events.onAdLeftApplication, ad => { });

Angular

import { Component, OnInit } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Admob, IAdMobEvent } from '@ionic-native/admob';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
})
export class HomePage implements OnInit {
    constructor(private admob: Admob, private platform: Platform) { }

    async ngOnInit(): Promise<void> {
        await this.platform.ready();
        this.admob.onAdLeftApplication().subscribe((ad: IAdMobEvent) => { });
    }
}

Capacitor

Stencil

import { Component } from '@stencil/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css',
    shadow: false,
})
export class HomePage {

    private adMobAdsPlugin: AdMobAdsPlugin;

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onAdLeftApplication', (ad: IAdMobEvent) => {});
    }
}

Angular

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

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

    private adMobAdsPlugin: AdMobAdsPlugin;

    async ngOnInit(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onAdLeftApplication', (ad: IAdMobEvent) => {});
    }
}

React

import React, { Component } from 'react';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

export default class HomePage extends Component {
    private adMobAdsPlugin: AdMobAdsPlugin;

    constructor(props: any) {
        super(props);
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
    }

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin.addListener!('onAdLeftApplication', (ad: IAdMobEvent) => {});
    }

    render() {
        return 'your page content';
    }
}

onRewardedAd

Called when the user has earn the reward from a rewarded ad.

  • event: JSON object.
    Example: { adType : 'banner' }
    • adType is admob.AD_TYPE.AD_TYPE_REWARDED

Cordova

Javascript

document.addEventListener(window.admob.events.onRewardedAd, ad => { });

Angular

import { Component, OnInit } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Admob, IAdMobEvent } from '@ionic-native/admob';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
})
export class HomePage implements OnInit {
    constructor(private admob: Admob, private platform: Platform) { }

    async ngOnInit(): Promise<void> {
        await this.platform.ready();
        this.admob.onRewardedAd().subscribe((ad: IAdMobEvent) => { });
    }
}

Capacitor

Stencil

import { Component } from '@stencil/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css',
    shadow: false,
})
export class HomePage {

    private adMobAdsPlugin: AdMobAdsPlugin;

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onRewardedAd', (ad: IAdMobEvent) => {});
    }
}

Angular

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

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

    private adMobAdsPlugin: AdMobAdsPlugin;

    async ngOnInit(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onRewardedAd', (ad: IAdMobEvent) => {});
    }
}

React

import React, { Component } from 'react';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

export default class HomePage extends Component {
    private adMobAdsPlugin: AdMobAdsPlugin;

    constructor(props: any) {
        super(props);
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
    }

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin.addListener!('onRewardedAd', (ad: IAdMobEvent) => {});
    }

    render() {
        return 'your page content';
    }
}

onRewardedAdVideoStarted

Called when the rewarded video ad has started.

  • event: JSON object.
    Example: { adType : 'banner' }
    • adType is admob.AD_TYPE.AD_TYPE_REWARDED

Cordova

Javascript

document.addEventListener(window.admob.events.onRewardedAdVideoStarted, ad => { });

Angular

import { Component, OnInit } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Admob, IAdMobEvent } from '@ionic-native/admob';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
})
export class HomePage implements OnInit {
    constructor(private admob: Admob, private platform: Platform) { }

    async ngOnInit(): Promise<void> {
        await this.platform.ready();
        this.admob.onRewardedAdVideoStarted().subscribe((ad: IAdMobEvent) => { });
    }
}

Capacitor

Stencil

import { Component } from '@stencil/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css',
    shadow: false,
})
export class HomePage {

    private adMobAdsPlugin: AdMobAdsPlugin;

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onRewardedAdVideoStarted', (ad: IAdMobEvent) => {});
    }
}

Angular

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

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

    private adMobAdsPlugin: AdMobAdsPlugin;

    ngOnInit(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onRewardedAdVideoStarted', (ad: IAdMobEvent) => {});
    }
}

React

import React, { Component } from 'react';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

export default class HomePage extends Component {
    private adMobAdsPlugin: AdMobAdsPlugin;

    constructor(props: any) {
        super(props);
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
    }

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin.addListener!('onRewardedAdVideoStarted', (ad: IAdMobEvent) => {});
    }

    render() {
        return 'your page content';
    }
}

onRewardedAdVideoCompleted

Called when the rewarded video ad has been completed.

  • event: JSON object.
    Example: { adType : 'banner' }
    • adType is admob.AD_TYPE.AD_TYPE_REWARDED

Cordova

Javascript

document.addEventListener(window.admob.events.onRewardedAdVideoCompleted, ad => { });

Angular

import { Component, OnInit } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Admob, IAdMobEvent } from '@ionic-native/admob';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
})
export class HomePage implements OnInit {
    constructor(private admob: Admob, private platform: Platform) { }

    async ngOnInit(): Promise<void> {
        await this.platform.ready();
        this.admob.onRewardedAdVideoCompleted().subscribe((ad: IAdMobEvent) => { });
    }
}

Capacitor

Stencil

import { Component } from '@stencil/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css',
    shadow: false,
})
export class HomePage {

    private adMobAdsPlugin: AdMobAdsPlugin;

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onRewardedAdVideoCompleted', (ad: IAdMobEvent) => {});
    }
}

Angular

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

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

    private adMobAdsPlugin: AdMobAdsPlugin;

    async ngOnInit(): Promise<void> {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        this.adMobAdsPlugin.addListener('onRewardedAdVideoCompleted', (ad: IAdMobEvent) => {});
    }
}

React

import React, { Component } from 'react';
import { Plugins } from '@capacitor/core';
import { AdMobAdsPlugin, IAdMobEvent } from 'admob-capacitor';

export default class HomePage extends Component {
    private adMobAdsPlugin: AdMobAdsPlugin;

    constructor(props: any) {
        super(props);
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
    }

    async componentWillLoad(): Promise<void> {
        this.adMobAdsPlugin.addListener!('onRewardedAdVideoCompleted', (ad: IAdMobEvent) => {});
    }

    render() {
        return 'your page content';
    }
}

Index | Setup | Home 

Made in Barcelona with <3 and Code
Clone this wiki locally