Formatos personalizados de los anuncios nativos

Formatos personalizados del anuncio nativo

Además de los formatos nativos definidos por el sistema, los publicadores de Ad Manager tienen la opción de crear sus propios formatos de anuncios nativos a través de la definición de listas personalizadas de elementos. Se llaman formatos de anuncios nativos personalizados y se pueden usar con anuncios reservados. Esto permite a los publicadores pasar datos estructurados arbitrarios a sus apps. Estos anuncios se representan con el objeto NativeCustomFormatAd.

Carga formatos de anuncios nativos personalizados

En esta guía, se explica cómo cargar y mostrar formatos de anuncios nativos personalizados.

Cómo crear un AdLoader

Al igual que los anuncios nativos, los formatos de anuncios nativos personalizados se cargan con la clase AdLoader:

Java

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

Kotlin

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

El método forCustomFormatAd configura AdLoader para solicitar formatos de anuncios nativos personalizados. Se pasan tres parámetros al método:

  • Es el ID del formato del anuncio nativo personalizado que debe solicitar la AdLoader. Cada formato de anuncio nativo personalizado tiene un ID asociado. Este parámetro indica qué formato quiere que tu app solicite la AdLoader.
  • Se invocará un objeto OnCustomFormatAdLoadedListener cuando se cargue correctamente un anuncio.
  • Un objeto OnCustomClickListener opcional que se invocará cuando el usuario presione el anuncio o haga clic en él Para obtener más información sobre este objeto de escucha, consulta la sección "Cómo administrar los clics y las impresiones" a continuación.

Debido a que una sola unidad de anuncios se puede configurar para publicar más de un formato de creatividad, se puede llamar a forCustomFormatAd varias veces con IDs de formato únicos a fin de preparar el cargador de anuncios para más de un formato de anuncio nativo personalizado posible.

ID del formato del anuncio nativo personalizado

El ID de formato que se usa para identificar un formato de anuncio nativo personalizado se puede encontrar en la IU de Ad Manager, en la sección Nativo del menú desplegable Publicación:

Cada ID de formato de anuncio nativo personalizado aparece junto a su nombre. Si haces clic en uno de los nombres, accederás a una pantalla de detalles que muestra información sobre los campos del formato:

Desde aquí, se pueden agregar, editar y quitar campos individuales. Toma nota del Nombre de cada uno de los elementos. El nombre es la clave que se usa para obtener los datos de cada recurso cuando se muestra el formato del anuncio nativo personalizado.

Muestra formatos de anuncios nativos personalizados

Los formatos de anuncios nativos personalizados difieren de los definidos por el sistema en que los editores pueden definir su propia lista de elementos que conforman un anuncio. Por lo tanto, el proceso para mostrar uno difiere de los formatos definidos por el sistema de algunas maneras:

  1. Debido a que la clase NativeCustomFormatAd está diseñada para controlar cualquiera de los formatos de anuncios nativos personalizados que definas en Ad Manager, no tiene el nombre de "métodos get" para los elementos. En cambio, ofrece métodos como getText y getImage, que toman el nombre del campo como parámetro.
  2. No hay una clase dedicada de vista de anuncios como NativeAdView para usar con NativeCustomFormatAd. Puedes usar cualquier diseño que tenga sentido para la experiencia del usuario.
  3. Debido a que no hay una clase ViewGroup dedicada, no es necesario registrar ninguna de las vistas que usas para mostrar los elementos del anuncio. Esto ahorra algunas líneas de código cuando se muestra el anuncio, pero también significa que deberás realizar un poco más de trabajo para controlar los clics más adelante.

A continuación, se incluye una función de ejemplo que muestra un NativeCustomFormatAd:

Java

public void displayCustomFormatAd (ViewGroup parent,
                                     NativeCustomFormatAd customFormatAd) {
    // 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_format_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(customFormatAd.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(
            customFormatAd.getImage("MainImage").getDrawable());

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

Kotlin

