Formatos de anuncios nativos personalizados

Formatos de anuncios personalizados

Al igual que sus contrapartes definidos por el sistema, los formatos de anuncios nativos personalizados se cargan con objetos GADAdLoader. Si incluyes la constante GADAdLoaderAdTypeCustomNative en el array adTypes cuando inicializas un GADAdLoader, se configurará para solicitar formatos nativos personalizados cuando se carguen los anuncios.

Nota: Puedes solicitar formatos nativos personalizados y definidos por el sistema de forma simultánea con un solo GADAdLoader si tienes una unidad de anuncios configurada para publicar varios formatos de anuncios. Ad Manager seleccionará la mejor creatividad nativa asociada con uno de los formatos que solicitaste.

GADCustomNativeAdLoaderDelegate

El protocolo para cargar formatos personalizados tiene dos métodos. GADAdLoader usa el primero para averiguar qué IDs de formato debe solicitar:

Swift

public func customNativeAdFormatIDs(for adLoader: GADAdLoader) -> [Any]

Objective-C

- (NSArray *)customNativeAdFormatIDsForAdLoader:(GADAdLoader *)adLoader;

Cada formato de anuncio nativo personalizado tiene un ID de formato correspondiente que lo identifica. Cuando se llame a este método, tu app debe mostrar un array que contenga los IDs de formato de los anuncios que está preparada para mostrar.

El segundo mensaje se envía cuando se carga el anuncio nativo personalizado, al igual que los de los formatos definidos por el sistema:

Swift

public func adLoader(_ adLoader: GADAdLoader,
    didReceive customNativeAd: GADCustomNativeAd)

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveCustomNativeAd:(GADCustomNativeAd *)customNativeAd;

IDs de formato

Los IDs de formato que se usan para hacer referencia de forma inequívoca a los formatos de anuncios nativos personalizados se pueden encontrar en la IU de Ad Manager, en la sección Nativo del menú desplegable Publicación:

El ID de formato de cada anuncio nativo personalizado aparece junto a su nombre. Si haces clic en uno de los nombres, se abrirá una pantalla de detalles con información sobre los campos del formato:

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

Cómo mostrar formatos de anuncios nativos personalizados

Los formatos de anuncios nativos personalizados difieren de los definidos por el sistema en que los publicadores tienen la capacidad de definir su propia lista de recursos que conforman un anuncio. Por este motivo, el proceso para mostrar anuncios nativos personalizados difiere del de los formatos definidos por el sistema en algunos aspectos:

1. Debido a que GADCustomNativeAd está diseñado para controlar cualquiera de los formatos de anuncios nativos personalizados que crees, no tiene accesores de recursos nombrados. En su lugar, ofrece métodos como imageForKey: y stringForKey: que toman el nombre del campo como argumento.
2. No hay una clase de vista de anuncio dedicada como GADNativeAdView para usar con GADCustomNativeAd. Puedes usar cualquier visualización que tenga sentido para tu experiencia del usuario.
3. Como no hay una clase de vista de anuncio dedicada, no necesitas registrar ninguna de las vistas que usas para mostrar los recursos del anuncio.

Este es un ejemplo de una vista de anuncio capaz de mostrar un anuncio nativo personalizado simple:

MySimpleNativeAdView.h

Swift

import UIKit
import GoogleMobileAds

/// Custom native ad view class with format ID 10063170.
class MySimpleNativeAdView: UIView {

  /// Weak references to this ad's asset views.
  @IBOutlet weak var headlineView: UILabel!
  @IBOutlet weak var mainImageView: UIImageView!
  @IBOutlet weak var captionView: UILabel!

  ...

  /// Populates the ad view with the custom native ad object.
  func populateWithCustomNativeAd(_ customNativeAd: GADCustomNativeAd) {
    ...
  }
}

Objective-C

@import UIKit;
@import GoogleMobileAds;

/// View representing a custom native ad format with format ID 10063170.
@interface MySimpleNativeAdView : UIView

// Weak references to this ad's asset views.
@property(weak, nonatomic) IBOutlet UILabel *headlineView;
@property(weak, nonatomic) IBOutlet UIImageView *mainImageView;
@property(weak, nonatomic) IBOutlet UILabel *captionView;

