Facebook Banner and Interstitial Ads: Ionic 2

Today lets implement Facebook Audience Network’s Banner Ads and Interstitial Ads in our Ionic 2 project.

We’ve installed a blank template for this tutorial

ionic start technotip blank --v2

We create a Ionic 2 project by name ‘technotip’ with blank template.

Related Read: Ionic 2 Starter Templates

Audience Network’s Banner Ads and Interstitial Ads: Ionic 2

Package version information:

C:\ionic2\technotip>ionic info
 
Your system information:
 
Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.7.0
Xcode version: Not installed

Steps To Follow
Step 1: Install FacebookAds plugin
Step 2: Add Platform
Step 3: Implement Facebook Audience Network’s Ads into your Ionic 2 project
Step 4: Install your Ionic 2 app to your device to test Facebook Audience Network’s ads.

Note: Make sure to navigate to your ionic 2 project folder before executing any commands.
Example: Our Ionic 2 project name is ‘technotip’, which is inside a folder called ionic2. So I execute all commands once I get inside our project folder.

C:\>cd ionic2
C:\ionic2>cd technotip
C:\ionic2\technotip>ionic serve -l -c

Step 1: Install FacebookAds plugin

ionic plugin add cordova-plugin-facebookads

This installs FacebookAds plugin to our Ionic 2 project.

Step 2: Add Platform

ionic platform add android
 
OR
 
ionic platform add ios

If you are developing ios app, then add ios platform(for this, you must be on a Mac). If you’re developing android app, then add android as platform. If you face any difficulty with this step or in installing Ionic framework, please refer to Ionic 2 Starter Templates video tutorial.

Step 3: Implement Facebook Ads into your Ionic 2 project
1. Banner Ads

To show banner ads in all the views of our app, we need to code it inside src/app/app.component.ts

   if(FacebookAds)
      {
        let options = {
          adId: '763416880384578_1088816394511290',
          adSize: 'SMART_BANNER',
          isTesting: false,
          autoShow: true
        };
        FacebookAds.createBanner(options, function(data){
          FacebookAds.showBanner(8);
        }, function(err){});
      }

Pass configuration information to createBanner() method as first parameter. Second parameter is a success callback and third parameter is an error callback. Inside success callback, we can call showBanner() method which takes position number as a parameter.

isTesting – takes boolean value. It is set to true while development and set to false in production. Default value is false.

FacebookAds Object Value

{
"AD_SIZE":
    {
        "SMART_BANNER":"SMART_BANNER",
        "BANNER":"BANNER",
        "MEDIUM_RECTANGLE":"MEDIUM_RECTANGLE",
        "FULL_BANNER":"FULL_BANNER",
        "LEADERBOARD":"LEADERBOARD",
        "SKYSCRAPER":"SKYSCRAPER"},
 "AD_POSITION":
    {
        "NO_CHANGE":0,
        "TOP_LEFT":1,
        "TOP_CENTER":2,
        "TOP_RIGHT":3,
        "LEFT":4,
        "CENTER":5,
        "RIGHT":6,
        "BOTTOM_LEFT":7,
        "BOTTOM_CENTER":8,
        "BOTTOM_RIGHT":9,
        "POS_XY":10
    }
}

Configure your FacebookAds options using above values.

Important Note: If you’re placing any Ionic Native Plugins code inside constructor, then make sure to wrap it around Platform.ready() method orelse it’ll start throwing errors. Since code inside constructor executes as soon as the class is instantiated, the external libraries might not yet have loaded, which causes the code inside constructor to break. If we wrap the code inside platform ready, the code executes only after the device platform is ready.

Full Source Code: src/app/app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { HomePage } from '../pages/home/home';
 
declare var FacebookAds: any;
 
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;
  constructor(platform: Platform) {
    platform.ready().then(() => {
      if(FacebookAds)
      {
        let options = {
          adId: '763416880384578_1088816394511290',
          adSize: 'SMART_BANNER',
          isTesting: false,
          autoShow: true
        };
        FacebookAds.createBanner(options, function(data){
          FacebookAds.showBanner(8);
        }, function(err){
          console.log(JSON.stringify(err));
        });
      }
    });
  }
}

Make sure to declare FacebookAds variable(of type any) at the top.

2. Interstitial Ad
We shall invoke an interstitial ad once the user clicks on a button – for demo purpose.

src/pages/home/home.html

  < p>
    < button ion-button (click)="loadAd();">Show Ad< /button>
  < /p>

We’ve added the button to our UI. Once the user clicks on the button, we invoke loadAd() method.

src/pages/home/home.ts

  loadAd(){
    if(FacebookAds)
    {
      let options = {
        adId: '763416880384578_900057893387142'
      };
      FacebookAds.prepareInterstitial(options, function(data){
        FacebookAds.showInterstitial();
      }, function(err){})
    }
  };

we pass interstitial ad units adId to prepareInterstitial() method and then once the success callback is returned we invoke showInterstitial() method.

Full Source Code: src/pages/home/home.ts

import { Component } from '@angular/core';
 
import { NavController } from 'ionic-angular';
 
import { Platform } from 'ionic-angular';
 
declare var FacebookAds: any;
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
 
  constructor(public navCtrl: NavController, platform: Platform) {
    platform.ready().then(() => {});
  }
  loadAd(){
    if(FacebookAds)
    {
      let options = {
        adId: '763416880384578_900057893387142'
      };
      FacebookAds.prepareInterstitial(options, function(data){
        FacebookAds.showInterstitial();
      }, function(err){})
    }
  };
}

Make sure to declare FacebookAds variable at the top of home component.

other methods:

FacebookAds.removeBanner();
FacebookAds.showBannerAtXY(x, y);
FacebookAds.hideBanner();

Step 4: Install your Ionic 2 app to your device to test Facebook Audience Network ads

ionic run android -l -c

If you include -l and -c options while installing the project to your device, then you’ll get the live reload and log facility. But you need to be connected to the same network as your terminal where you’re ionic 2 project is running. For Example: Same WiFi for your device as well as your terminal. If your computer is using WiFi and your mobile is using service providers Data connection then this won’t work – in such case use ionic run android command, and you won’t get live reload and log information in the terminal.

Troubleshoot
If you’re getting following errors:
cordova_not_found

OR

int org.json.JSONObject.length() on null

Check these 3 things:
1. You’ve installed proper plugin. Check using ionic plugin list command.
2. You’ve declared FacebookAds variable at the top of the component file.
3. You’ve wrapped the plugins service code inside Platform.ready() method.

If all above 3 conditions are set right, then try this:

Remove platform and add it once again.

ionic platform rm android

ionic platform add android

Now install the project ionic run android -l -c to your device and check.

Important Note: Most Ionic plugins work only on the real devices, so do not try to test it using browsers.