Cómo mostrar un maestro de cuentas
Cuando se carga un anuncio nativo, el SDK de anuncios de Google para dispositivos móviles invoca al objeto de escucha de formato del anuncio correspondiente. Tu app será responsable de mostrar el anuncio aunque no necesariamente tiene que hacerlo de inmediato. Para facilitar la visualización formatos de anuncios definidos por el sistema, el SDK ofrece recursos útiles, como que se describe a continuación.
Clase NativeAdView
Para el formato NativeAd
, hay el valor
NativeAdView
. Esta clase es un
ViewGroup
que los editores deben usar como raíz para NativeAd
. R
un solo elemento NativeAdView
corresponde a un solo anuncio nativo.
Cada vista utilizada para mostrar los recursos de ese anuncio (la ImageView
que muestra el
recurso de captura de pantalla, por ejemplo) debe ser un elemento secundario de NativeAdView
.
.
La jerarquía de vistas de un anuncio nativo que usa una
LinearLayout
para mostrar sus vistas de elementos podría verse así:
<com.google.android.gms.ads.nativead.NativeAdView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
... >
<LinearLayout
android:orientation="horizontal"
... >
<ImageView
android:id="@+id/ad_app_icon"
... />
<TextView
android:id="@+id/ad_headline"
... />
</LinearLayout>
// Other assets such as image or media view, call to action, etc follow.
...
</LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>
Este es un ejemplo que crea un NativeAdView
y
lo propaga con un NativeAd
:
Java
AdLoader.Builder builder = new AdLoader.Builder(this, "AD_UNIT_ID")
.forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
@Override
public void onNativeAdLoaded(NativeAd nativeAd) {
// Assumes you have a placeholder FrameLayout in your View layout
// (with id fl_adplaceholder) where the ad is to be placed.
FrameLayout frameLayout =
findViewById(R.id.fl_adplaceholder);
// Assumes that your ad layout is in a file call native_ad_layout.xml
// in the res/layout folder
NativeAdView adView = (NativeAdView) getLayoutInflater()
.inflate(R.layout.native_ad_layout, null);
// This method sets the text, images and the native ad, etc into the ad
// view.
populateNativeAdView(nativeAd, adView);
frameLayout.removeAllViews();
frameLayout.addView(adView);
}
});
Kotlin
val builder = AdLoader.Builder(this, "AD_UNIT_ID")
.forNativeAd { nativeAd ->
// Assumes that your ad layout is in a file call native_ad_layout.xml
// in the res/layout folder
val adView = layoutInflater
.inflate(R.layout.native_ad_layout, null) as NativeAdView
// This method sets the text, images and the native ad, etc into the ad
// view.
populateNativeAdView(nativeAd, adView)
// Assumes you have a placeholder FrameLayout in your View layout
// (with id ad_frame) where the ad is to be placed.
ad_frame.removeAllViews()
ad_frame.addView(adView)
}
Ten en cuenta que todos los recursos de un anuncio nativo determinado deben renderizarse dentro del
Diseño NativeAdView
El SDK de anuncios de Google para dispositivos móviles intenta registrar una advertencia cuando
Los recursos nativos se renderizan fuera de un diseño de vista de anuncio nativo.
Las clases de vistas de anuncios también proporcionan métodos utilizados para registrar la vista utilizada para
cada recurso individual, y uno para registrar el objeto NativeAd
.
Si registras las vistas de esta manera, el SDK podrá controlar automáticamente las tareas
por ejemplo:
- Registrando clics
- Se registran impresiones cuando el primer píxel es visible en la pantalla.
- Cómo mostrar la superposición de AdChoices para el reabastecimiento nativo de Google, que actualmente se limita a un grupo selecto de publicadores
Superposición de AdChoices
El SDK agrega una superposición de AdChoices como vista de un anuncio cuando se publica que se devuelven. Si tu app usa reabastecimiento de anuncios nativos, deja espacio en tu opción preferida esquina de su vista de anuncios nativos para el logotipo de AdChoices insertado automáticamente. Además, se importante que la superposición de AdChoices se vea fácilmente, así que elige el fondo los colores y las imágenes de manera adecuada. Para obtener más información consulta el artículo sobre la implementación de anuncios programáticos nativos lineamientos.
Atribución de anuncio para anuncios programáticos nativos
Cuando muestres anuncios programáticos nativos, debes mostrar una atribución de anuncio a significan que la vista es un anuncio. Obtenga más información en nuestra política. lineamientos.
Ejemplo de código
A continuación, se indican los pasos para mostrar un anuncio nativo:
- Crea una instancia de la clase
NativeAdView
. - Para cada recurso del anuncio que se mostrará:
- Propaga la vista del recurso con el recurso en el objeto de anuncio.
- Registra la vista de recursos con la clase
ViewGroup
.
- Registra el
MediaView
si el diseño de tu anuncio nativo incluye un recurso multimedia grande. - Registra el objeto de anuncio con la clase
ViewGroup
.
A continuación, se incluye una función de ejemplo que muestra un NativeAd
:
Java
private void displayNativeAd(ViewGroup parent, NativeAd ad) {
// Inflate a layout and add it to the parent ViewGroup.
LayoutInflater inflater = (LayoutInflater) parent.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeAdView adView = (NativeAdView) inflater
.inflate(R.layout.ad_layout_file, parent);
// Locate the view that will hold the headline, set its text, and call the
// NativeAdView's setHeadlineView method to register it.
TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);
...
// Repeat the above process for the other assets in the NativeAd
// using additional view objects (Buttons, ImageViews, etc).
...
// If the app is using a MediaView, it should be
// instantiated and passed to setMediaView. This view is a little different
// in that the asset is populated automatically, so there's one less step.
MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);
// Call the NativeAdView's setNativeAd method to register the
// NativeAdObject.
adView.setNativeAd(ad);
// Ensure that the parent view doesn't already contain an ad view.
parent.removeAllViews();
// Place the AdView into the parent.
parent.addView(adView);
}
Kotlin
fun displayNativeAd(parent: ViewGroup, ad: NativeAd) {
// Inflate a layout and add it to the parent ViewGroup.
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
as LayoutInflater
val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
// Locate the view that will hold the headline, set its text, and use the
// NativeAdView's headlineView property to register it.
val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView
...
// Repeat the above process for the other assets in the NativeAd using
// additional view objects (Buttons, ImageViews, etc).
...
val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
adView.mediaView = mediaView
// Call the NativeAdView's setNativeAd method to register the
// NativeAdObject.
adView.setNativeAd(ad)
// Ensure that the parent view doesn't already contain an ad view.
parent.removeAllViews()
// Place the AdView into the parent.
parent.addView(adView)
}
Estas son las tareas individuales:
Cómo aumentar el diseño
Java
LayoutInflater inflater = (LayoutInflater) parent.getContext() .getSystemService(Context.LAYOUT_INFLATER_SERVICE); NativeAdView adView = (NativeAdView) inflater .inflate(R.layout.ad_layout_file, parent);
Kotlin
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
Este código aumenta un diseño XML que contiene vistas para mostrar un elemento nativo anuncio y, luego, ubicando una referencia al
NativeAdView
. Ten en cuenta que también podrías reutilizar unNativeAdView
existente si hay uno en tu fragmento o actividad, o incluso crear una instancia de forma dinámica sin usar un archivo de diseño.Propaga y registra las vistas de recursos
Este código de muestra localiza la vista utilizada para mostrar el título y configura su texto usando el recurso de cadenas proporcionado por el objeto de anuncio y lo registra con el Objeto
NativeAdView
:Java
TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline); headlineView.setText(ad.getHeadline()); adView.setHeadlineView(headlineView);
Kotlin
val headlineView = adView.findViewById<TextView>(R.id.ad_headline) headlineView.text = ad.headline adView.headlineView = headlineView
Este proceso de ubicar la vista, establecer su valor y registrarla en la clase de vista de anuncio debe repetirse para cada uno de los recursos proporcionados por el objeto de anuncio nativo que mostrará la app.
Cómo controlar los clics
No implementes controladores de clics personalizados en ninguna vista del vista de anuncio nativo. Para observar los eventos de clic por su cuenta, utilice el objeto de escucha.
El SDK controla los clics en los recursos de vista de anuncio, siempre y cuando propagar y registrar las vistas de recursos, como se explicó en la sección anterior.
Este es un ejemplo que utiliza un anuncio objeto de escucha para observar de clic:
Java
AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/example/native") ... .withAdListener(new AdListener() { @Override public void onAdFailedToLoad(LoadAdError adError) { // Handle the failure by logging, altering the UI, and so on. } @Override public void onAdClicked() { // Log the click event or other custom behavior. } }) .build();
Kotlin
val adLoader = AdLoader.Builder(this, "/21775744923/example/native") ... .withAdListener(object : AdListener() { override fun onAdFailedToLoad(adError: LoadAdError) { // Handle the failure by logging, altering the UI, and so on. } }) .build()
Registra MediaView
Debes usar la
MediaView
recurso en lugar delImageView
si quieres incluir un recurso de imagen principal en el diseño de tu anuncio.MediaView
es unView
especial diseñado para mostrar el elemento multimedia principal. video o imagen.MediaView
se puede definir en un diseño XML o construirse de forma dinámica. Integra deben ubicarse dentro de la jerarquía de vistas de unNativeAdView
, como cualquier otro la vista de otros recursos. Las apps que usan unMediaView
deben registrarlo con elNativeAdView
Java
MediaView mediaView = adView.findViewById(R.id.ad_media); adView.setMediaView(mediaView);
Kotlin
adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
Al igual que con todas las vistas de elementos, la vista de medios debe tener su contenido propagado. Esto se hace usando
getMediaContent()
método para recuperar el contenido multimedia que se puede pasar a unaMediaView
Este es un fragmento de código que configura el contenido multimedia vista:Java
mediaView.setMediaContent(nativeAd.getMediaContent());
Kotlin
mediaView.mediaContent = nativeAd.mediaContent
ImageScaleType
La clase
MediaView
tiene una propiedadImageScaleType
cuando se muestra imágenes de contenedores. Si quieres cambiar la forma en que se ajusta la escala de una imagen enMediaView
, configura elImageView.ScaleType
correspondiente consetImageScaleType()
deMediaView
:Java
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
Kotlin
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
MediaContent
La clase
MediaContent
contiene los datos relacionados con el contenido multimedia de la anuncio nativo, que se muestra con la claseMediaView
. Cuando La propiedadMediaView
mediaContent
se establece con una instanciaMediaContent
:Si hay un elemento de video disponible, este se almacena en búfer y comienza a reproducirse en
MediaView
Para saber si un activo de video está disponible, revisahasVideoContent()
Si el anuncio no contiene un recurso de video, se descarga el recurso
mainImage
. y, en su lugar, se coloca dentro deMediaView
.
De forma predeterminada,
mainImage
es el primer recurso de imagen que se descarga. Si Se usasetReturnUrlsForImageAssets(true)
,mainImage
esnull
y debes Configura la propiedadmainImage
como la imagen que descargaste de forma manual. Ten en cuenta que esta La imagen se utilizará solo cuando no haya ningún recurso de video disponible.Registra el objeto de anuncio nativo
En este último paso, se registra el objeto de anuncio nativo con la vista que se responsable de mostrarlo:
Java
adView.setNativeAd(ad);
Kotlin
adView.setNativeAd(ad)
Destruir anuncio
Cuando termine de mostrar el anuncio nativo, debe destruirlo para que el anuncio se recolecte adecuadamente con la basura.
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
Prueba el código de anuncio nativo
Anuncios de venta directa
Si deseas probar cómo son los anuncios nativos de venta directa, puedes hacer uso de este ID de unidad de anuncios de Ad Manager:
/21775744923/example/native
Está configurada para publicar anuncios de instalación de aplicación y de contenido de ejemplo, así como formato del anuncio nativo personalizado con los siguientes recursos:
- Título (texto)
- Imagen principal (imagen)
- Leyenda (texto)
El ID de plantilla para el formato del anuncio nativo personalizado es 10063170
.
Anuncios de reabastecimiento nativos
Actualmente, el reabastecimiento de Ad Exchange está limitado a un grupo selecto de publicadores. Para prueba el comportamiento de los anuncios de reabastecimiento nativos, usa esta unidad de anuncios de Ad Manager:
/21775744923/example/native-backfill
Publica anuncios de instalación de aplicación y de contenido de muestra que incluyen la Selección de anuncios superposición.
Recuerda actualizar tu código para hacer referencia a los IDs de la unidad de anuncios y de la plantilla reales. antes de lanzarlas.
Ejemplos en GitHub
Ejemplo de implementación completa de anuncios nativos:
Próximos pasos
Explora los siguientes temas: