Los anuncios nativos te permiten personalizarlos y mejorar la experiencia del usuario. Las mejores experiencias del usuario pueden aumentar la participación y mejorar tu rendimiento general.
Para aprovechar al máximo los anuncios nativos, es importante definir el estilo de tus diseños de anuncios de modo que parezcan una extensión natural de tu app. Para ayudarte a comenzar, creamos plantillas nativas.
Las plantillas nativas son vistas de código completo para tus anuncios nativos, diseñadas para una implementación rápida y modificaciones sencillas. Con las plantillas nativas, puedes implementar tu primer anuncio nativo en solo unos minutos y personalizar rápidamente el aspecto sin usar mucho código. Puedes colocar estas plantillas donde quieras, como en una vista de reciclador que se usa en un feed de noticias, en un diálogo o en cualquier otro lugar de tu app.
Nuestras plantillas nativas se proporcionan como un módulo de Android Studio, por lo que es fácil incluirlas en tu proyecto y usarlas como quieras.
Tamaños de las plantillas
Hay dos plantillas: pequeña y mediana. Ambos usan la clase TemplateView
y tienen una relación de aspecto fija. Se ajustarán para llenar el ancho de sus vistas superiores.
Plantilla pequeña
@layout/gnt_small_template_view
La plantilla pequeña es ideal para las vistas de reciclador o cada vez que necesites una vista de anuncio rectangular larga. Por ejemplo, podría usarla para los anuncios in-feed.
Plantilla mediana
@layout/gnt_medium_template_view
La plantilla mediana está diseñada para representar una vista de página de medio a tres cuartos, pero también se puede usar en feeds. Es una buena opción para las páginas de destino o de presentación.
No dudes en experimentar con las posiciones. Por supuesto, también puedes cambiar el código fuente y los archivos en formato XML para que se adapten a tus requisitos.
Cómo instalar las plantillas de anuncios nativos
Para instalar las plantillas nativas, simplemente descarga el archivo ZIP (con la opción Clonar o descargar en GitHub) y, luego, importa el módulo a tu proyecto de Android Studio existente.
Selecciona File > New > Import Module.
Selecciona la carpeta
nativetemplates
.Agrega la siguiente línea al archivo
build.gradle
a nivel de la app:dependencies { ... implementation project(':nativetemplates') ... }
Cómo usar plantillas de anuncios nativos
Puedes usar la plantilla en cualquier archivo de diseño en formato XML, como cualquier otro grupo de vistas.
El uso de las plantillas es un proceso de dos pasos:
Primero, debes incluir la plantilla como parte de tu diseño.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" tools:showIn="@layout/activity_main" > <!-- This is your template view --> <com.google.android.ads.nativetemplates.TemplateView android:id="@+id/my_template" <!-- this attribute determines which template is used. The other option is @layout/gnt_medium_template_view --> app:gnt_template_type="@layout/gnt_small_template_view" android:layout_width="match_parent" android:layout_height="match_parent" /> ... </LinearLayout>
A continuación, debes proporcionar tu anuncio nativo cuando se cargue tu plantilla:
MobileAds.initialize(this); AdLoader adLoader = new AdLoader.Builder(this, "/6499/example/native") .forNativeAd(new NativeAd.OnNativeAdLoadedListener() { @Override public void onNativeAdLoaded(NativeAd nativeAd) { NativeTemplateStyle styles = new NativeTemplateStyle.Builder().withMainBackgroundColor(background).build(); TemplateView template = findViewById(R.id.my_template); template.setStyles(styles); template.setNativeAd(nativeAd); } }) .build(); adLoader.loadAd(new AdManagerAdRequest.Builder().build());
Claves de diccionario de estilos
Existen dos maneras de diseñar tu plantilla: usando un XML de diseño tradicional y nuestro objeto NativeTemplateStyle.Builder
. En la muestra de código anterior, se demuestra cómo usar el objeto NativeTemplateStyle.Builder
para establecer el color de fondo principal, pero también hay otras opciones. Estos son todos los métodos de compilación disponibles. El compilador muestra un objeto NativeTemplateStyle
que anula cualquier estilo de diseño XML. Los diseños XML gnt_small_template.xml
y gnt_medium_template.xml
usan los mismos parámetros de estilo de Android que ya conoces.
Métodos de compilador para un estilo de plantilla nativo | |
---|---|
withCallToActionTextTypeface
|
Typeface callToActionTextTypeface
El tipo de letra del llamado a la acción. |
withCallToActionTextSize
|
float callToActionTextSize
El tamaño del texto del llamado a la acción. |
withCallToActionTypefaceColor
|
int callToActionTypefaceColor
El color del texto del llamado a la acción. |
withCallToActionBackgroundColor
|
ColorDrawable callToActionBackgroundColor
El color de fondo del llamado a la acción. |
withPrimaryTextTypeface
|
Typeface primaryTextTypeface
El tipo de letra de la primera fila de texto. |
withPrimaryTextSize
|
float primaryTextSize
El tamaño de la primera fila de texto. |
withPrimaryTextTypefaceColor
|
int primaryTextTypefaceColor
El color de la primera fila de texto. |
withPrimaryTextBackgroundColor
|
ColorDrawable primaryTextBackgroundColor
El color de fondo de la primera fila de texto. |
withSecondaryTextTypeface
|
Typeface secondaryTextTypeface
El tipo de letra de la segunda fila de texto. |
withSecondaryTextSize
|
float secondaryTextSize
El tamaño de la segunda fila de texto. |
withSecondaryTextTypefaceColor
|
int secondaryTextTypefaceColor
El color del texto de la segunda fila. |
withSecondaryTextBackgroundColor
|
ColorDrawable secondaryTextBackgroundColor
El color de fondo de la segunda fila de texto. |
withTertiaryTextTypeface
|
Typeface tertiaryTextTypeface
El tipo de letra de la tercera fila de texto. |
withTertiaryTextSize
|
float tertiaryTextSize
El tamaño de la tercera fila de texto. |
withTertiaryTextTypefaceColor
|
int tertiaryTextTypefaceColor
El color del texto de la tercera fila de texto. |
withTertiaryTextBackgroundColor
|
ColorDrawable tertiaryTextBackgroundColor
El color de fondo de la tercera fila de texto. |
withMainBackgroundColor
|
ColorDrawable mainBackgroundColor
Color de fondo principal |
Contribuir
Creamos plantillas nativas para ayudarte a desarrollar anuncios nativos rápidamente. Nos encantaría que colaboraras con nuestro repositorio de GitHub para agregar plantillas o funciones nuevas. Envíanos una solicitud de incorporación de cambios y lo analizaremos.