Skip to content

Complete example code

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

title: AdMob complete example code description: AdMob complete example code url: /complete-example-code contributors:

  • appfeel
  • bitgenoma
  • marcpascualsanchez
  • miqmago

Example code

Cordova

Note that in case we are working on a device platform (Android, IOS...) admob ads are configured inside onDeviceReady(). This is because only after device ready the AdMob Cordova plugin will be working.

Javascript

var admob = window.admob;
var isDevice = true;
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: {
        bannerAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
        interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
    }
};

function setIsDevice() {
    var admobid;
    if (/(android)/i.test(navigator.userAgent)){
        admobid = adIds.android;
    } else if(/iPad|iPhone|iPod/i.test(navigator.userAgent)) {
        admobid = adIds.ios;
    } else {
        admobid = adIds.web;
        isDevice = false;
    }
}

function initAds() {
    admob.setOptions({
        bannerAdId:         admobid.bannerAdId,
        interstitialAdId:   admobid.interstitialAdId,
        tappxIdiOS:         "/XXXXXXXXX/Pub-XXXX-iOS-IIII",
        tappxIdAndroid:     "/XXXXXXXXX/Pub-XXXX-Android-AAAA",
        tappxShare:         0.5
    });
    registerAdEvents();
}

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

// optional, in case respond to events
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 onDeviceReady() {
    document.removeEventListener('deviceready', onDeviceReady, false);
    if (admob) {
        initAds();
        // display a banner at startup
        admob.createBannerView();
        // request an interstitial
        admob.requestInterstitialAd();
    } else {
        alert('AdMobAds plugin not ready');
    }
}

setIsDevice();
if (isDevice) {
    document.addEventListener("deviceready", onDeviceReady, false);
} else {
    onDeviceReady();
}

Angular

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

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

    private adMobAdsPlugin: AdMobAdsPlugin;
    private currentAdIds: any;
    private adIds = {
        ios: {
            banner: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
            interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
        },
        android: {
            banner: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
            interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
        },
        web: {
            banner: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
            interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
        }
    };

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

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

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

        await this.showBanner();
    }

    async showBanner() {
        const options = {
            bannerAdId: this.currentAdIds.banner,
            interstitialAdId: this.currentAdIds.interstitialAdId,
        };
        await this.admob.createBannerView(options);
        await this.admob.requestInterstitialAd(options);
    }
}

Capacitor

Stencil

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


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

    private adMobAdsPlugin: AdMobAdsPlugin;
    private options: IAdMobAdsOptions;
    private 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: {
            bannerAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
            interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
        }
    };

    setOptions() {
        const ids = this.getDeviceAdIds();
        this.options = {
            bannerAdId: ids.bannerAdId,
            interstitialAdId: ids.interstitialAdId,
        };
    }

    getDeviceAdIds() {
        if (/(android)/i.test(navigator.userAgent)){
            return this.adIds.android;
        } else if(/iPad|iPhone|iPod/i.test(navigator.userAgent)) {
            return this.adIds.ios;
        } else {
            return this.adIds.web;
        }
    }

    getIsDevice() {
        return /(android)/i.test(navigator.userAgent) || /iPad|iPhone|iPod/i.test(navigator.userAgent);
    }

    async componentWillLoad() {
        this.setOptions();
        if (!this.getIsDevice()) {
            Plugins.AdMobAds = AdMobAds;
        }
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        await this.adMobAdsPlugin.setOptions(this.options);
        await this.adMobAdsPlugin.createBannerView();
        await this.adMobAdsPlugin.requestInterstitialAd();
    }
}

Angular

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

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

    private adMobAdsPlugin: AdMobAdsPlugin;
    private isDevice: any;
    private currentAdIds: any;
    private adIds = {
        ios: {
            banner: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
            interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
        },
        android: {
            banner: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
            interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
        },
        web: {
            banner: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
            interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
        }
    };

    constructor(private platform: Platform) { }

    async ngOnInit() {
        if (this.platform.is('ios')) {
            this.isDevice = true;
            this.currentAdIds = adIds.ios;
        } else if (this.platform.is('android')) {
            this.isDevice = true;
            this.currentAdIds = adIds.android;
        } else {
            this.isDevice = false;
            this.currentAdIds = adIds.web;
        }
        if (this.isDevice) {
            this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
            document.addEventListener('deviceready', async () => await this.showBanner(), false);
        } else {
            registerWebPlugin(AdMobAds);
            this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
            await this.showBanner();
        }
    }

    async showBanner() {
        const options = {
            bannerAdId: this.currentAdIds.banner,
            interstitialAdId: this.currentAdIds.interstitialAdId,
        };
        await this.adMobAdsPlugin.createBannerView(options);
        await this.adMobAdsPlugin.requestInterstitialAd(options);
    }
}

React

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

export default class HomePage extends Component {
    private adMobAdsPlugin: AdMobAdsPlugin;
    private options: IAdMobAdsOptions | undefined;
    private adIds = {
        ios: {
            bannerAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
            interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
        },
        android: {
            bannerAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/android",
            interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
        },
        web: {
            bannerAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/web",
            interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
        }
    };

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

    getDeviceAdIds() {
        if (/(android)/i.test(navigator.userAgent)){
            return this.adIds.android;
        } else if(/iPad|iPhone|iPod/i.test(navigator.userAgent)) {
            return this.adIds.ios;
        } else {
            return this.adIds.web;
        }
    }

    setOptions() {
        const ids = this.getDeviceAdIds();
        this.options = {
            isTesting: true,
            bannerAdId: ids.bannerAdId,
            interstitialAdId: ids.interstitialAdId,
        };
        console.log('options', this.options);
    }

    getIsDevice() {
        return /(android)/i.test(navigator.userAgent) || /iPad|iPhone|iPod/i.test(navigator.userAgent);
    }

    async componentDidMount() {
        this.setOptions();
        if (!this.getIsDevice()) {
            this.adMobAdsPlugin = AdMobAds;
        }
        
        try {
            await this.adMobAdsPlugin.createBannerView(this.options);
        } catch (err) {
            console.log('createBannerView error', err);
        }
    }

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

Index | Setup | Home 

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