Custom Native Ad Formats

Formatos de anuncios nativos personalizados

Además de los formatos nativos definidos por el sistema, los editores de Ad Manager pueden definir listas personalizadas de recursos para crear sus propios formatos de anuncios nativos, lo que se conoce como formatos de anuncios nativos personalizados, que se pueden usar con los anuncios reservados. Así, los editores pueden transferir datos estructurados arbitrarios a sus aplicaciones. Estos anuncios se representan con el objeto NativeCustomTemplateAd.

Cargar formatos de anuncios nativos personalizados

En esta guía te explicamos cómo puedes cargar y mostrar formatos de anuncios nativos personalizados.

Crear un AdLoader

Al igual que con los anuncios nativos unificados, para cargar los formatos de anuncios nativos personalizados se utiliza la clase AdLoader:

Java

    AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
        .forCustomTemplateAd("10063170",
          new NativeCustomTemplateAd.OnCustomTemplateAdLoadedListener() {
              @Override
              public void onCustomTemplateAdLoaded(NativeCustomTemplateAd ad) {
                  // Show the custom template and record an impression.
              }
          },
          new NativeCustomTemplateAd.OnCustomClickListener() {
              @Override
              public void onCustomClick(NativeCustomTemplateAd ad, String s) {
                  // Handle the click action
              }
          })
        .withAdListener( ... )
        .withNativeAdOptions( ... )
        .build();
    

Kotlin

    val adLoader = AdLoader.Builder(this, "/6499/example/native")
            .forCustomTemplateAd("10063170",
                { ad ->
                    // Show the custom template and record an impression.
                },
                { ad, s ->
                // Handle the click action
                })
            .withAdListener( ... )
            .withNativeAdOptions( ... )
            .build()
    

Del mismo modo que el método forUnifiedNativeAd configura el objeto AdLoader para solicitar un anuncio de descarga de aplicaciones, el método forCustomTemplateAd lo hace para gestionar anuncios de plantilla personalizada. Se transmiten tres parámetros al método:

  • ID de plantilla de la plantilla personalizada que el objeto AdLoader debe solicitar. Cada formato de anuncio nativo personalizado tiene asociado un valor de ID de plantilla. Este parámetro indica la plantilla que tu aplicación quiere que el objeto AdLoader solicite.
  • Un método OnCustomTemplateAdLoadedListener que se invoca cuando se carga correctamente un anuncio.
  • Un objeto OnCustomClickListener opcional que se invoca cuando el usuario toca o hace clic en el anuncio. Para obtener más información sobre este listener, consulta más abajo la sección sobre la gestión de clics e impresiones.

Puesto que un solo bloque de anuncios se puede configurar para que sirva más de una plantilla de creatividades, es posible invocar el método forCustomTemplateAd varias veces con diferentes ID de plantilla de modo que el cargador de anuncios esté preparado para enviar más de un posible formato de anuncio nativo personalizado.

IDs de plantilla

Son los ID de plantilla que se utilizan para hacer referencia únicamente a los formatos de anuncios nativos personalizados, y se pueden encontrar en la interfaz de usuario de Ad Manager, en la sección Creatividades > Formatos de anuncio nativo de la pestaña Entrega:

Los ID de plantilla de los formatos de anuncios nativos personalizados aparecen debajo de su nombre. Al hacer clic en uno de sus nombres, se muestra una pantalla con información sobre los campos que incluye la plantilla:

En esta página se pueden añadir, editar y eliminar campos. Fíjate en la columna ID de variable que está a la derecha. Estos ID se usan para acceder a recursos específicos y los veremos en la siguiente sección.

Mostrar formatos de anuncios nativos personalizados

Los formatos de anuncios nativos personalizados difieren de los definidos por el sistema en que los editores pueden definir sus propias "plantillas" o listas de recursos para crear anuncios. El proceso para mostrarlos, por tanto, se diferencia del de los formatos definidos por el sistema en varios aspectos:

  1. Como la clase NativeCustomTemplateAd está diseñada para gestionar cualquier formato de anuncio nativo personalizado que se defina en Ad Manager, no tiene "captadores" ("getters") con nombre para los recursos. En su lugar, ofrece métodos como getText y getImage, que utilizan el ID de variable de un campo de plantilla como parámetro.
  2. No hay ninguna clase de vista de anuncio específica similar a NativeContentAdView que pueda utilizarse con el objeto NativeCustomTemplateAd. Puedes usar las clases FrameLayout, RelativeLayout o cualquier otra que consideres apropiada según la experiencia que ofreces a tus usuarios.
  3. Como no hay ninguna clase ViewGroup específica, no tienes que registrar ninguna de las vistas que utilizas para mostrar los recursos de los anuncios. De esta forma, te puedes ahorrar algunas líneas de código al mostrarlos, pero tendrás más trabajo a la hora de gestionar clics.

