Skip to content

Complete example code

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

Example code

Cordova

Javascript

var admob = window.admob;
var options;
var adIds = {
    ios: {
        bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB',
        interstitialAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
    },
    android: {
        bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB',
        interstitialAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
    },
    web: {
        publisherId: 'ca-app-pub-XXXXXXXXXXXXXXXX', // AdSense
        adSlot: 'BBBBBBBBBB', // AdSense
    }
};

function onDeviceReady() {
    var admobIds;
    if (/android/i.test(navigator.userAgent)) {
        admobIds = adIds.android;
    } else if (/iPad|iPhone|iPod/i.test(navigator.userAgent)) {
        admobIds = adIds.ios;
    } else {
        // Running on a web browser
        admobIds = adIds.web;
    }

    options = Object.assign(admobIds, {
        autoShowInterstitial: true,
    });

    admob.setOptions(options);
    registerAdEvents();
    document.removeEventListener('deviceready', onDeviceReady, false);
    if (admob) {
        // display a banner at startup
        admob.createBannerView();
        // request an interstitial, will be shown when onAdLoaded event raises
        admob.requestInterstitialAd();
    } else {
        alert('AdMobAds plugin is not ready');
    }
}

function onAdLoaded(e) {
    if (e.adType === admob.AD_TYPE.INTERSTITIAL) {
        admob.showInterstitialAd();
        // Show an interstitial every 2 minutes
        setTimeout(function () {
            admob.requestInterstitialAd();
        }, 2 * 60 * 1000);
    }
}

// optional, register event handlers
function registerAdEvents() {
    document.addEventListener(admob.events.onAdLoaded, onAdLoaded);
    document.addEventListener(admob.events.onAdFailedToLoad, function (event) { });
    document.addEventListener(admob.events.onAdOpened, function (event) { });
    document.addEventListener(admob.events.onAdClosed, function (event) { });
}

function initAds() {
    if (/android|iPad|iPhone|iPod/i.test(navigator.userAgent)) {
        // mobile platform
        document.addEventListener('deviceready', onDeviceReady, false);
    } else {
        // web platform
        onDeviceReady();
    }
}

initAds();

Angular

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

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

    private adIds = {
        ios: {
            bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB', // AdMob
            interstitialAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
        },
        android: {
            bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB', // AdMob
            interstitialAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
        },
        web: {
            publisherId: 'ca-app-pub-XXXXXXXXXXXXXXXX', // AdSense
            adSlot: 'BBBBBBBBBB', // AdSense
        },
    };

    constructor(
        private platform: Platform,
        private admob: Admob,
    ) { }

    async ngOnInit() {
        await this.platform.ready();
        let options;

        // Select corresponding ads configuration depending on platform
        if (this.platform.is('ios')) {
            options = this.adIds.ios;
        } else if (this.platform.is('android')) {
            options = this.adIds.android;
        } else {
            options = this.adIds.web;
        }

        this.admob.onAdLoaded().subscribe(e => this.onAdLoaded(e));

        this.admob.setOptions(options);
        await this.admob.createBannerView();
        await this.admob.requestInterstitialAd();
    }

    onAdLoaded(e) {
        if (e.adType === this.admob.AD_TYPE.INTERSTITIAL) {
            this.admob.showInterstitialAd();
            // Show an interstitial every 2 minutes
            setTimeout(() => this.admob.requestInterstitialAd(), 2 * 60 * 1000);
        }
    }

}

Note: in case of working on a device platform (Android or IOS) configuration is done inside onDeviceReady(). This is because only after device ready the AdMob Cordova plugin will be working.

Capacitor

Stencil

import { Component } from '@stencil/core';
import { Plugins, registerWebPlugin } from '@capacitor/core';
import { AdMobAds, AdMobAdsPlugin, IAdMobAdsOptions, IAdMobAdsWebOptions, IAdMobEvent, AD_TYPE } from 'admob-capacitor';

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

    private adMobAdsPlugin: AdMobAdsPlugin;
    private adIds = {
        ios: {
            bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB', // AdMob
            interstitialAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
        },
        android: {
            bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB', // AdMob
            interstitialAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
        },
        web: {
            publisherId: 'ca-app-pub-XXXXXXXXXXXXXXXX', // AdSense
            adSlot: 'BBBBBBBBBB', // AdSense
        },
    };

    getOptions() {
        if (/android/i.test(navigator.userAgent)) {
            return this.adIds.android;
        }
        if (/ipad|iphone|ipod/i.test(navigator.userAgent)) {
            return this.adIds.ios;
        }
        // Running on a web browser
        return this.adIds.web;
    }

    getIsDevice() {
        return /android|ipad|iphone|ipod/i.test(navigator.userAgent);
    }

    onAdLoaded(e: IAdMobEvent) {
        if (e.adType === AD_TYPE.INTERSTITIAL) {
            this.adMobAdsPlugin.showInterstitialAd();
            // Show an interstitial every 2 minutes
            setTimeout(() => this.adMobAdsPlugin.requestInterstitialAd(), 2 * 60 * 1000);
        }
    }

    async componentWillLoad() {
        const options: IAdMobAdsOptions | IAdMobAdsWebOptions = this.getOptions();
        if (!this.getIsDevice()) {
            // Needs to be called manually, see https:/ionic-team/capacitor/discussions/1985
            registerWebPlugin(AdMobAds);
        }
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;

        try {
            this.adMobAdsPlugin.addListener('onAdLoaded', (e) => this.onAdLoaded(e));
            await this.adMobAdsPlugin.setOptions(options);
            await this.adMobAdsPlugin.createBannerView();
            await this.adMobAdsPlugin.requestInterstitialAd();
        } catch (err) {
            console.log('creating banner error', err);
        }
    }

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

