[Tutorial] How to implement StartApp Ads in your Ionic App

Hello guys today Im exited to tell you that I have created a Cordova Plugin for StartApp Ads to use it with Ionic.

Many of us dont want to use Admob anymore because they got banned or dont like it or for any other reason.
I got banned aswell (because I got click bombed by someone) and couldnt find any alternativ ad network which is supported by ionic/cordova.

So I searched and found NOTHING. Most plugins where outdated or didnt work, but I wanted something simular like Admob. And I found it. www.startapp.com. They have almost the same dashboard and analytics and to use it you only have to add your App and you get the App ID. Thats all you need. Nothing complicated.

My Plugin is developed simular to the admob-free, admob-plus plugin we all know so if you implemented it once you have an easy time to use my plugin too.

But here is the catch: Currently I only have implemented Android Support. Im working hard to implement iOS aswell. Just stay tuned and GitHub for Updates and Documentation Updates! :slight_smile:

Well now lets start to use it! :smiley:
(If it helped you to reduce developing time It would be nice if you can give me a star :slight_smile: )

Ionic 3+ Implementation

1. Installation

First you need to install the cordova plugin in your Ionic Project with Cordova CLI

ionic cordova plugin add cordova-plugin-startapp-ads

or with URL

ionic cordova plugin add https://github.com/lreiner/cordova-plugin-startapp-ads.git

2. Setup the Plugin

To start declare the Plugin below your imports:
NOTE: This must be declared in every Page where you want to use StartAppAds!

import ..... //your imports
declare var StartAppAds:any;

Now you need to init your Plugin with your App ID from StartApp first. I would recommend to do it in your app.component.ts file when platfrom is ready.

this.platform.ready().then(() => {
  if(this.platform.is("android")) {
    StartAppAds.init("<your-android-app-id>");
  }
});

Nice! :slight_smile: Now you can use StartAppAds everywhere in your project.

3. Show/Hide Banner Ads

Show a Banner Ad on the bottom of your app. (I recommend to either do this in app.components.ts or in the constructor of any other page).

StartAppAds.showBanner();

Hide the Banner

StartAppAds.hideBanner();

Events you can subscribe to (recommended to put it in the constructor of any page):

document.addEventListener('startappads.banner.load', () => {
  //banner has been loaded and displayed.
  //do something here
});

document.addEventListener('startappads.banner.load_fail', () => {
  //banner failed to load
  //do something here
  //IMPORTANT: if banner failed to load dont use StartAppAds.showBanner(); again. StartAppAds will load a new one by itself!
});

document.addEventListener('startappads.banner.clicked', () => {
  //banner has been clicked
  //do something here. Usefull to hide banner to prevent click bombing.
});

document.addEventListener('startappads.banner.hide', () => {
  //banner has been removed
  //do something here
});

4. Show Interstitial Ads

Show a Interstitial Ad:

StartAppAds.showInterstitial();

Events you can subscribe to (recommended to put it in the constructor of any page):

document.addEventListener('startappads.interstitial.closed', () => {
  //interstitial closed by user
  //do something here
});

document.addEventListener('startappads.interstitial.displayed', () => {
  //interstitial showed up
  //do something here
});

document.addEventListener('startappads.interstitial.clicked', () => {
  //interstitial clicked by user
  //do something here
});

document.addEventListener('startappads.interstitial.not_displayed', () => {
  //interstitial loaded and ready but somehow not showed to user
  //do something here
});

document.addEventListener('startappads.interstitial.load_fail', () => {
  //interstitial failed to load
  //do something here
});

5. Show Rewarded Video Ads

Show a Rewarded Video Ad:

StartAppAds.showRewardVideo();

Events you can subscribe to (recommended to put it in the constructor of any page):

document.addEventListener('startappads.reward_video.reward', () => {
  //user watched video reward can be given now
  //do something here
});

document.addEventListener('startappads.reward_video.load', () => {
  //reward video finished loading
  //do something here
});

document.addEventListener('startappads.reward_video.load_fail', () => {
  //reward video failed to load. Probably no Ads available at the moment
  //do something here
});

Thats it! :wink: Have fun to use it!

3 Likes

Thank you very much, friend, I was just reviewing the documentation for cordova, I am implementing the sdk, regards from Mexico.

2 Likes

Hi Lukas,
I hope you are very well, just to thank you for your work, it was very helpful, and to tell you that as soon as I get rid of this development I would like to fork your project to implement the native ads, I hope it may be possible.

Cheers

I did every thing you said but after running the app on browser (ionic serve), I got this error (StartAppAds is not defined), and Iā€™m using ionic4, what can I do ? please help

Hello, I did all you said but is still not working please help

Can you help me to integrate Startapp Ads in my ionic 4 app ?

In Browser that cordova plugin doesnt work. It only works on real devices.
If you use it in browser this error happens.

If you use a device and have this error it means you didnt implement it correctly.

can you make video how to implement startapp plugin with ionic because I did every thing you wrote here and its not working yet

I have done every thing you wrote here and its not working yet.