How to Integrate Facebook Audience Network (FAN) Banner Ads in Android?

In order to earn money from the Android app or game, there are many ways such as in-App Purchases, Sponsorship, Advertisements, and many more. But there is another popular method to earn money from the Android app is by integrating a third party advertisement e.g known as Facebook Audience Network (FAN). Facebook Audience Network is designed to help monetize with the user experience in mind. By using high-value formats, quality ads, and innovative publisher tools it helps to grow the business while keeping people engaged.

Why Facebook Audience Network?

• Facebook Audience Network is one of the best alternatives for Google Admob to monetize the Android or IOS App.
• Minimum Payout is $100
• Wide Range of Ad Formats
• Maximum Fill Rates
• High eCPM(Effective Cost Per Mille)
• Quality Ads
• Personalized Ads

Formats of Facebook Audience Network

There are mainly five types of flexible, high-performing format available in Facebook Audience Network

• Native: Ads that you design to fit the app, seamlessly
• Interstitial: Full-screen ads that capture attention and become part of the experience.
• Banner: Traditional formats in a variety of placements.
• Rewarded Video: An immersive, user-initiated video ad that rewards users for watching.
• Playables: A try-before-you-buy ad experience allowing users to preview a game before installing.

In this article let's integrate Facebook Audience Network Banner ads in the Android app. Banner ad is a rectangular image or text ad which occupies a small space in the app layout. Banner ad is easy to implement and it doesn't affect user interface and increases the revenue gradually.

Approach

Step 1: Creating a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that choose Java as language though we are going to implement this project in Java language.

Step 2: Before going to the coding section first do some pre-task

• Go to app -> res -> values -> colors.xml file and set the colors for the app.

• Go to Gradle Scripts -> build.gradle (Module: app) section and import following dependencies and click the “sync now” on the above pop up.

 implementation 'com.facebook.android:audience-network-sdk:5.+'

• Go to app -> manifests -> AndroidManifests.xml section and allow "Internet Permission".

<uses-permission android:name="android.permission.INTERNET"/>

Step 3: Designing the UI 

In the activity_main.xml file, there are simply three Buttons is used. So whenever the user clicked on that button the desired Banner Ad will pop up. To contain the Banner Ad a LinearLayout is added inside the XML file. Here is the code for the activity_main.xml file.

Step 4: Working with MainActivity.java file

• Open the MainActivity.java file there within the class, first create the object of the Button class.

// Creating objects of Button class
Button fbBanner_50, fbBanner_90, fbBanner_250;

• Now inside the onCreate() method, link those objects with their respective IDs that is given in activity_main.xml file.

 // link those objects with their respective id's that we have given in activity_main.xml file 
fbBanner_50 = (Button)findViewById(R.id.banner_50);
fbBanner_90 = (Button)findViewById(R.id.banner_90);
fbBanner_250 = (Button)findViewById(R.id.banner_250);

• Now inside onCreate() method, initialize the Facebook Audience Network SDK

// initializing the Audience Network SDK
AudienceNetworkAds.initialize(this);

• Create a private void showBanner() method outside onCreate() method and define it.
• showBanner() method take AdSize as an Argument, to show banner with different Ad sizes

 private void showBanner(AdSize adSize)

{

       // creating object of AdView

       AdView bannerAd;

       // initializing AdView Object

       // AdView Constructor Takes 3 Arguments

       // 1)Context

       // 2)Placement Id

       // 3)AdSize

       bannerAd = new AdView(this, "IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID",adSize);

       // Creating and initializing LinearLayout which contains the ads

      LinearLayout adLinearContainer = (LinearLayout) findViewById(R.id.fb_banner_ad_container);

      // removing the views inside linearLayout

      adLinearContainer.removeAllViewsInLayout();

      // adding ad to the linearLayoutContainer

      adLinearContainer.addView(bannerAd);

      // loading Ad

       bannerAd.loadAd();

}

Note: Replace "IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID" with its own placement id to show real ads.

• So the next thing is to call the showBanner() method when a user clicks a respective banner ad button.
• Now in oncreate() method create a ClickListener for all the three buttons and call showBanner() with different AdSize.

       // click listener to show Banner_50 Ad

       fbBanner_50.setOnClickListener(new View.OnClickListener() {

           @Override

           public void onClick(View view) {

               showBanner(AdSize.BANNER_HEIGHT_50);

           }

       });

       // click listener to show Banner_90 Ad

       fbBanner_90.setOnClickListener(new View.OnClickListener() {

           @Override

           public void onClick(View view) {

               showBanner(AdSize.BANNER_HEIGHT_90);

           }

       });

       // click listener to show Banner_250 Ad

       fbBanner_250.setOnClickListener(new View.OnClickListener() {

           @Override

           public void onClick(View view) {

               showBanner(AdSize.RECTANGLE_HEIGHT_250);

           }

       });

• Now call setAdListener() for Banner Ad, so that users will know the status of the ads. To add  adListener open showBanner() method and add the below code before bannerAd.loadAd();

       // banner AdListener

       bannerAd.setAdListener(new AdListener() {

           @Override

           public void onError(Ad ad, AdError adError) {

               // Showing a toast message

               Toast.makeText(MainActivity.this, "onError", Toast.LENGTH_SHORT).show();

           }

           @Override

           public void onAdLoaded(Ad ad) {

               // Showing a toast message

               Toast.makeText(MainActivity.this, "onAdLoaded", Toast.LENGTH_SHORT).show();

           }

           @Override

           public void onAdClicked(Ad ad) {

               // Showing a toast message

               Toast.makeText(MainActivity.this, "onAdClicked", Toast.LENGTH_SHORT).show();

           }

           @Override

           public void onLoggingImpression(Ad ad) {

               // Showing a toast message

               Toast.makeText(MainActivity.this, "onLoggingImpression", Toast.LENGTH_SHORT).show();

           }

       });

• And inside AdListener Override methods to show a toast message so that users know the status of the ad. Below is the complete code for the MainActivity.java file.

Output: Run on Emulator