Как интегрировать нативную рекламу Facebook Audience Network (FAN) в Android?
Чтобы заработать деньги с помощью приложения или игры для Android, существует множество способов, таких как покупки в приложении, спонсорство, реклама и многие другие. Но есть еще один популярный метод заработка денег с помощью приложения для Android - это интеграция сторонней рекламы, например известной как Facebook Audience Network (FAN). Facebook Audience Network предназначена для монетизации с учетом удобства пользователей. Благодаря использованию ценных форматов, качественной рекламы и инновационных инструментов для издателей он помогает развивать бизнес, сохраняя вовлеченность людей.
Почему Facebook Audience Network?
- Facebook Audience Network - одна из лучших альтернатив Google Admob для монетизации приложений Android или IOS.
- Минимальная выплата 100 долларов США.
- Широкий выбор форматов рекламы
- Максимальная скорость заполнения
- Высокая эффективная цена за тысячу показов (эффективная цена за тысячу показов)
- Качественная реклама
- Персонализированная реклама
Форматы Facebook Audience Network
В Facebook Audience Network доступно пять типов гибких и высокопроизводительных форматов.
- Нативное : реклама, которую вы разрабатываете в соответствии с приложением, без проблем.
- Межстраничное объявление: полноэкранная реклама, привлекающая внимание и становящаяся частью взаимодействия с пользователем.
- Баннер: традиционные форматы и различные места размещения.
- Видео с вознаграждением: иммерсивное видеообъявление, инициируемое пользователем, которое награждает пользователей за просмотр.
- Playables : возможность рекламы перед покупкой, позволяющая пользователям предварительно просмотреть игру перед установкой.
В этой статье давайте интегрируем нативную рекламу Facebook Audience Network в приложение для Android.
Нативная реклама:
Реклама с нативной рекламой используется для создания индивидуализированной рекламы приложения. Эффективная цена за тысячу показов рекламы с нативной рекламой относительно выше, чем у баннерной рекламы, а также приводит к более высокому CTR (коэффициент кликабельности), что приводит к увеличению дохода от приложения. Ниже приведен образец GIF, чтобы понять, что мы собираемся делать в этой статье. Обратите внимание, что мы собираемся реализовать этот проект на языке Java.
Подход
Шаг 1: Создание нового проекта
Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать / запустить новый проект в Android Studio». Обратите внимание, что в качестве языка выберите Java, хотя мы собираемся реализовать этот проект на языке Java.
Шаг 2. Перед тем, как перейти к разделу кодирования, сначала выполните предварительное задание.
- Перейдите в файл app> res> values> colors.xml и установите цвета для приложения.
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 > |
- Перейдите в раздел Gradle Scripts> build.gradle (Module: app), импортируйте следующие зависимости и нажмите « синхронизировать сейчас » во всплывающем окне выше.
implementation ‘com.facebook.android:audience-network-sdk:5.+’
- Перейдите в приложение> манифесты> раздел AndroidManifest.xml и разрешите «Интернет-разрешение».
<uses-permission android:name=”android.permission.INTERNET” />
Шаг 3. Разработка пользовательского интерфейса
- Создайте новый макет, содержащий макет нативного объявления. Перейдите в app> res> layout> щелкните правой кнопкой мыши> New> Layout Resource File и назовите файл fan_native_ad_layout.
- Ниже приведен код файла fan_native_ad_layout.xml. Комментарии добавляются внутри кода для более подробного понимания кода.
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> |
- Ниже приведен код файла activity_main.xml. Комментарии добавляются внутри кода для более подробного понимания кода.
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> |
Шаг 4: Работа с файлом MainActivity.java
- Откройте там внутри класса файл MainActivity.java , прежде всего создайте объект класса NativeAdLayout, LinearLayout , NativeAd .
// creating NativeAdLayout object
private NativeAdLayout nativeAdLayout;
// creating LinearLayout object
private LinearLayout adView;
// creating NativeAd object
private NativeAd nativeAd;
- Теперь внутри метода onCreate () инициализируйте SDK Facebook Audience Network.
// initializing the Audience Network SDK
AudienceNetworkAds.initialize(this);
- Создайте частный метод void loadNativeAd () вне метода onCreate () и определите его.
- Внутри loadNativeAd () добавьте прослушиватель рекламы к собственному объявлению и покажите относительное сообщение ToastMessage.
- А внутри метода onAdLoaded () вызываем inflateAd (), который мы создадим позже.
// loadinng 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.
- Теперь создайте void inflateAd , который будет увеличивать просмотры из файлов fan_native_ad_layout.xml и activity_main.xml и показывать рекламу пользователю.
// 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);
}
- Ниже приведен полный код файла MainActivity.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(); } }); } // loadinng 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();
|