Formatos de anúncios nativos personalizados

Formatos de anúncio personalizados

Como acontece com os formatos definidos pelo sistema, os formatos de anúncios nativos personalizados são carregados usando objetos GADAdLoader. A inclusão da constante GADAdLoaderAdTypeCustomNative na matriz adTypes ao inicializar um GADAdLoader configura a solicitação de formatos nativos personalizados ao carregar anúncios.

GADCustomNativeAdLoaderDelegate

O protocolo para carregar formatos personalizados tem dois métodos. O primeiro é usado pelo GADAdLoader para descobrir quais IDs de formato ele precisa solicitar:

Swift

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

Objective-C

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

Cada formato de anúncio nativo personalizado tem um ID correspondente que o identifica. Quando esse método é chamado, seu app precisa retornar uma matriz com os IDs de formato dos anúncios que está preparado para mostrar.

A segunda mensagem é enviada quando o anúncio nativo personalizado é carregado, de forma bem parecida com as dos formatos definidos pelo sistema:

Swift

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

Objective-C

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

IDs de formato

Os IDs de formato usados para se referir exclusivamente a formatos de anúncios nativos personalizados podem ser encontrados na interface Ad Manager da interface, na seção Nativo do menu suspenso Exibição:

O ID de formato de cada anúncio nativo personalizado aparece ao lado do nome. Ao clicar em um dos nomes, você acessa uma tela de detalhes que mostra informações sobre os campos do formato:

Aqui, campos individuais podem ser adicionados, editados e removidos. Anote o Nome de cada um dos recursos. O nome é a chave usada para coletar os dados de cada recurso ao exibir o formato de anúncio nativo personalizado.

Como exibir formatos de anúncios nativos personalizados

Os formatos de anúncios nativos personalizados são diferentes dos definidos pelo sistema, em que os editores podem definir a própria lista de recursos que compõem um anúncio. Por isso, o processo de exibição de anúncios nativos personalizados é diferente do processo para formatos definidos pelo sistema de algumas maneiras:

  1. Como o objetivo de GADCustomNativeAd é processar qualquer um dos formatos de anúncios nativos personalizados que você criar, ele não tem acessadores de recursos nomeados. Em vez disso, ela oferece métodos como imageForKey: e stringForKey:, que usam o nome do campo como argumento.
  2. Não há uma classe de visualização de anúncio dedicada como GADNativeAdView para usar com GADCustomNativeAd. Você pode usar a visualização que faz sentido para sua experiência do usuário.
  3. Como não há uma classe dedicada de visualização do anúncio, você não precisa registrar as visualizações usadas para mostrar os recursos do anúncio.

Veja um exemplo de uma visualização capaz de exibir um anúncio nativo simples personalizado:

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 (trecho)

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"];
}
...

Vídeo nativo para formatos personalizados de anúncios nativos

Ao criar um formato personalizado, você tem a opção de qualificar o formato para vídeo.

Na implementação do app, use a propriedade GADCustomNativeAd.mediaView para conferir a visualização do vídeo. Depois, adicione essa visualização à sua hierarquia de visualização. Se o anúncio não tiver conteúdo de vídeo, faça planos alternativos para mostrar o anúncio sem vídeo.

O exemplo abaixo verifica se o anúncio tem conteúdo de vídeo e exibe uma imagem no lugar dele se um vídeo não estiver disponível:

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]];
  [self.mainPlaceholder
      addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[mainView]|"
                                                             options:0
                                                             metrics:nil
                                                               views:viewDictionary]];
}
...

Consulte GADVideoController para mais informações sobre como personalizar a experiência de vídeo de um anúncio nativo personalizado.

Faça o download do exemplo de renderização personalizada do Ad Manager para um exemplo funcional de vídeo nativo em ação.

Processar impressões e cliques de anúncios nativos personalizados

No caso de formatos de anúncios nativos personalizados, o app é responsável por registrar as impressões e informar os eventos de clique ao SDK.

Registro de impressões

Para registrar uma impressão de um anúncio nativo personalizado, basta chamar o método recordImpression no GADCustomNativeAd correspondente:

Swift

myCustomNativeAd.recordImpression()

Objective-C

[myCustomNativeAd recordImpression];

O SDK impede o registro de impressões duplicadas para uma única solicitação, caso seu app chame o método várias vezes para o mesmo anúncio por engano.

Como gerar relatórios de cliques

Para informar ao SDK que um clique ocorreu em uma visualização de recurso, chame o método performClickOnAssetWithKey: no GADCustomNativeAd correspondente e transmita o nome do recurso que foi clicado. Por exemplo, se você tivesse um recurso no seu formato personalizado chamado "MainImage" e quisesse informar um clique na visualização que correspondesse a esse recurso, seu código ficaria assim:

Swift

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

Objective-C

[myCustomNativeAd performClickOnAssetWithKey:@"MainImage"];

Não é necessário chamar esse método para cada visualização de recursos associada ao seu anúncio. Se você tivesse outro recurso chamado "Caption" (por exemplo, que deveria ser mostrado, mas não clicado ou tocado pelo usuário), seu app não precisaria chamar performClickOnAssetWithKey: para essa visualização.

Como responder a ações de clique personalizadas

GADCustomNativeAd tem uma propriedade customClickHandler que é do tipo GADNativeAdCustomClickHandler

Swift

typealias GADNativeAdCustomClickHandler = (assetID: String) -> Void

Objective-C

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

Esse é um bloco (Objective-C) / fechamento (Swift) que aceita um assetID como parâmetro de entrada, que identifica o recurso que recebeu o clique.

Quando um clique é realizado em um anúncio nativo personalizado, há três respostas possíveis do SDK, que podem ser tentadas nesta ordem:

  1. Invoque o bloco customClickHandler no Objective-C ou o fechamento no Swift, se um tiver sido definido.
  2. Percorra os URLs de link direto do anúncio e abra o primeiro em que um app correspondente pode ser encontrado.
  3. Abra um navegador e acesse o URL de destino tradicional do anúncio.

A propriedade customClickHandler aceita um bloco em Objective-C e um fechamento no Swift. Se você definir um bloqueio ou um fechamento, o SDK o executará e não fará mais ações. No entanto, se você definir um valor nulo, o SDK recorrerá ao link direto e/ou aos URLs de destino registrados com o anúncio.

Os gerenciadores de cliques personalizados permitem que seu app decida por conta própria a melhor ação a ser realizada em resposta a um clique, seja atualizar a interface, apresentar outro controlador de visualização ou apenas registrar o clique. Confira um exemplo que mostra um 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"];

Como testar o código de anúncio nativo

Anúncios de venda direta

Para testar como são os anúncios nativos de venda direta, use este Ad Manager ID do bloco de anúncios:

/6499/example/native

Ele está configurado para exibir exemplos de anúncios de instalação do app e de conteúdo, além de um formato de anúncio nativo personalizado com os seguintes recursos:

  • Título (texto)
  • MainImage (imagem)
  • Legenda (texto)

Anúncios de preenchimento nativo

Para testar o comportamento de anúncios de preenchimento nativo, use este bloco de anúnciosAd Manager :

/6499/example/native-backfill

Ele vai veicular anúncios de conteúdo e de instalação do app de exemplo que incluem a sobreposição de Opções de anúncios.

Lembre-se de atualizar seu código para que ele consulte seus IDs de formato e bloco de anúncios reais antes de publicar.