/// Populates the ad view with the custom native ad object.
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd;

@end

MySimpleNativeAdView.m (extracto)

Swift

...
func populateWithCustomNativeAd(_ customNativeAd: GADCustomNativeAd) {
  self.customNativeAd = customNativeAd

  // Populate the custom native ad assets.
  headlineView.text = self.customNativeAd.stringForKey("Headline")
  mainImageView.image = self.customNativeAd.imageForKey("MainImage")?.image
  captionView.text = self.customNativeAd.stringForKey("Caption")
}
...

Objective-C

...
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd {
  self.customNativeAd = customNativeAd;

  // Populate the custom native ad assets.
  self.headlineView.text = [customNativeAd stringForKey:@"Headline"];
  self.mainImageView.image = [customNativeAd imageForKey:@"MainImage"].image;
  self.captionView.text = [customNativeAd stringForKey:@"Caption"];
}
...

Renderiza el ícono de AdChoices

Como parte de la aplicación de la Ley de Servicios Digitales (DSA), los anuncios de reservación que se publican en el Espacio Económico Europeo (EEE) requieren un ícono de AdChoices y un vínculo a la página Acerca del anuncio de Google. Cuando implementas anuncios nativos personalizados, eres responsable de renderizar el ícono de AdChoices. Es importante que sigas los pasos para renderizar y configurar el objeto de escucha de clics para el ícono de AdChoices cuando renderices los recursos de anuncios principales.

En el siguiente ejemplo, se renderiza el ícono de AdChoices y se configura el comportamiento de clic apropiado.

Importante: Establece el ícono de AdChoices de al menos 15 píxeles por 15 píxeles.

Swift

class MySimpleNativeAdView: UIView {
  @IBOutlet weak var adChoicesView: UIImageView!

