How to Integrate Facebook Audience Network (FAN) Native 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 Native Ads in the Android app.
Native Ads:
A Native Ads ad is used to build a customized experience for the ads of the app. The eCPM (Effective Cost Per Mille) of Native Ads ads are relatively higher than banner ads and also leads to higher CTR(Click Through Rate) which results in more earning from the app. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
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.
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 the following dependencies and click the “sync Now” on the above pop up.
implementation ‘com.facebook.android:audience-network-sdk:5.+’
- Go to app > manifests > AndroidManifest.xml section and allow “Internet Permission“.
<uses-permission android:name=”android.permission.INTERNET” />
Step 3: Designing the UI
- Create a new layout, which contains the layout of the native ad. Go to app > res > layout > right-click > New > Layout Resource File and name the file as fan_native_ad_layout.
- Below is the code for the fan_native_ad_layout.xml file. Comments are added inside the code to understand the code in more detail.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:id="@+id/ad_unit" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:orientation="vertical" android:padding="10dp"> <!-- Liner layout which contain icon, title, sponsored text, ad choices --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:paddingTop="10dp" android:paddingBottom="10dp"> <!-- MediaView to show icon of the ad --> <com.facebook.ads.MediaView android:id="@+id/native_ad_icon" android:layout_width="35dp" android:layout_height="35dp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:paddingLeft="5dp" android:paddingRight="5dp"> <!-- TextView to show title of the ad --> <TextView android:id="@+id/native_ad_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" android:lines="1" android:textColor="@android:color/black" android:textSize="15sp" /> <!-- TextView to show Sponsored Text --> <TextView android:id="@+id/native_ad_sponsored_label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" android:lines="1" android:textColor="@android:color/darker_gray" android:textSize="12sp" /> </LinearLayout> <!-- Ad choice container --> <LinearLayout android:id="@+id/ad_choices_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="end" android:orientation="horizontal" /> </LinearLayout> <!-- Media view to show ad --> <com.facebook.ads.MediaView android:id="@+id/native_ad_media" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="5dp"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="3" android:orientation="vertical"> <!-- textView of ad social context --> <TextView android:id="@+id/native_ad_social_context" android:layout_width="match_parent" android:layout_height="wrap_content" android:ellipsize="end" android:lines="1" android:textColor="@android:color/darker_gray" android:textSize="12sp" /> <!-- textView of ad body --> <TextView android:id="@+id/native_ad_body" android:layout_width="match_parent" android:layout_height="wrap_content" android:ellipsize="end" android:gravity="center_vertical" android:lines="2" android:textColor="@android:color/black" android:textSize="12sp" /> </LinearLayout> <!-- install or download button --> <Button android:id="@+id/native_ad_call_to_action" android:layout_width="100dp" android:layout_height="30dp" android:layout_gravity="center_vertical" android:layout_weight="1" android:background="#4286F4" android:paddingLeft="3dp" android:paddingRight="3dp" android:textColor="@android:color/white" android:textSize="12sp" android:visibility="gone" /> </LinearLayout> </LinearLayout> |
- Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!-- Simple Scroll View --> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="80dp"> <!-- NativeAdLayout --> <com.facebook.ads.NativeAdLayout android:id="@+id/native_ad_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" /> </ScrollView> <!-- Button to show ad when clicked --> <Button android:id="@+id/showNativeAdBtn" android:layout_width="match_parent" android:layout_height="80dp" android:layout_alignParentBottom="true" android:background="@color/colorPrimary" android:text="Show Native Ad" android:textColor="#ffffff" /> </RelativeLayout> |
Step 4: Working with MainActivity.java file
- Open the MainActivity.java file there within the class, first of all, create the object of NativeAdLayout, LinearLayout, NativeAd class.
// creating NativeAdLayout object
private NativeAdLayout nativeAdLayout;
// creating LinearLayout object
private LinearLayout adView;
// creating NativeAd object
private NativeAd nativeAd;
- Now inside the onCreate() method, initialize the Facebook Audience Network SDK.
// initializing the Audience Network SDK
AudienceNetworkAds.initialize(this);
- Create a private void loadNativeAd() method outside onCreate() method and define it.
- Inside loadNativeAd() add ad listener to the native ad and show the relative Toast Message.
- And inside onAdLoaded() method call the inflateAd() ,which we create later.
// loading native Ad
private void loadNativeAd() {
// initializing nativeAd object
nativeAd = new NativeAd(this, “YOUR_PLACEMENT_ID”);
// creating NativeAdListener
NativeAdListener nativeAdListener = new NativeAdListener() {
@Override
public void onMediaDownloaded(Ad ad) {
// showing Toast message
Toast.makeText(MainActivity.this, “onMediaDownloaded”, Toast.LENGTH_SHORT).show();
}
@Override
public void onError(Ad ad, AdError adError) {
// showing Toast message
Toast.makeText(MainActivity.this, “onError”, Toast.LENGTH_SHORT).show();
}
@Override
public void onAdLoaded(Ad ad) {
// showing Toast message
Toast.makeText(MainActivity.this, “onAdLoaded”, Toast.LENGTH_SHORT).show();
if (nativeAd == null || nativeAd != ad) {
return;
}
// Inflate Native Ad into Container
inflateAd(nativeAd);
}
@Override
public void onAdClicked(Ad ad) {
// showing Toast message
Toast.makeText(MainActivity.this, “onAdClicked”, Toast.LENGTH_SHORT).show();
}
@Override
public void onLoggingImpression(Ad ad) {
// showing Toast message
Toast.makeText(MainActivity.this, “onLoggingImpression”, Toast.LENGTH_SHORT).show();
}
};
// Load an ad
nativeAd.loadAd(
nativeAd.buildLoadAdConfig()
.withAdListener(nativeAdListener)
.build());
}
Note:
- Replace “YOUR_PLACEMENT_ID” with your own placement id to show real ads.
- Facebook does not provide any test ids, so you have to create FAN account and then create new placement id and then add your device test AD id in the FAN to get ads in your app.
- Now create a void inflateAd, which will inflate the views from fan_native_ad_layout.xml and activity_main.xml file and show the ad to the user.
// inflating the Ad
void inflateAd(NativeAd nativeAd) {
// unregister the native Ad View
nativeAd.unregisterView();
// Add the Ad view into the ad container.
nativeAdLayout = findViewById(R.id.native_ad_container);
LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
// Inflate the Ad view.
adView = (LinearLayout) inflater.inflate(R.layout.fan_native_ad_layout, nativeAdLayout, false);
// adding view
nativeAdLayout.addView(adView);
// Add the AdOptionsView
LinearLayout adChoicesContainer = findViewById(R.id.ad_choices_container);
AdOptionsView adOptionsView = new AdOptionsView(MainActivity.this, nativeAd, nativeAdLayout);
adChoicesContainer.removeAllViews();
adChoicesContainer.addView(adOptionsView, 0);
// Create native UI using the ad metadata.
MediaView nativeAdIcon = adView.findViewById(R.id.native_ad_icon);
TextView nativeAdTitle = adView.findViewById(R.id.native_ad_title);
MediaView nativeAdMedia = adView.findViewById(R.id.native_ad_media);
TextView nativeAdSocialContext = adView.findViewById(R.id.native_ad_social_context);
TextView nativeAdBody = adView.findViewById(R.id.native_ad_body);
TextView sponsoredLabel = adView.findViewById(R.id.native_ad_sponsored_label);
Button nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action);
// Setting the Text.
nativeAdTitle.setText(nativeAd.getAdvertiserName());
nativeAdBody.setText(nativeAd.getAdBodyText());
nativeAdSocialContext.setText(nativeAd.getAdSocialContext());
nativeAdCallToAction.setVisibility(nativeAd.hasCallToAction() ? View.VISIBLE : View.INVISIBLE);
nativeAdCallToAction.setText(nativeAd.getAdCallToAction());
sponsoredLabel.setText(nativeAd.getSponsoredTranslation());
// Create a list of clickable views
List<View> clickableViews = new ArrayList<>();
clickableViews.add(nativeAdTitle);
clickableViews.add(nativeAdCallToAction);
// Register the Title and button to listen for clicks.
nativeAd.registerViewForInteraction(
adView, nativeAdMedia, nativeAdIcon, clickableViews);
}
- Below is the complete code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.widget.Button;import android.widget.LinearLayout;import android.widget.TextView;import android.widget.Toast;import androidx.appcompat.app.AppCompatActivity;import com.facebook.ads.Ad;import com.facebook.ads.AdError;import com.facebook.ads.AdOptionsView;import com.facebook.ads.AudienceNetworkAds;import com.facebook.ads.MediaView;import com.facebook.ads.NativeAd;import com.facebook.ads.NativeAdLayout;import com.facebook.ads.NativeAdListener;import java.util.ArrayList;import java.util.List; public class MainActivity extends AppCompatActivity { // creating NativeAdLayout object private NativeAdLayout nativeAdLayout; // creating LinearLayout object private LinearLayout adView; // creating NativeAd object private NativeAd nativeAd; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // initialize the FACEBOOK Audience Network SDK AudienceNetworkAds.initialize(this); // getting reference of button from activity_main.xml and setting OnClickListener findViewById(R.id.showNativeAdBtn).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // load Native Ad on button click loadNativeAd(); } }); } // loading native Ad private void loadNativeAd() { // initializing nativeAd object nativeAd = new NativeAd(this, "YOUR_PLACEMENT_ID"); // creating NativeAdListener NativeAdListener nativeAdListener = new NativeAdListener() { @Override public void onMediaDownloaded(Ad ad) { // showing Toast message Toast.makeText(MainActivity.this, "onMediaDownloaded", Toast.LENGTH_SHORT).show(); } @Override public void onError(Ad ad, AdError adError) { // showing Toast message Toast.makeText(MainActivity.this, "onError", Toast.LENGTH_SHORT).show(); } @Override public void onAdLoaded(Ad ad) { // showing Toast message Toast.makeText(MainActivity.this, "onAdLoaded", Toast.LENGTH_SHORT).show(); if (nativeAd == null || nativeAd != ad) { return; } // Inflate Native Ad into Container inflateAd(nativeAd); } @Override public void onAdClicked(Ad ad) { // showing Toast message Toast.makeText(MainActivity.this, "onAdClicked", Toast.LENGTH_SHORT).show(); } @Override public void onLoggingImpression(Ad ad) { // showing Toast message Toast.makeText(MainActivity.this, "onLoggingImpression", Toast.LENGTH_SHORT).show(); } }; // Load an ad nativeAd.loadAd( nativeAd.buildLoadAdConfig() .withAdListener(nativeAdListener) .build()); } // inflating the Ad void inflateAd(NativeAd nativeAd) { // unregister the native Ad View nativeAd.unregisterView(); // Add the Ad view into the ad container. nativeAdLayout = findViewById(R.id.native_ad_container); LayoutInflater inflater = LayoutInflater.from(MainActivity.this); // Inflate the Ad view. adView = (LinearLayout) inflater.inflate(R.layout.fan_native_ad_layout, nativeAdLayout, false); // adding view nativeAdLayout.addView(adView); // Add the AdOptionsView LinearLayout adChoicesContainer = findViewById(R.id.ad_choices_container); AdOptionsView adOptionsView = new AdOptionsView(MainActivity.this, nativeAd, nativeAdLayout); adChoicesContainer.removeAllViews(); adChoicesContainer.addView(adOptionsView, 0); // Create native UI using the ad metadata. MediaView nativeAdIcon = adView.findViewById(R.id.native_ad_icon); TextView nativeAdTitle = adView.findViewById(R.id.native_ad_title); MediaView nativeAdMedia = adView.findViewById(R.id.native_ad_media); TextView nativeAdSocialContext = adView.findViewById(R.id.native_ad_social_context); TextView nativeAdBody = adView.findViewById(R.id.native_ad_body); TextView sponsoredLabel = adView.findViewById(R.id.native_ad_sponsored_label); Button nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action); // Setting the Text. nativeAdTitle.setText(nativeAd.getAdvertiserName()); nativeAdBody.setText(nativeAd.getAdBodyText()); nativeAdSocialContext.setText(nativeAd.getAdSocialContext()); nativeAdCallToAction.setVisibility(nativeAd.hasCallToAction() ? View.VISIBLE : View.INVISIBLE); nativeAdCallToAction.setText(nativeAd.getAdCallToAction()); sponsoredLabel.setText(nativeAd.getSponsoredTranslation()); // Create a list of clickable views List<View> clickableViews = new ArrayList<>(); clickableViews.add(nativeAdTitle); clickableViews.add(nativeAdCallToAction); // Register the Title and button to listen for clicks. nativeAd.registerViewForInteraction(adView, nativeAdMedia, nativeAdIcon, clickableViews); }} |
Output:
Remember the point again: Facebook does not provide any test ids, so you have to create a FAN account and then create a new placement id and then add your device test AD id in the FAN to get ads in your app.
Please Login to comment...