Angular

import { Component, OnInit } from '@angular/core';
import { Plugins, registerWebPlugin } from '@capacitor/core';
import { Platform } from '@ionic/angular';
import { AdMobAds, AdMobAdsPlugin, IAdMobAdsOptions, IAdMobAdsWebOptions, IAdMobEvent, AD_TYPE } from 'admob-capacitor';

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

    private adMobAdsPlugin: AdMobAdsPlugin;
    private adIds = {
        ios: {
            bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB', // AdMob
            interstitialAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
        },
        android: {
            bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB', // AdMob
            interstitialAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
        },
        web: {
            publisherId: 'ca-app-pub-XXXXXXXXXXXXXXXX', // AdSense
            adSlot: 'BBBBBBBBBB', // AdSense
        },
    };

    constructor(private platform: Platform) { }

    async getOptions() {
        await this.platform.ready();
        if (this.platform.is('android')) {
            return this.adIds.android;
        } else if (this.platform.is('ios')) {
            return this.adIds.ios;
        } else {
            // Running on a web browser
            return this.adIds.web;
        }
    }

    getIsDevice() {
        return this.platform.is('android') || this.platform.is('ios');
    }

    onAdLoaded(e: IAdMobEvent) {
        if (e.adType === AD_TYPE.INTERSTITIAL) {
            this.adMobAdsPlugin.showInterstitialAd();
            // Show an interstitial every 2 minutes
            setTimeout(() => this.adMobAdsPlugin.requestInterstitialAd(), 2 * 60 * 1000);
        }
    }

    async ngOnInit() {
        const options: IAdMobAdsOptions | IAdMobAdsWebOptions = await this.getOptions();
        if (!this.getIsDevice()) {
            // Needs to be called manually, see https:/ionic-team/capacitor/discussions/1985
            registerWebPlugin(AdMobAds);
        }
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        try {
            this.adMobAdsPlugin.addListener('onAdLoaded', (e) => this.onAdLoaded(e));
            await this.adMobAdsPlugin.setOptions(options);
            await this.adMobAdsPlugin.createBannerView();
            await this.adMobAdsPlugin.requestInterstitialAd();
        } catch (err) {
            console.log('creating banner error', err);
        }
    }
}

React

import React, { Component } from 'react';
import { AdMobAdsPlugin, AdMobAds, IAdMobAdsOptions, IAdMobAdsWebOptions, AD_TYPE, IAdMobEvent } from 'admob-capacitor';
import { Plugins, registerWebPlugin } from '@capacitor/core';

export default class HomePage extends Component {

    private adMobAdsPlugin: AdMobAdsPlugin;
    private adIds = {
        ios: {
            bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB', // AdMob
            interstitialAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
        },
        android: {
            bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB', // AdMob
            interstitialAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
        },
        web: {
            publisherId: 'ca-app-pub-XXXXXXXXXXXXXXXX', // AdSense
            adSlot: 'BBBBBBBBBB', // AdSense
        },
    };

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

    getOptions() {
        if (/android/i.test(navigator.userAgent)) {
            return this.adIds.android;
        }
        if (/ipad|iphone|ipod/i.test(navigator.userAgent)) {
            return this.adIds.ios;
        }
        // Running on a web browser
        return this.adIds.web;
    }

    getIsDevice() {
        return /android|ipad|iphone|ipod/i.test(navigator.userAgent);
    }

    onAdLoaded(e: IAdMobEvent) {
        if (e.adType === AD_TYPE.INTERSTITIAL) {
            this.adMobAdsPlugin.showInterstitialAd();
            // Show an interstitial every 2 minutes
            setTimeout(() => this.adMobAdsPlugin.requestInterstitialAd(), 2 * 60 * 1000);
        }
    }

    async componentDidMount() {
        const options: IAdMobAdsOptions | IAdMobAdsWebOptions = this.getOptions();
        if (!this.getIsDevice()) {
            // Needs to be called manually, see https:/ionic-team/capacitor/discussions/1985
            registerWebPlugin(AdMobAds);
            this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        }
        try {
            this.adMobAdsPlugin.addListener!('onAdLoaded', (e: IAdMobEvent) => this.onAdLoaded(e));
            await this.adMobAdsPlugin.setOptions(options);
            await this.adMobAdsPlugin.createBannerView();
            await this.adMobAdsPlugin.requestInterstitialAd();
        } catch (err) {
            console.log('creating banner error', err);
        }
    }

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

Index | Setup | Home 

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