  override func awakeFromNib() {
    super.awakeFromNib()

    // Enable clicks on AdChoices.
    adChoicesView.addGestureRecognizer(
      UITapGestureRecognizer(
        target: self,
        action: #selector(performClickOnAdChoices(_:))))
    adChoicesView.isUserInteractionEnabled = true
  }

  @objc func performClickOnAdChoices(_ sender: UIImage!) {
    customNativeAd.performClickOnAsset(withKey:
      GADNativeAssetIdentifier.adChoicesViewAsset.rawValue)
  }

  func populate(withCustomNativeAd customNativeAd: GADCustomNativeAd) {

    // Render the AdChoices image.
    let adChoicesKey = GADNativeAssetIdentifier.adChoicesViewAsset.rawValue
    let adChoicesImage = customNativeAd.image(forKey: adChoicesKey)?.image
    adChoicesView.image = adChoicesImage
    adChoicesView.isHidden = adChoicesImage == nil
    ...
  }
}

Objective-C

@interface MySimpleNativeAdView ()

@property(nonatomic, weak) IBOutlet UIImageView *adChoicesView;

@end

@implementation MySimpleNativeAdView

- (void)awakeFromNib {
  [super awakeFromNib];
  // Enable clicks on AdChoices.
  [self.adChoicesView addGestureRecognizer:[[UITapGestureRecognizer alloc]
                                            initWithTarget:self
                                            action:@selector(performClickOnAdChoices:)]];
  self.adChoicesView.userInteractionEnabled = YES;
}

- (void)performClickOnAdChoices:(UITapGestureRecognizer *)sender {
    [self.customNativeAd performClickOnAssetWithKey:GADNativeAdChoicesViewAsset];
}

- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd {
  // Render the AdChoices image.
  GADNativeAdImage *adChoicesAsset = [customNativeAd
    imageForKey:GADNativeAdChoicesViewAsset];
  self.adChoicesView.image = adChoicesAsset.image;
  self.adChoicesView.hidden = (adChoicesAsset == nil);
  ...
}

Punto clave: Si usas el control de descarga de imágenes para solicitar solo URLs de imágenes, el recurso de AdChoices respeta este parámetro de configuración y solo muestra la URL de la imagen.

Video nativo para formatos de anuncios nativos personalizados

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

En la implementación de tu app, puedes usar la propiedad GADCustomNativeAd.mediaView para obtener la vista del video. Luego, agrega esta vista a tu jerarquía de vistas. Si el anuncio no tiene contenido de video, crea planes alternativos para mostrarlo sin video.

Nota: A diferencia de los anuncios nativos, que contienen una imagen en la vista de medios cuando el video no está disponible, la vista de medios de un anuncio nativo personalizado no tiene contenido si no contiene video.

En el siguiente ejemplo, se verifica si el anuncio tiene contenido de video y se muestra una imagen en su lugar si no hay un video disponible:

Swift

...
  /// Populates the ad view with the custom native ad object.
  func populate(withCustomNativeAd customNativeAd: GADCustomNativeAd) {
    if customNativeAd.videoController.hasVideoContent(),
      let mediaView = customNativeAd.mediaView {
      updateMainView(mediaView)
    } else {
      // Assumes your native format has an image asset with the name MainImage.
      let image: UIImage? = customNativeAd.image(forKey: "MainImage")?.image
      updateMainView(UIImageView(image: image))
    }
  }

  private func updateMainView(_ mainView:UIView) {
    // Assumes you have a placeholder view for your media content.
    // Remove all the placeholder's subviews.
    for subview: UIView in mainPlaceholder.subviews {
      subview.removeFromSuperview()
    }
    mainPlaceholder.addSubview(mainView)
    // Size the media view to fill our container size.
    mainView.translatesAutoresizingMaskIntoConstraints = false
    let viewDictionary: [AnyHashable: Any] = ["mainView":mainView]
    mainPlaceholder.addConstraints(NSLayoutConstraint.constraints(
      withVisualFormat: "H:|[mainView]|", options: [], metrics: nil,
      views: viewDictionary as? [String : Any] ?? [String : Any]()))
    mainPlaceholder.addConstraints(NSLayoutConstraint.constraints(
      withVisualFormat: "V:|[mainView]|", options: [], metrics: nil,
      views: viewDictionary as? [String : Any] ?? [String : Any]()))
  }
...

Objective-C

...
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)ad {
  UIView *mainView = nil;
  if (ad.videoController.hasVideoContent) {
    mainView = ad.mediaView;
  } else {
    // Assumes your native format has an image asset with the name MainImage.
    UIImage *image = [ad imageForKey:@"MainImage"].image;
    mainView = [[UIImageView alloc] initWithImage:image];
  }
  // Assumes you have a placeholder view for your media content.
  for (UIView *subview in self.mainPlaceholder.subviews) {
    [subview removeFromSuperview];
  }
  [self.mainPlaceholder addSubview:mainView];

  // Size the main view to fill our container size.
  [mainView setTranslatesAutoresizingMaskIntoConstraints:NO];
  NSDictionary *viewDictionary = NSDictionaryOfVariableBindings(mainView);
  [self.mainPlaceholder
      addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mainView]|"
                                                             options:0
                                                             metrics:nil
                                                               views:viewDictionary]];
}
...

Consulta GADVideoController 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 en funcionamiento de un video nativo en acción.

Cómo controlar los clics y las impresiones de los anuncios nativos personalizados

En el caso de los formatos de anuncios nativos personalizados, tu app es responsable de registrar las impresiones y de informar los eventos de clic al SDK.

Cómo registrar impresiones

Para registrar una impresión de un anuncio nativo personalizado, simplemente llama al método recordImpression en el GADCustomNativeAd correspondiente:

Swift

myCustomNativeAd.recordImpression()

Objective-C

[myCustomNativeAd recordImpression];

El SDK evita que se registren impresiones duplicadas para una sola solicitud, en caso de que tu app llame accidentalmente al método varias veces para el mismo anuncio.

Informe de clics

Para informar al SDK que se produjo un clic en una vista de activo, llama al método performClickOnAssetWithKey: en el GADCustomNativeAd correspondiente y pasa el nombre del activo en el que se hizo clic. Por ejemplo, si tuvieras un recurso en tu formato personalizado llamado "MainImage" y quisieras informar un clic en la vista que corresponde a ese recurso, tu código se vería de la siguiente manera:

