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

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

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';
    }
}