Estilos nativos

La configuración de estilo nativo permite que Google Ad Manager controle la renderización de tus anuncios nativos según los estilos nativos que especifiques en el producto. Primero, especifica el tamaño y la segmentación. Luego, agrega HTML, CSS y JavaScript para definir anuncios que sean responsivos y generar una visualización de calidad en todas las pantallas. No es necesario realizar ninguna de las tareas de renderización, ya que Ad Manager aplica automáticamente el estilo nativo adecuado para el destino. Los estilos nativos se implementan al igual que los anuncios de banner, por medio de un GAMBannerView. Se pueden usar con un tamaño de anuncio fijo determinado con anticipación o con un tamaño de anuncio flexible determinado durante el tiempo de ejecución.

Requisitos previos

  • SDK de anuncios de Google para dispositivos móviles (versión 7.14.0 o posterior)

En esta guía, se asume que tienes conocimientos prácticos sobre el SDK de anuncios de Google para dispositivos móviles. Si aún no lo hiciste, considera consultar nuestra guía de introducción.

Tamaño fijo

Los estilos nativos con un tamaño fijo te permiten controlar el ancho y la altura del anuncio nativo. Para establecer un tamaño fijo, sigue estos pasos:

  1. Crea una línea de pedido en la IU de Ad Manager y selecciona uno de los tamaños predefinidos del menú desplegable del campo Size.

  2. En Interface Builder, establece el ancho y el alto de GAMBannerView para que coincidan con el tamaño predefinido que seleccionaste en el paso 1. Puedes ver una lista de tamaños y sus constantes GADAdSize correspondientes en la sección Tamaño del banner.

La implementación de estilos nativos con un tamaño fijo es tan simple como seguir las instrucciones de Tu primera solicitud de banner, pero obtendrás la flexibilidad y el control sobre el código HTML, CSS y JavaScript para darle a tu anuncio de banner un aspecto nativo que sea natural en tu app.

Tamaño flexible

En algunos casos, es posible que un tamaño fijo no tenga sentido. Por ejemplo, es posible que desees que el ancho del anuncio coincida con el contenido de la app, pero que necesites que su altura se ajuste de forma dinámica al contenido del anuncio. Para manejar este caso, puedes especificar Fluid como el tamaño del anuncio en la IU de Ad Manager, que designa que el tamaño del anuncio se determina durante el tiempo de ejecución en la app. El SDK proporciona una constante GADAdSize especial, kGADAdSizeFluid, para manejar este caso. La altura del tamaño de anuncio flexible se determina de forma dinámica según el ancho definido por el publicador, lo que permite que el elemento GAMBannerView ajuste su altura para que coincida con la de la creatividad.

Solicitud flexible

A diferencia de otros formatos de anuncios, el tamaño del anuncio kGADAdSizeFluid no tiene un ancho predefinido, así que asegúrate de establecer explícitamente el ancho del marco del banner en tu código o en Interface Builder. Si no se especifica un ancho, el SDK establece de forma predeterminada la altura del banner en función del ancho completo del dispositivo.

Si realizas una solicitud de varios tamaños que incluye kGADAdSizeFluid, el anuncio que se muestra siempre se coloca dentro de un contenedor flexible y se comporta como un anuncio flexible. En el caso de que se muestre una creatividad no flexible en este contenedor flexible, el SDK centra el anuncio en el contenedor para que no tengas que modificar la restricción de ancho cada vez que se muestra un anuncio nuevo.

La implementación para realizar un solo tamaño y una solicitud flexible de tamaños múltiples es muy similar. La única diferencia es que cuando se trata de una solicitud de varios tamaños, debes configurar la propiedad validAdSizes para especificar los tamaños de anuncio válidos para esa solicitud:

Swift

bannerView.validAdSizes = [NSValueFromGADAdSize(kGADAdSizeFluid),
                           NSValueFromGADAdSize(kGADAdSizeBanner)]

Objective‑C

_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
                              NSValueFromGADAdSize(kGADAdSizeBanner) ];

Así se ve la implementación completa en el código:

Swift

var bannerView: GAMBannerView!

override func viewDidLoad() {
  super.viewDidLoad()
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  bannerView = GAMBannerView(adSize: kGADAdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [NSValueFromGADAdSize(kGADAdSizeFluid),
  //                            NSValueFromGADAdSize(kGADAdSizeBanner)]

  bannerView.adUnitID = "YOUR_AD_UNIT_ID"
  bannerView.rootViewController = self

  // Make the ad request.
  bannerView.load(GAMRequest())
}

Objective‑C

GAMBannerView *_bannerView;

- (void)viewDidLoad {
  [super viewDidLoad];
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  _bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeFluid];
  CGRect frameRect = _bannerView.frame;
  frameRect.size.width = CGRectGetWidth(self.view.bounds);
  _bannerView.frame = frameRect;

  // Uncomment this code for a multisize fluid request.
  // _bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
  //                               NSValueFromGADAdSize(kGADAdSizeBanner) ];

  _bannerView.adUnitID = @"YOUR_AD_UNIT_ID";
  _bannerView.rootViewController = self;

  // Make the ad request.
  [_bannerView loadRequest:[GAMRequest request]];
}

Para ver un ejemplo de implementación del tamaño de anuncio flexible de Ad Manager, descarga la app de demostración de la API de iOS en Objective-C o Swift.

Descargar la demostración de la API

Protocolo GADAdSizeDelegate

Es posible que desees saber la altura de un banner antes de que cambie el tamaño del anuncio. La devolución de llamada adView:willChangeAdSizeTo: notifica a su delegado antes de que la vista del banner cambie al nuevo GADAdSize. Para recibir una notificación antes de que la vista del banner cambie al nuevo tamaño del anuncio, tu clase debe cumplir con el protocolo GADAdSizeDelegate.

A continuación, se incluye una implementación de ejemplo de la devolución de llamada adView:willChangeAdSizeTo: que muestra cómo obtener el nuevo ancho y alto del banner:

Swift

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
bannerView.adSizeDelegate = self

// MARK: - GADAdSizeDelegate

func adView(_ bannerView: GADBannerView, willChangeAdSizeTo adSize: GADAdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

Objective‑C

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
_bannerView.adSizeDelegate = self;

#pragma mark - GADAdSizeDelegate

- (void)adView:(GADBannerView *)bannerView willChangeAdSizeTo:(GADAdSize)adSize {
  CGFloat height = adSize.size.height;
  CGFloat width = adSize.size.width;
}