Swift

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

Objective-C

[myCustomNativeAd performClickOnAssetWithKey:@"MainImage"];

Ten en cuenta que no necesitas llamar a este método para cada vista de recursos asociada con tu anuncio. Por ejemplo, si tuvieras otro recurso llamado "Subtítulo", que se mostrara, pero el usuario no hiciera clic en él, tu app no tendría que llamar a performClickOnAssetWithKey: para esa vista.

Cómo responder a acciones de clic personalizadas

GADCustomNativeAd tiene una propiedad customClickHandler que es de tipo GADNativeAdCustomClickHandler.

Swift

typealias GADNativeAdCustomClickHandler = (assetID: String) -> Void

Objective-C

typedef void (^GADNativeAdCustomClickHandler)(NSString *assetID);

Este es un bloque (Objective-C) o cierre (Swift) que acepta un assetID como parámetro de entrada, que identifica el recurso en el que se hizo clic.

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

1. Invoca el bloque customClickHandler en Objective-C o el cierre en Swift, si se configuró uno.
2. Realiza un bucle por las URLs de vínculo directo del anuncio y abre la primera para la que se pueda encontrar una app coincidente.
3. Abre un navegador y navega a la URL de destino tradicional del anuncio.

La propiedad customClickHandler acepta un bloque en Objective-C y un cierre en Swift. Si configuras un bloqueo o cierre, el SDK lo ejecutará y no realizará ninguna otra acción. Sin embargo, si estableces un valor nulo, el SDK recurrirá al vínculo directo o a las URLs de destino registradas con el anuncio.

Los controladores de clics personalizados permiten que tu app decida por sí misma la mejor acción que debe realizar en respuesta a un clic, ya sea que actualice la IU, presente otro controlador de vista o simplemente registre el clic. Este es un ejemplo que muestra una alerta:

Swift

myCustomNativeAd.customClickHandler = { assetID in
  if assetID == "MainImage" {
    let alertView = UIAlertView(title: "Custom Click",
        message: "You just clicked on the image!",
        delegate: self,
        cancelButtonTitle: "OK")
    alertView.alertViewStyle = .default
    alertView.show()
  }
}
myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

Objective-C

[self.customNativeAd setCustomClickHandler:^(NSString *assetID){
  if ([assetID isEqualToString:@"MainImage"]) {
    [[[UIAlertView alloc] initWithTitle:@"Custom Click"
                                message:@"You just clicked on the image!"
                               delegate:self
                      cancelButtonTitle:@"OK"
                      otherButtonTitles:nil] show];
  }
}];
[self.customNativeAd performClickOnAssetWithKey:@"MainImage"];

Al principio, puede parecer extraño que existan controladores de clics personalizados. Después de todo, tu app acaba de decirle al SDK que se produjo un clic, así que ¿por qué el SDK debería informarle eso a la app?

Este flujo de información es útil por varios motivos, pero lo más importante es que permite que el SDK mantenga el control de la respuesta al clic. Por ejemplo, puede enviar pings automáticamente a las URLs de seguimiento de terceros que se configuraron para la creatividad y controlar otras tareas en segundo plano, sin ningún código adicional.

Cómo probar el código de anuncios nativos

Anuncios de venta directa

Si deseas probar cómo son los anuncios nativos vendidos directamente, puedes usar este ID de unidad de anuncios de Ad Manager:

/21775744923/example/native

Está configurado para publicar anuncios de instalación de aplicación y de contenido de muestra, así como un formato de anuncio nativo personalizado con los siguientes recursos:

• Título (texto)
• MainImage (imagen)
• Caption (text)

Anuncios de reabastecimiento nativos

Para probar el comportamiento de los anuncios de reabastecimiento nativos, usa esta unidad de anuncios de Ad Manager:

/21775744923/example/native-backfill

Publicará anuncios de instalación de aplicación y de contenido de muestra que incluyan la superposición de AdChoices.

Recuerda actualizar el código para que haga referencia a los IDs de formato y unidad de anuncios reales antes de publicarlo.