Aquí tienes una función de ejemplo para mostrar un objeto NativeCustomTemplateAd:

Java

    public void displayCustomTemplateAd (ViewGroup parent,
                                         NativeCustomTemplateAd customTemplateAd) {
        // Inflate a layout and add it to the parent ViewGroup.
        LayoutInflater inflater = (LayoutInflater) parent.getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View adView = inflater.inflate(R.layout.custom_template_ad, parent);

        // Locate the TextView that will hold the value for "Headline" and
        // set its text.
        TextView myHeadlineView = (TextView) adView.findViewById(R.id.headline);
        myHeadlineView.setText(customTemplateAd.getText("Headline"));

        // Locate the ImageView that will hold the value for "MainImage" and
        // set its drawable.
        Button myMainImageView = (ImageView) adView.findViewById(R.id.main_image);
        myMainImageView.setImageDrawable(
                nativeCustomTemplateAd.getImage("MainImage").getDrawable());

        ...
        // Continue locating views and displaying assets until finished.
        ...
    }
    

Kotlin

    public fun displayCustomTemplateAd (parent: ViewGroup,
                                    customTemplateAd: NativeCustomTemplateAd) {
        val adView = layoutInflater
                .inflate(R.layout.ad_simple_custom_template, null)

        val myHeadlineView = adView.findViewById<TextView>(R.id.headline)
        myHeadlineView.setText(customTemplateAd.getText("Headline"));

        // Locate the ImageView that will hold the value for "MainImage" and
        // set its drawable.
        val myMainImageView = adView.findViewById(R.id.main_image);
        myMainImageView.setImageDrawable(
                customTemplateAd.getImage("MainImage").drawable;

        ...
        // Continue locating views and displaying assets until finished.
        ...
    }
    

Vídeo nativo en formatos de anuncio nativo personalizado

Al crear un formato de anuncio nativo, puedes hacerlo apto para mostrar vídeo.

Solo tienes que marcar la casilla para habilitar el formato de vídeo. Luego, cuando crees una creatividad para este formato, podrás introducir un recurso de vídeo.

Al implementar la aplicación, puedes usar la propiedad NativeCustomTemplateAd.getVideoMediaView() para generar la vista del vídeo y añadirla después a tu jerarquía de vistas. Si el anuncio no tiene contenido de vídeo, plantéate otras opciones para mostrarlo sin vídeo.

En el siguiente ejemplo se comprueba si el anuncio tiene contenido de vídeo y, si no es el caso, se muestra una imagen en su lugar:

Java

    // Called when a custom native ad loads.
    @Override
    public void onCustomTemplateAdLoaded(NativeCustomTemplateAd ad) {
        VideoController videoController = ad.getVideoController();
        // Assumes you have a FrameLayout in your view hierarchy with the id media_placeholder.
        FrameLayout mediaPlaceholder = (FrameLayout) findViewById(R.id.media_placeholder);
        if (videoController.hasVideoContent()) {
            mediaPlaceholder.addView(ad.getVideoMediaView());
        } else {
            ImageView mainImage = new ImageView(this);
            mainImage.setAdjustViewBounds(true);
            // Assumes your native format has an image asset with the name MainImage.
            mainImage.setImageDrawable(ad.getImage("MainImage").getDrawable());
            mediaPlaceholder.addView(mainImage);
        }
    }
    

Kotlin

    NativeCustomTemplateAd.OnCustomTemplateAdLoadedListener { ad ->
        val videoController = ad.videoController
        // Assumes you have a FrameLayout in your view hierarchy with the id media_placeholder.
        val mediaPlaceholder = adView.findViewById<FrameLayout>(R.id.media_placeholder)
        if (videoController.hasVideoContent())
        {
            mediaPlaceholder.addView(ad.videoMediaView)
        }
        else
        {
            val mainImage = ImageView(this)
            mainImage.adjustViewBounds = true
            // Assumes your native format has an image asset with the name MainImage.
            mainImage.setImageDrawable(ad.getImage("MainImage").drawable)
            mediaPlaceholder.addView(mainImage)
        }
    }
    

Consulta la sección sobre la clase VideoController para obtener más información sobre cómo personalizar la experiencia de vídeo de un anuncio nativo personalizado.

Descarga el ejemplo de renderizado personalizado de Ad Manager para ver un vídeo nativo en acción.

Clics e impresiones de formatos de anuncios nativos personalizados

Con los formatos de anuncios nativos personalizados, la aplicación debe registrar las impresiones e informar de los eventos de clics al SDK de anuncios de Google para móviles.

Registrar impresiones

Para registrar las impresiones de un anuncio de plantilla personalizada, llama al método recordImpression de la clase NativeCustomTemplateAd correspondiente:

myCustomTemplateAd.recordImpression();
    

Si tu aplicación llama dos veces al método por el mismo anuncio por error, el SDK evita automáticamente que la misma solicitud de impresión se registre dos veces.

Registrar clics

Para informar al SDK de que se ha hecho clic en la vista de un recurso, debes llamar al método performClick de la clase NativeCustomTemplateAd correspondiente y transferir el nombre del recurso en el que se ha hecho clic. Por ejemplo, si en tu plantilla personalizada tienes un recurso llamado "MainImage" y quieres informar de que se ha hecho clic en la clase ImageView que corresponde al recurso, el código será similar a este:

myCustomTemplateAd.performClick("MainImage");
    

No tienes que llamar a este método con cada vista asociada al anuncio. Si tienes otro campo llamado "Caption" que solo se muestra y no requiere que el usuario lo toque ni haga clic en él, la aplicación no necesita llamar al método performClick para informar sobre la vista de ese recurso.

Responder a acciones de clic personalizadas

Al hacer clic en un anuncio de plantilla personalizada, el SDK puede responder de tres maneras distintas y en el siguiente orden:

  1. Invocar un objeto OnCustomClickListener desde AdLoader, si se ha proporcionado uno.
  2. Intentar localizar una resolución de contenido correspondiente a cada una de las URL de enlace profundo del anuncio e iniciar la primera que se resuelva.
  3. Abrir un navegador e ir a la URL de destino tradicional del anuncio.

El método forCustomTemplateAd acepta un objeto OnCustomClickListener. Si transmites un objeto listener, el SDK invoca su método onCustomClick sin hacer nada más. Sin embargo, si transfieres un valor nulo como listener, el SDK recurre a las URL de enlace profundo o de destino que se registran con el anuncio.

Los listener de clics personalizados permiten que la aplicación decida qué hacer como respuesta a un clic, ya sea actualizar la interfaz de usuario, lanzar una nueva actividad o simplemente registrar el clic. En el siguiente ejemplo, solo se registra que se hizo clic:

Java

    AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
        .forCustomTemplateAd("10063170",
          new NativeCustomTemplateAd.OnCustomTemplateAdLoadedListener() {
            // Display the ad.
          },
          new NativeCustomTemplateAd.OnCustomClickListener() {
              @Override
              public void onCustomClick(NativeCustomTemplateAd ad, String assetName) {
                Log.i("MyApp", "A custom click just happened for " + assetName + "!");
              }
          }).build();
    

Kotlin

    val adLoader = AdLoader.Builder(this, "/6499/example/native")
        .forCustomTemplateAd("10063170",
            { ad ->
                // Display the ad.
            },
            { ad, assetName ->
                    Log.i("MyApp", "A custom click just happened for $assetName!")
        }).build()
    

Al principio puede parecer raro que haya listeners de clics personalizados. Al fin y al cabo, si tu aplicación avisa al SDK de que se ha hecho clic en un anuncio, ¿de qué sirve que el SDK se lo comunique a la aplicación?

Este flujo de información es útil por varias razones, pero la más importante es que permite que el SDK siga teniendo el control sobre las respuestas a los clics. Por ejemplo, puede hacer ping automáticamente a las URL de seguimiento de terceros de la creatividad y realizar otras tareas en segundo plano sin necesidad de añadir más código.