Capacitor first steps

First steps

Android & iOS mobile apps

To use the plugin see the following implementations. Keep in mind that the ids used in the example are for Android dev tests. If you do not replace them, use the isTest option.

Stencil

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

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

    private adMobAdsPlugin: AdMobAdsPlugin;

    async componentWillLoad() {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        await this.adMobAdsPlugin.createBannerView({ bannerAdId: 'ca-app-pub-3940256099942544/6300978111' });
    }
}

Angular

import { Component, OnInit } from '@angular/core';
import { Plugins } from '@capacitor/core';

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

    private adMobAdsPlugin: AdMobAdsPlugin;

    async ngOnInit() {
        this.adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        await this.adMobAdsPlugin.createBannerView({ bannerAdId: 'ca-app-pub-3940256099942544/6300978111' });
    }
}

React

import React, { Component } from 'react';
import { AdMobAdsPlugin } 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() {
        await this.adMobAdsPlugin.createBannerView({ bannerAdId: 'ca-app-pub-3940256099942544/6300978111' });
    }

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

Angular is referring to Angular2 version and up, for AngularJS (Angular1) see this example.

Web browser

If you are willing to use this plugin in browser using Capacitor, make sure to register the plugin as a web plugin using registerWebPlugin(). Note that the deviceready event will not be fired in browsers and the plugin will be immediately available after page has loaded.

In browser AdSense will be used instead of AdMob. Make sure to properly configure it:

Stencil

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

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

    async componentWillLoad() {
        registerWebPlugin(AdMobAds);
        const adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        let options: IAdMobAdsOptions | IAdMobAdsWebOptions = {
            publisherId: 'ca-app-pub-XXXXXXXXXXXXXXXX', // AdSense
            adSlot: 'BBBBBBBBBB', // AdSense
        };
        await adMobAdsPlugin.createBannerView(options);
    }

    render() {
        return 'Awesome monetized content';
    }
}

Angular

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

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

    constructor() { }

    async ngOnInit() {
        registerWebPlugin(AdMobAds);
        const adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        let options: IAdMobAdsOptions | IAdMobAdsWebOptions = {
            publisherId: 'ca-app-pub-XXXXXXXXXXXXXXXX', // AdSense
            adSlot: 'BBBBBBBBBB', // AdSense
        };
        await adMobAdsPlugin.createBannerView(options);
    }
}

React

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

export default class HomePage extends Component {

    async componentDidMount() {
        registerWebPlugin(AdMobAds);
        const adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        let options: IAdMobAdsOptions | IAdMobAdsWebOptions = {
            publisherId: 'ca-app-pub-XXXXXXXXXXXXXXXX', // AdSense
            adSlot: 'BBBBBBBBBB', // AdSense
        };
        await adMobAdsPlugin.createBannerView(options);
    }

    render() {
        return 'Awesome monetized content';
    }
}