rahadurr / capacitor-mopub

This is Ionic Capacitor native MoPub plugin for IOS & Android

Capacitor MoPub 💸

Capacitor MoPub is a native Twitter MoPub implementation for IOS & Android. Now you can use this package as a Ionic Capacitor Plugin in your App.

Release Note 0.1.0:

NOTE: This is the Initial release of this plugins. You may find some issue in this version. Please feel free to create an Issue.

Supported Platform

• Android
• [] iOS
• [] Electron

Other Plugins:

Plugins	Android	iOS	Electron	PWA
AdMob	✅	❌	❌	❌

MoPub Demo App

Screenshot

Basic Banner	TabBar Banner	Interstitial	RewardVideo

Download

Download Demo App from Here

cd demo

npm install

ionic build

npx cap copy

npx cap sync 

npx cap update

npx cap open android

============== Or just use this command ===========

npm install & ionic build & npx cap copy & npx cap sync & npx cap update & npx cap open android

Installation

Use MoPub plugins in your app.

 npm install --save capacitor-mopub

📌 Register MoPub to Capacitor

Open your Ionic Capacitor App in Android Studio, Now open MainActivity.java of your app and Register MoPub to Capacitor Plugins.

// Other imports...
import app.xplatform.capacitor.MoPub;

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

    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      
      add(MoPub.class);  // Add MoPub as a Capacitor Plugin

    }});
  }
}

📌 BANNER

prepareBanner(options: AdOptions): Promise<{ value: boolean }>

import { Plugins } from '@capacitor/core';
import { AdOptions, AdSize } from 'capacitor-mopub';

const { MoPub } = Plugins;

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


    constructor() {}

    ngOnInit() {
      // Show Banner Ad
      const options: AdOptions = {
        adId: 'b195f8dd8ded45fe847ad89ed1d016da',
        adSize: AdSize.MATCH_VIEW,
        autoShow: true,
        autoRefresh: true
      }


      // Register to an Event Listener
      MoPub.prepareBanner(options)
        .then(
          (value) => { console.log(value); }, // true
          (error) => { console.error(error); } // show error
        );
    }
}

hideBanner(): Promise<{ value: boolean }>

// Hide the banner, remove it from screen, but can show it later

MoPub.hideBanner()
  .then(
    (value) => { console.log(value); }, // true
    (error) => { console.error(error); } // show error
  );

resumeBanner(): Promise<{ value: boolean }>

// Resume the banner, show it after hide

MoPub.resumeBanner().then(
    (value) => { console.log(value); }, // true
    (error) => { console.error(error); } // show error
);

removeBanner(): Promise<{ value: boolean }>

// Destroy the banner, remove it from screen.

MoPub.removeBanner()
  .then(
    (value) => { console.log(value); }, // true
    (error) => { console.error(error); } // show error
  );

Event Listener

This following Event Listener can be called in Banner AD.

addListener(eventName: 'onAdLoaded', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onBannerFailed', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onBannerClicked', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onBannerExpanded', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onBannerCollapsed', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onBannerPrepared', listenerFunc: (info: any) => void): PluginListenerHandle;

📌 INTERSTITIAL

prepareInterstitial(options: AdOptions): Promise<{ value: boolean }>

import { Plugins } from '@capacitor/core';
import { AdOptions, AdSize } from 'capacitor-mopub';

const { MoPub } = Plugins;

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


    constructor() {}

    ngOnInit() {
      // Interstitial Ad Optios
      const options: AdOptions = {
        adId: '24534e1901884e398f1253216226017e',
        autoShow: true,
        isTesting: true
      }

      // Prepare Interstial Ad
      MoPub.prepareInterstitial(options)
        .then(
          (value) => { console.log(value); }, // true
          (error) => { console.error(error); } // show error
        );
    }


    // Show Interstitial Ads
    showInterstitial() {
      
      MoPub.showInterstitial()
        .then(
          (value) => { console.log(value); }, // true
          (error) => { console.error(error); } // show error
        );
    }   
}

showInterstitial(): Promise<{ value: boolean }>

// Show interstitial ad when it’s ready

MoPub.showInterstitial()
  .then(
    (value) => { console.log(value); }, // true
    (error) => { console.error(error); } // show error 
  );

Event Listener

This following Event Listener can be called in Interstitial AD

addListener(eventName: 'onInterstitialLoaded', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onInterstitialFailed', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onInterstitialShown', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onInterstitialClicked', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onInterstitialDismissed', listenerFunc: (info: any) => void): PluginListenerHandle;

📌 RewardVideo

prepareRewardVideo(options: AdOptions): Promise<{ value: boolean }>

import { Plugins } from '@capacitor/core';
import { AdOptions, AdSize } from 'capacitor-mopub';

const { MoPub } = Plugins;

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


    constructor() {}

    ngOnInit() {
      // RewardVideo Ad Optios
      const options: AdOptions = {
        adId: '920b6145fb1546cf8b5cf2ac34638bb7',
        autoShow: true,
        isTesting: true
      }

      // Prepare RewardVideo Ad
      MoPub.prepareRewardVideo(options)
        .then(
          (value) => { console.log(value); },
          (error) => { console.log(error); }
        );
    }


    // Show RewardVideo Ads
    showRewardVideo() {
      MoPub.showRewardVideo()
        .then(
          (value) => { console.log(value); }, // true
          (error) => { console.error(error); } // show error
        );
  }  
}

showRewardVideoAd(): Promise<{ value: boolean }>

// Show a RewardVideo AD

MoPub.showRewardVideo()
    .then(
      (value) => { console.log(value); }, // true
      (error) => { console.error(error); } // show error
    );

Event Listener

This following Event Listener can be called in RewardedVideo

addListener(eventName: 'onRewardedVideoLoadSuccess', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onRewardedVideoLoadFailure', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onRewardedVideoStarted', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onRewardedVideoPlaybackError', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onRewardedVideoClicked', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onRewardedVideoClosed', listenerFunc: (info: any) => void): PluginListenerHandle;

addListener(eventName: 'onRewardedVideoCompleted', listenerFunc: (info: any) => void): PluginListenerHandle;

API

📌 AdOptions

interface AdOptions {
  adId: string;       // Banner ad ID (required)
  adSize?: AdSize;
  hasTabBar?: boolean;
  tabBarHeight?: number; // Height in Pixal
  isTesting?: boolean;
  autoShow?: boolean;
  autoRefresh?: boolean;
  userId?: string;
}

📌 AdSize

enum AdSize {

  MATCH_VIEW = 'MATCH_VIEW',

  HEIGHT_50 = 'HEIGHT_50',

  HEIGHT_90 = 'HEIGHT_90',

  HEIGHT_250 = 'HEIGHT_250',

  HEIGHT_280 = 'HEIGHT_280'
}

Contributing

• 🌟 Star this repository
• 📋 Open issue for feature requests

Roadmap

• Capacitor Plugins

• IOS

• Android

License

Capacitor AdMob is MIT licensed.