Native Templates

Descargar plantillas de anuncios nativos

Introducción

Gracias a los anuncios nativos, puedes personalizar tus anuncios para ofrecer una experiencia de usuario mejorada y, así, mejorar tanto la interacción como el rendimiento general.

Si quieres sacar el máximo partido a este formato, diseña los anuncios en consonancia con el estilo de tu aplicación. Para ayudarte a empezar, hemos creado una serie de plantillas.

Son vistas que ya tienen el código de los anuncios nativos incluido, de modo que puedas modificarlas de forma sencilla e implementarlas con rapidez. Gracias a estas plantillas, implementar tu primer anuncio nativo te llevará tan solo unos minutos; además, podrás personalizarlo por completo fácilmente y sin tener que usar mucho código. Puedes colocarlas en cualquier lugar dentro de tu aplicación, como en el objeto RecyclerView de un feed de noticias o en un cuadro de diálogo.

Proporcionamos nuestras plantillas como un módulo de Android Studio para que puedas incluirlas en tu proyecto y usarlas como quieras sin dificultades.

Tamaños de plantillas

Las plantillas están disponibles en dos tamaños: pequeño y mediano. Ambos utilizan la clase TemplateView y tienen una proporción fija que se ajusta al ancho de la vista principal.

Plantilla pequeña

@layout/gnt_small_template_view

La plantilla pequeña es idónea para los objetos RecyclerView, o si necesitas que el anuncio sea rectangular y alargado. Por ejemplo, podrías usarla con anuncios in‑feed.

Plantilla mediana

@layout/gnt_medium_template_view

Las plantillas medianas ocupan la mitad o tres cuartos de la vista de la página, pero también pueden usarse en feeds. Es el tamaño ideal para las páginas de destino o de inicio.

Puedes experimentar cuanto quieras con los emplazamientos, así como modificar el código fuente y los archivos XML en función de cuáles sean tus necesidades.

Instalar las plantillas de anuncios nativos

Para instalar las plantillas de anuncios nativos, descarga el archivo zip e importa el módulo en un proyecto de Android Studio que ya tengas.

  1. Haz clic en File > New > Import Module (Archivo > Nuevo > Importar módulo).

  2. Selecciona la carpeta nativetemplates.

    importar plantilla de anuncio nativo

  3. Añade la siguiente línea a tu archivo build.gradle, a nivel de aplicación:

    dependencies {
            ...
            implementation project(':nativetemplates')
            ...
    }
    

Usar las plantillas de anuncios nativos

Puedes utilizarlas en cualquier archivo XML de diseño o en cualquier otro grupo de vistas.

añadir plantilla al diseño

El proceso para usar plantillas consta de dos pasos:

  1. En primer lugar, debes incluir la plantilla en 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>
    
  2. A continuación, debes añadir el anuncio nativo a la plantilla cuando se cargue dicho anuncio:

    MobileAds.initialize(this, "[_app-id_]");
     AdLoader adLoader = new AdLoader.Builder(this, "[_ad-unit-id_]")
         .forUnifiedNativeAd(new UnifiedNativeAd.OnUnifiedNativeAdLoadedListener() {
           @Override
           public void onUnifiedNativeAdLoaded(UnifiedNativeAd unifiedNativeAd) {
              NativeTemplateStyle styles = new
                  NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
    
              TemplateView template = findViewById(R.id.my_template);
              template.setStyles(styles);
              template.setNativeAd(unifiedNativeAd);
    
            }
         })
         .build();
    
       adLoader.loadAd(new PublisherAdRequest.Builder().build());
    }
    

Claves del diccionario de estilos

Puedes personalizar tu plantilla de dos formas: a través de un archivo XML tradicional o mediante nuestro objeto NativeTemplateStyle.Builder. En el ejemplo de código anterior, se muestra cómo usar el objeto NativeTemplateStyle.Builder para definir el color de fondo principal, pero hay muchas más opciones. A continuación, te mostramos todos los métodos disponibles en el creador. Dicha herramienta devuelve el objeto NativeTemplateStyle, que anula los estilos configurados mediante archivos XML. Los archivos XML gnt_small_template.xml y gnt_medium_template.xml utilizan los mismos parámetros de diseño de Android que ya conoces.

Métodos que usan los creadores con los estilos de plantillas de anuncios nativos
withCallToActionTextTypeface Typeface callToActionTextTypeface

El tipo de letra de la llamada a la acción.

withCallToActionTextSize float callToActionTextSize

El tamaño del texto de la llamada a la acción.

withCallToActionTypefaceColor int callToActionTypefaceColor

El color del texto de la llamada a la acción.

withCallToActionBackgroundColor ColorDrawable callToActionBackgroundColor

El color de fondo de la llamada 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 de texto.

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

El color de fondo principal.

Enviar comentarios sobre...

Mobile Ads SDK for Android
Mobile Ads SDK for Android
Si necesitas ayuda, visita nuestra página de asistencia.