Capacitor setup

---

title: Capacitor Setup description: Capacitor Setup url: /capacitor-setup contributors:

• appfeel
• bitgenoma
• marcpascualsanchez
• miqmago

---

Setup

Install

To install the plugin with Capacitor follow the next command lines:

npm install admob-capacitor

*Note that depending on how you installed capacitor, you will access it by using one of the following commands:

npx cap sync
ionic cap sync

Android

Register to Capacitor

Register plugin to your capacitor APP by editing your MainAcitivity.java (at path yourProject/android/app/src/main/java) to look like the following (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 as a Capacitor Plugin
    }});
  }
}

Google AdMob configuration

Add your application id from AdMob in your AndroidManifest.xml (at path yourApp/android/app/src) inside the manifest tag (see official docs):

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

If you don't have any admob account and want to test it use the official android demo application ID: "ca-app-pub-3940256099942544~3347511713" used in the sample code.

Therefore AndroidManifest.xml should look more or less 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 your Info.plist

In your app's Info.plist file, add a GADApplicationIdentifier key with a string value of your AdMob app ID (identified in the AdMob UI) (see the official docs):

<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 you register the plugin as a web plugin using 'registerWebPlugin()'. Note that working on web, the 'deviceready' event will not fire, therefore the functionality can be used from the beginning.

Javascript

import { Plugins, registerWebPlugin } from '@capacitor/core';
let adMobAdsPlugin;
async function showBanner() {
    const options = {
        isTesting: true,
        bannerAdId: 'ca-app-pub-3940256099942544/6300978111', // Android official test
        isBannerAutoShow: true,
    };
    await adMobAdsPlugin.createBannerView(options);
}

let isDevice = true;
if (!(/(android)/i.test(navigator.userAgent)) && !(/iPad|iPhone|iPod/i.test(navigator.userAgent))) {
    isDevice = false;
}

if (isDevice) {
    adMobAdsPlugin = Plugins.AdMobAds;
    document.addEventListener('deviceready', async () => await showBanner(), false);
} else {
    registerWebPlugin(AdMobAds);
    adMobAdsPlugin = Plugins.AdMobAds;
    await showBanner();
}

Angular

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

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

    private adMobAdsPlugin: AdMobAdsPlugin | any;

    constructor(private platform: Platform) { }

    async ngOnInit() {
        if (this.platform.is('ios') || this.platform.is('android')) {
            // Running on a mobile device
            this.adMobAdsPlugin = Plugins.AdMobAds;
            await this.platform.ready();
        } else {
            // Running on a web browser
            registerWebPlugin(AdMobAds);
            this.adMobAdsPlugin = Plugins.AdMobAds;
        }
        await this.showBanner();
    }

    async showBanner() {
        const options = {
            isTesting: true,
            bannerAdId: 'ca-app-pub-3940256099942544/6300978111', // Android official test
            isBannerAutoShow: true,
        };
        await this.adMobAdsPlugin.createBannerView(options);
    }
}