Capacitor setup

---

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

• appfeel
• bitgenoma
• marcpascualsanchez
• miqmago

---

Setup

Requirements

Before following the setup make sure you have Capacitor in your project and you have added the corresponding platform (check the official docs).

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.
In browser we need to use AdSense instead of AdMob. Make sure your options are adapted, like this:

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

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

    private adMobAdsPlugin: AdMobAdsPlugin;
    private options: IAdMobAdsOptions | IAdMobAdsWebOptions;

    constructor() { }

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

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