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.
colors.xml
<?xml version="1.0" encoding="utf-8"?><resources> <color name="colorPrimary">#0F9D58</color> <color name="colorPrimaryDark">#0F9D58</color> <color name="colorAccent">#05af9b</color></resources> |
- 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.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!-- Button to Show BANNER_50 Ad By Clicking it --> <Button android:id="@+id/banner_50" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="40dp" android:background="@color/colorPrimary" android:padding="16dp" android:text="Show BANNER_50" android:textColor="#ffff" android:textSize="24dp" /> <!-- Button to Show BANNER_90 Ad By Clicking it --> <Button android:id="@+id/banner_90" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/banner_50" android:layout_margin="40dp" android:background="@color/colorPrimary" android:padding="16dp" android:text="Show BANNER_90" android:textColor="#ffff" android:textSize="24dp" /> <!-- Button to Show RECTANGLE_HEIGHT_250 Ad By Clicking it --> <Button android:id="@+id/banner_250" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/banner_90" android:layout_margin="40dp" android:background="@color/colorPrimary" android:padding="16dp" android:text="Show RECTANGLE_HEIGHT_250" android:textColor="#ffff" android:textSize="24dp" /> <!-- LinearLayout to contain the Banner Ads --> <LinearLayout android:id="@+id/fb_banner_ad_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="vertical" /> </RelativeLayout> |
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.
MainActivity.java
package org.neveropen.project; import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.LinearLayout;import android.widget.Toast;import androidx.appcompat.app.AppCompatActivity;import com.facebook.ads.Ad;import com.facebook.ads.AdError;import com.facebook.ads.AdListener;import com.facebook.ads.AdSize;import com.facebook.ads.AdView;import com.facebook.ads.AudienceNetworkAds; public class MainActivity extends AppCompatActivity { // Creating a objects of Button class Button fbBanner_50, fbBanner_90, fbBanner_250; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 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); // initializing the Audience Network SDK AudienceNetworkAds.initialize(this); // 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); } }); } 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); // 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(); } }); // loading Ad bannerAd.loadAd(); }} |
