Capacitor setup

Setup

Requirements

Make sure you have Capacitor properly configured with the corresponding android or ios platform (see official docs).

Install

Install the plugin as a standard npm package:

npm install admob-capacitor

Depending on how you installed Capacitor, sync the project using the corresponding instruction:

npx cap sync
ionic cap sync

Android

Initialize the plugin

Register the plugin in Android app by editing the MainAcitivity.java, located at yourProject/android/app/src/main/java. It should look like the following one (see official docs):

package io.ionic.starter; // Mantain your own package here

import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import java.util.ArrayList;
import com.appfeel.ionic.plugin.capacitor.admob.AdMobAds;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      add(AdMobAds.class); // Add AdMobAds Capacitor Plugin
    }});
  }
}

Google AdMob configuration

Add AdMob application id inside AndroidManifest.xml, located at yourApp/android/app/src.

See how to get your app id here. If you don't have an admob account yet, you can use the official android demo application ID: ca-app-pub-3940256099942544~3347511713.

Place it inside meta-data tag (see official docs):

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="ca-app-pub-3940256099942544~3347511713"/>

At the end, AndroidManifest.xml should look like this:

<?xml version="1.0" encoding="utf-8"?>
<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="ca-app-pub-3940256099942544~3347511713"/>

    <activity
        android:name=".MainActivity"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

IOS

Update Info.plist

Add GADApplicationIdentifier key with the AdMob app id as string value inside Info.plist (see the official docs).

See how to get your app id here. If you don't have an admob account yet, you can use the official android demo application ID: ca-app-pub-3940256099942544~3347511713.

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>

Web

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 loaded.

In browser it is required to use AdSense instead of AdMob. Make sure to properly configure it:

Stencil

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

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

    async componentWillLoad() {
        let options: IAdMobAdsOptions | IAdMobAdsWebOptions;
        if (/android|iPad|iPhone|iPod/i.test(navigator.userAgent)) {
            options = {
                bannerAdId: 'ca-app-pub-3940256099942544/6300978111', // AdMob Android official test
            };
        } else {
            registerWebPlugin(AdMobAds);
            options = {
                publisherId: 'ca-app-pub-XXXXXXXXXXXXXXXX', // AdSense
                adSlot: 'BBBBBBBBBB', // AdSense
            };
        }
        const adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        try {
            await adMobAdsPlugin.createBannerView(options);
            await adMobAdsPlugin.showBannerAd({ show: true });
        } catch (err) {
            console.log('createBannerView error', err);
        }
    }
}

Angular

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

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

    constructor(private platform: Platform) { }

    async ngOnInit() {
        let options: IAdMobAdsOptions | IAdMobAdsWebOptions;
        if (this.platform.is('ios') || this.platform.is('android')) {
            // Running on a mobile device
            options = {
                bannerAdId: 'ca-app-pub-3940256099942544/6300978111', // AdMob Android official test
            };
        } else {
            // Running on a web browser
            registerWebPlugin(AdMobAds);
            options = {
                publisherId: 'ca-app-pub-XXXXXXXXXXXXXXXX', // AdSense
                adSlot: 'BBBBBBBBBB', // AdSense
            };
        }
        const adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        try {
            await adMobAdsPlugin.createBannerView(options);
            await adMobAdsPlugin.showBannerAd({ show: true });
        } catch (err) {
            console.log('createBannerView error', err);
        }
    }
}

React

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

export default class HomePage extends Component {

    async componentDidMount() {
        let options: IAdMobAdsOptions | IAdMobAdsWebOptions;
        if (/android|iPad|iPhone|iPod/i.test(navigator.userAgent)) {
            options = {
                bannerAdId: 'ca-app-pub-3940256099942544/6300978111', // AdMob Android official test
            };
        } else {
            registerWebPlugin(AdMobAds);
            options = {
                publisherId: 'ca-app-pub-XXXXXXXXXXXXXXXX', // AdSense
                adSlot: 'BBBBBBBBBB', // AdSense
            };
        }
        const adMobAdsPlugin = Plugins.AdMobAds as AdMobAdsPlugin;
        try {
            await adMobAdsPlugin.createBannerView(options);
            await adMobAdsPlugin.showBannerAd({ show: true });
        } catch (err) {
            console.log('createBannerView error', err);
        }
    }

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