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
    xmlns:android="http://schemas.android.com/apk/res/android"
    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
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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.