Para ganar dinero con la aplicación o el juego de Android , hay muchas formas, como compras en la aplicación, patrocinio, anuncios y muchas más. Pero hay otro método popular para ganar dinero con la aplicación de Android mediante la integración de un anuncio de terceros, por ejemplo, conocido como Facebook Audience Network (FAN) . Facebook Audience Network está diseñado para ayudar a monetizar con la experiencia del usuario en mente. Mediante el uso de formatos de alto valor, anuncios de calidad y herramientas de publicación innovadoras, ayuda a hacer crecer el negocio y mantiene a las personas comprometidas.
¿Por qué la red de audiencia de Facebook?
- Facebook Audience Network es una de las mejores alternativas a Google Admob para monetizar la App Android o IOS.
- El pago mínimo es de $100
- Amplia gama de formatos de anuncios
- Tasas máximas de llenado
- Alto eCPM (costo efectivo por mil)
- Anuncios de calidad
- Anuncios personalizados
Formatos de la red de audiencia de Facebook
Existen principalmente cinco tipos de formato flexible y de alto rendimiento disponibles en Facebook Audience Network
- Nativo : anuncios que usted diseña para adaptarse a la aplicación, sin problemas
- Intersticial : Anuncios a pantalla completa que captan la atención y se vuelven parte de la experiencia.
- Banner : Formatos tradicionales en una variedad de ubicaciones.
- Video recompensado : un anuncio de video inmersivo iniciado por el usuario que recompensa a los usuarios por mirar.
- Jugables : una experiencia publicitaria de prueba antes de comprar que permite a los usuarios obtener una vista previa de un juego antes de instalarlo.
En este artículo, integremos los anuncios nativos de Facebook Audience Network en la aplicación de Android.
Anuncios nativos:
Un anuncio de anuncios nativos se utiliza para crear una experiencia personalizada para los anuncios de la aplicación. El eCPM (costo efectivo por mil) de los anuncios de anuncios nativos es relativamente más alto que los anuncios de banner y también conduce a un CTR (tasa de clics) más alto, lo que genera más ganancias de la aplicación. qué
Acercarse
Paso 1: Creación de un nuevo proyecto
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que elija Java como lenguaje aunque vamos a implementar este proyecto en lenguaje Java.
Paso 2: antes de ir a la sección de codificación, primero haga una tarea previa
- Vaya a aplicación > res > valores > archivo colors.xml y configure los colores para la aplicación.
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>
- Vaya a la sección Gradle Scripts > build.gradle (Módulo: aplicación) e importe las siguientes dependencias y haga clic en » sincronizar ahora » en la ventana emergente anterior.
implementación ‘com.facebook.android:audience-network-sdk:5.+’
- Vaya a la sección aplicación> manifiestos> AndroidManifest.xml y permita » Permiso de Internet «.
<usos-permiso android:name=”android.permission.INTERNET” />
Paso 3: Diseño de la interfaz de usuario
- Cree un nuevo diseño, que contenga el diseño del anuncio nativo. Vaya a aplicación > res > diseño > haga clic con el botón derecho en > Nuevo > Archivo de recursos de diseño y nombre el archivo como fan_native_ad_layout.
- A continuación se muestra el código para el archivo fan_native_ad_layout.xml . Se agregan comentarios dentro del código para comprender el código con más detalle.
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>
- A continuación se muestra el código para el archivo activity_main.xml . Se agregan comentarios dentro del código para comprender el código con más detalle.
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>
Paso 4: trabajar con el archivo MainActivity.java
- Abra el archivo MainActivity.java allí dentro de la clase, en primer lugar, cree el objeto de la clase NativeAdLayout , LinearLayout , NativeAd .
// creando el objeto NativeAdLayout
privado NativeAdLayout nativeAdLayout;
// creando objeto LinearLayout
vista de anuncio LinearLayout privada;
// creando el objeto NativeAd
anuncio nativo privado anuncio nativo;
- Ahora, dentro del método onCreate() , inicialice el SDK de Facebook Audience Network.
// inicializando el SDK de Audience Network
AudienceNetworkAds.initialize(esto);
- Cree un método loadNativeAd() vacío privado fuera del método onCreate() y defínalo.
- Dentro de loadNativeAd() agregue un detector de anuncios al anuncio nativo y muestre el mensaje Toast relativo.
- Y dentro del método onAdLoaded() llame al inflateAd() , que crearemos más tarde.
// cargando anuncio nativo
carga de anuncios nativos vacía privada() {
// inicializando el objeto nativeAd
nativeAd = new NativeAd(this, “YOUR_PLACEMENT_ID”);
// creando NativeAdListener
NativeAdListener nativeAdListener = new NativeAdListener() {
@Anular
public void onMediaDownloaded(Anuncio publicitario) {
// mostrando el mensaje Toast
Toast.makeText(MainActivity.this, “onMediaDownloaded”, Toast.LENGTH_SHORT).show();
}
@Anular
public void onError(Ad ad, AdError adError) {
// mostrando el mensaje Toast
Toast.makeText(MainActivity.this, “onError”, Toast.LENGTH_SHORT).show();
}
@Anular
public void onAdLoaded(Anuncio publicitario) {
// mostrando el mensaje Toast
Toast.makeText(MainActivity.this, “onAdLoaded”, Toast.LENGTH_SHORT).show();
if (anuncio nativo == nulo || anuncio nativo != anuncio) {
devolver;
}
// Inflar anuncio nativo en contenedor
inflateAd(nativeAd);
}
@Anular
public void onAdClicked(Anuncio publicitario) {
// mostrando el mensaje Toast
Toast.makeText(MainActivity.this, “onAdClicked”, Toast.LENGTH_SHORT).show();
}
@Anular
public void onLoggingImpression(Anuncio publicitario) {
// mostrando el mensaje Toast
Toast.makeText(MainActivity.this, “onLoggingImpression”, Toast.LENGTH_SHORT).show();
}
};
// Cargar un anuncio
anuncionativo.loadAd(
nativeAd.buildLoadAdConfig()
.withAdListener(nativeAdListener)
.construir());
}
Nota:
- Reemplace » YOUR_PLACEMENT_ID » con su propia identificación de ubicación para mostrar anuncios reales.
- Facebook no proporciona ninguna identificación de prueba, por lo que debe crear una cuenta de FAN y luego crear una nueva identificación de ubicación y luego agregar la identificación de AD de prueba de su dispositivo en FAN para obtener anuncios en su aplicación.
- Ahora cree un void inflateAd , que inflará las vistas de los archivos fan_native_ad_layout.xml y activity_main.xml y mostrará el anuncio al usuario.
// inflando el anuncio
void inflateAd(NativeAd nativeAd) {
// cancelar el registro de la vista de anuncio nativa
anuncionativo.unregisterView();
// Agregue la vista de anuncios al contenedor de anuncios.
nativeAdLayout = findViewById(R.id.native_ad_container);
LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
// Inflar la vista de anuncios.
adView = (LinearLayout) inflater.inflate(R.layout.fan_native_ad_layout, nativeAdLayout, false);
// agregando vista
nativeAdLayout.addView(adView);
// Agregue AdOptionsView
LinearLayout adChoicesContainer = findViewById(R.id.ad_choices_container);
AdOptionsView adOptionsView = new AdOptionsView(MainActivity.this, nativeAd, nativeAdLayout);
adChoicesContainer.removeAllViews();
adChoicesContainer.addView(adOptionsView, 0);
// Crear una interfaz de usuario nativa utilizando los metadatos del anuncio.
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);
Botón nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action);
// Configuración del texto.
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());
// Crear una lista de vistas en las que se puede hacer clic
List<View> clickableViews = new ArrayList<>();
clickableViews.add(nativeAdTitle);
clickableViews.add(nativeAdCallToAction);
// Registre el Título y el botón para escuchar los clics.
anuncionativo.registerViewForInteraction(
adView, nativeAdMedia, nativeAdIcon, clickableViews);
}
- A continuación se muestra el código completo del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.
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);
}
}
Producción:
Recuerde el punto nuevamente: Facebook no proporciona ninguna identificación de prueba, por lo que debe crear una cuenta de FAN y luego crear una nueva identificación de ubicación y luego agregar la identificación de AD de prueba de su dispositivo en FAN para obtener anuncios en su aplicación.
Publicación traducida automáticamente
Artículo escrito por onlyklohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA