Estilos nativos

La configuración de estilos nativos permite que Google Ad Manager controle la renderización de tus anuncios nativos en función de 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 responsivos que produzcan una visualización de calidad en todas las pantallas. No es necesario que realices ninguna renderización. Ad Manager aplica automáticamente el estilo nativo correcto para el destino. Los estilos nativos se implementan de la misma manera que los anuncios de banner, con 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 en 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 da por sentado que tienes conocimientos prácticos del SDK de Google Mobile Ads. 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 la altura de GAMBannerView para que coincidan con el tamaño predefinido que seleccionaste en el paso 1. Puedes ver una lista de los tamaños y sus constantes GADAdSize correspondientes en la sección Tamaño del banner.

Implementar estilos nativos con un tamaño fijo es tan simple como seguir las instrucciones que se indican en Tu primera solicitud de banner, pero obtienes la flexibilidad y el control sobre el código HTML, CSS y JavaScript para darle a tu anuncio de banner un aspecto nativo que se vea natural en tu aplicación.

Tamaño flexible

En algunos casos, un tamaño fijo puede no tener sentido. Por ejemplo, es posible que desees que el ancho del anuncio coincida con el contenido de tu app, pero que su altura se ajuste de forma dinámica para adaptarse al contenido del anuncio. Para controlar este caso, puedes especificar Fluid como el tamaño del anuncio en la IU de Ad Manager, lo que designa que el tamaño del anuncio se determina en el tiempo de ejecución en la app. El SDK proporciona una constante GADAdSize especial, kGADAdSizeFluid, para controlar 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 GAMBannerView ajuste su altura para que coincida con la de la creatividad.

Solicitud fluida

A diferencia de otros formatos de anuncios, el tamaño del anuncio kGADAdSizeFluid no tiene un ancho predefinido, por lo que debes configurar 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 caso de que se muestre una creatividad no fluida en este contenedor fluido, 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 una solicitud fluida de un solo tamaño y de varios tamaños es muy similar. La única diferencia es que, para una solicitud de varios tamaños, configuras la propiedad validAdSizes para especificar los tamaños de anuncios que son válidos para la solicitud de anuncios:

Swift

bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

Objective-C

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

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

Swift

var bannerView: AdManagerBannerView!

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 = AdManagerBannerView(adSize: AdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

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

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

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 Swift o Objective-C.

Descarga la demostración de la API

Protocolo GADAdSizeDelegate

Es posible que quieras conocer la altura de un banner antes de que cambie su tamaño de anuncio. La devolución de llamada de 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 muestra una implementación de ejemplo de la devolución de llamada adView:willChangeAdSizeTo: que muestra cómo obtener el nuevo ancho y la nueva altura 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: BannerView, willChangeAdSizeTo adSize: AdSize) {
  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;
}