public fun displayCustomFormatAd (parent: ViewGroup,
                                customFormatAd: NativeCustomFormatAd) {
    val adView = layoutInflater
            .inflate(R.layout.ad_simple_custom_format, null)

    val myHeadlineView = adView.findViewById<TextView>(R.id.headline)
    myHeadlineView.setText(customFormatAd.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(
            customFormatAd.getImage("MainImage").drawable;

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

Video nativo para formatos de anuncios nativos personalizados

Cuando creas un formato personalizado, tienes la opción de hacer que el formato sea apto para video.

En la implementación de tu app, puedes usar NativeCustomFormatAd.getMediaContent() para obtener el contenido multimedia. Luego, llama a setMediaContent() para establecer el contenido multimedia en tu vista multimedia. Si el anuncio no tiene contenido de video, haz planes alternativos para mostrarlo sin el video.

El siguiente ejemplo verifica si el anuncio tiene contenido de video y muestra una imagen en su lugar si un video no está disponible:

Java

// Called when a custom native ad loads.
@Override
public void onCustomFormatAdLoaded(final NativeCustomFormatAd ad) {

  MediaContent mediaContent = ad.getMediaContent();

  // Assumes you have a FrameLayout in your view hierarchy with the id media_placeholder.
  FrameLayout mediaPlaceholder = (FrameLayout) findViewById(R.id.media_placeholder);

  // Apps can check the MediaContent's hasVideoContent property to determine if the
  // NativeCustomFormatAd has a video asset.
  if (mediaContent != null && mediaContent.hasVideoContent()) {
    MediaView mediaView = new MediaView(mediaPlaceholder.getContext());
    mediaView.setMediaContent(mediaContent);
    mediaPlaceholder.addView(mediaView);

    // Create a new VideoLifecycleCallbacks object and pass it to the VideoController. The
    // VideoController will call methods on this object when events occur in the video
    // lifecycle.
    VideoController vc = mediaContent.getVideoController();
    vc.setVideoLifecycleCallbacks(
        new VideoController.VideoLifecycleCallbacks() {
          @Override
          public void onVideoEnd() {
            // Publishers should allow native ads to complete video playback before
            // refreshing or replacing them with another ad in the same UI location.
            super.onVideoEnd();
          }
        });
  } else {
    ImageView mainImage = new ImageView(this);
    mainImage.setAdjustViewBounds(true);
    mainImage.setImageDrawable(ad.getImage("MainImage").getDrawable());
    mediaPlaceholder.addView(mainImage);
    mainImage.setOnClickListener(
        new View.OnClickListener() {
          @Override
          public void onClick(View view) {
            ad.performClick("MainImage");
          }
        });
  }
}

Kotlin

// Called when a custom native ad loads.
NativeCustomFormatAd.OnCustomFormatAdLoadedListener { ad ->

  val mediaContent = ad.mediaContent

  // Apps can check the MediaContent's hasVideoContent property to determine if the
  // NativeCustomFormatAd has a video asset.
  if (mediaContent != null && mediaContent.hasVideoContent()) {
    val mediaView = MediaView(mediaPlaceholder.getContest())
    mediaView.mediaContent = mediaContent

    val videoController = mediaContent.videoController

    // Create a new VideoLifecycleCallbacks object and pass it to the VideoController. The
    // VideoController will call methods on this object when events occur in the video
    // lifecycle.
    if (videoController != null) {
      videoController.videoLifecycleCallbacks =
        object : VideoController.VideoLifecycleCallbacks() {
          override fun onVideoEnd() {
            // Publishers should allow native ads to complete video playback before refreshing
            // or replacing them with another ad in the same UI location.
            super.onVideoEnd()
          }
        }
    }
  } else {
    val mainImage = ImageView(this)
    mainImage.adjustViewBounds = true
    mainImage.setImageDrawable(ad.getImage("MainImage")?.drawable)

    mainImage.setOnClickListener { ad.performClick("MainImage") }
    customTemplateBinding.simplecustomMediaPlaceholder.addView(mainImage)
  }
}

Consulta MediaContent para obtener más información sobre cómo personalizar la experiencia de video de un anuncio nativo personalizado.

Descarga el ejemplo de renderización personalizada de Ad Manager para ver un ejemplo funcional de un video nativo en acción.

Impresiones y clics de formatos de anuncios nativos personalizados

Con los formatos de anuncios nativos personalizados, tu app es responsable de registrar impresiones y de informar eventos de clic al SDK de anuncios de Google para dispositivos móviles.

Registra impresiones

Para registrar una impresión para un anuncio con formato personalizado, llama al método recordImpression en el NativeCustomFormatAd correspondiente:

myCustomFormatAd.recordImpression();

Si tu app llama accidentalmente al método dos veces para el mismo anuncio, el SDK evitará automáticamente que se registre una impresión duplicada para una sola solicitud.

Informar clics

Para informar al SDK que se produjo un clic en la vista de elementos, llama al método performClick en el objeto NativeCustomFormatAd correspondiente y pasa el nombre del recurso en el que se hizo clic. Por ejemplo, si tienes un recurso en tu formato personalizado llamado "MainImage" y deseas informar un clic en el ImageView que corresponde a ese recurso, tu código se vería de la siguiente manera:

myCustomFormatAd.performClick("MainImage");

Ten en cuenta que no es necesario que llames a este método para cada vista asociada con tu anuncio. Si tenías otro campo llamado "Caption" que estaba destinado a mostrarse, pero que el usuario no hizo clic ni presionaba en él, tu app no necesita llamar a performClick para la vista de ese recurso.

Cómo responder a acciones de clic personalizadas

Cuando se realiza un clic en un anuncio con formato personalizado, hay tres respuestas posibles del SDK que se intentan en este orden:

  1. Invoca el elemento OnCustomClickListener desde AdLoader, si se proporcionó uno.
  2. Para cada una de las URLs de vínculo directo del anuncio, intenta ubicar un agente de resolución de contenido e inicia el primero que se resuelva.
  3. Abra un navegador y vaya a la URL de destino tradicional del anuncio.

El método forCustomFormatAd acepta un OnCustomClickListener. Si pasas un objeto de escucha, el SDK invoca su método onCustomClick y no realiza ninguna otra acción. Sin embargo, si pasas un valor nulo como objeto de escucha, el SDK recurrirá a las URLs de vínculo directo o de destino registradas con el anuncio.

Los objetos de escucha de clics personalizados permiten que la app decida la mejor acción para responder a un clic, ya sea actualizar la IU, iniciar una actividad nueva o simplemente registrar el clic. A continuación, se muestra un ejemplo que simplemente registra que se produjo un clic:

Java

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

Kotlin

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

Al principio, puede parecer extraño que existan objetos de escucha de clics personalizados. Después de todo, tu app solo le informa al SDK que se produjo un clic. ¿Por qué debería el SDK responder e informarlo a la app?

Este flujo de información es útil por varias razones, pero lo más importante es que permite que el SDK mantenga el control de la respuesta al clic. Puede hacer ping automáticamente a las URLs de seguimiento de terceros que se configuraron, por ejemplo, y manejar otras tareas en segundo plano, sin ningún código adicional.