Formatos de anúncios nativos personalizados

Formatos de anúncios personalizados

Assim como as versões definidas pelo sistema, os formatos de anúncios nativos personalizados são carregados usando objetos GADAdLoader. Incluir a constante GADAdLoaderAdTypeCustomNative na matriz adTypes ao inicializar um GADAdLoader vai configurar o GADAdLoader para solicitar formatos nativos personalizados ao carregar anúncios.

Observação: é possível solicitar formatos nativos personalizados e definidos pelo sistema simultaneamente com um único GADAdLoader se você tiver um bloco de anúncios configurado para veicular vários formatos de anúncio. O Ad Manager vai selecionar o melhor criativo nativo associado a um dos formatos que você solicitou.

GADCustomNativeAdLoaderDelegate

O protocolo para carregar formatos personalizados tem dois métodos. O primeiro é usado por GADAdLoader para descobrir quais IDs de formato devem ser solicitados:

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, o app precisa retornar uma matriz com os IDs de formato dos anúncios que ele está preparado para mostrar.

A segunda mensagem é enviada quando o anúncio nativo personalizado é carregado, semelhante às mensagens para 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úncio nativo personalizados podem ser encontrados na interface do Ad Manager na seção Nativo dentro do menu suspenso Entrega:

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

Nela, é possível adicionar, editar e remover campos individuais. Anote o Nome de cada um dos recursos. O nome é a chave usada para receber os dados de cada recurso ao exibir o formato de anúncio nativo personalizado.

Como mostrar formatos de anúncios nativos personalizados

Os formatos de anúncios nativos personalizados são diferentes dos definidos pelo sistema porque 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 GADCustomNativeAd foi criado para processar qualquer um dos formatos de anúncio nativo personalizado que você cria, ele não tem acessórios de recursos nomeados. Em vez disso, ele oferece métodos como imageForKey: e stringForKey:, que usam o nome do campo como um argumento.
2. Não há uma classe de visualização de anúncio dedicada, como GADNativeAdView, para usar com GADCustomNativeAd. Você pode usar qualquer visualização que faça sentido para a experiência do usuário.
3. Como não há uma classe de visualização de anúncio dedicada, não é necessário registrar nenhuma das visualizações usadas para mostrar os recursos do anúncio.

Confira um exemplo de visualização de anúncio capaz de mostrar um anúncio nativo simples e 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 (excerto)

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

Renderizar o ícone "Opções de anúncios"

Como parte do apoio à Lei dos Serviços Digitais (DSA), os anúncios de reserva veiculados no Espaço Econômico Europeu (EEE) exigem um ícone "Opções de anúncios" e um link para a página "Sobre este anúncio" do Google. Ao implementar anúncios nativos personalizados, você é responsável por renderizar o ícone "Opções de anúncios". É importante seguir algumas etapas para renderizar e definir o listener de cliques do ícone "Opções de anúncios" ao renderizar os principais recursos de anúncios.

O exemplo a seguir renderiza o ícone da AdChoices e configura o comportamento de clique apropriado.

Importante: defina o ícone da Opções de anúncios com pelo menos 15 x 15 pixels.

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);
  ...
}

Importante: se você usar o controle de download de imagens para solicitar apenas URLs de imagens, o recurso AdChoices vai respeitar essa configuração e retornará apenas o URL da imagem.

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

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

Na implementação do app, você pode usar a propriedade GADCustomNativeAd.mediaView para acessar a visualização do vídeo. Em seguida, adicione essa visualização à hierarquia de visualização. Se o anúncio não tiver conteúdo de vídeo, faça planos alternativos para exibir o anúncio sem um vídeo.

Observação: ao contrário dos anúncios nativos, que contêm uma imagem na visualização de mídia quando o vídeo não está disponível, a visualização de mídia de um anúncio nativo personalizado não tem conteúdo se não tiver vídeo.

O exemplo abaixo verifica se o anúncio tem conteúdo em 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]];
}
...

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 conferir um exemplo de vídeo nativo em ação.

Como processar impressões e cliques em anúncios nativos personalizados

Para formatos de anúncios nativos personalizados, seu app é responsável por registrar impressões e informar eventos de clique ao SDK.

Impressões de gravação

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

Swift

myCustomNativeAd.recordImpression()

Objective-C

[myCustomNativeAd recordImpression];

O SDK impede que impressões duplicadas sejam registradas para uma única solicitação, caso o app chame o método várias vezes para o mesmo anúncio.

Como informar 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 formato personalizado chamado "MainImage" e quisesse informar um clique na visualização correspondente a esse recurso, seu código seria assim:

Swift

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

Objective-C

[myCustomNativeAd performClickOnAssetWithKey:@"MainImage"];

Não é necessário chamar esse método para cada visualização de recurso associada ao seu anúncio. Se você tivesse outro recurso chamado "Caption", por exemplo, que deveria ser exibido, 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 do tipo GADNativeAdCustomClickHandler

Swift

typealias GADNativeAdCustomClickHandler = (assetID: String) -> Void

Objective-C

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

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

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

1. Invocar o bloco customClickHandler no Objective-C ou no fechamento no Swift, se um foi definido.
2. Percorrer os URLs de deeplink do anúncio e abrir o primeiro em que um app correspondente possa ser encontrado.
3. Abra um navegador e navegue até o URL de destino tradicional do anúncio.

A propriedade customClickHandler aceita um bloco no Objective-C e uma clausura no Swift. Se você definir um bloqueio ou fechamento, o SDK vai executá-lo e não vai fazer mais nada. No entanto, se você definir um valor nulo, o SDK vai usar o link direto e/ou os URLs de destino registrados com o anúncio.

Os processadores de cliques personalizados permitem que o app decida por si mesmo a melhor ação a ser tomada em resposta a um clique, seja atualizando a interface, apresentando outro controlador de visualização ou apenas registrando 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"];

Pode parecer estranho que os manipuladores de cliques personalizados existam. Afinal, seu app acabou de informar ao SDK que um clique ocorreu. Por que o SDK precisaria informar isso ao app?

Esse fluxo de informações é útil por alguns motivos, mas o mais importante é que ele permite que o SDK continue no controle da resposta ao clique. Ele pode fazer ping automaticamente em URLs de rastreamento de terceiros que foram definidos para o criativo, por exemplo, e processar outras tarefas em segundo plano, sem nenhum código extra.

Como testar o código de anúncios nativos

Anúncios de venda direta

Se você quiser testar como são os anúncios nativos vendidos diretamente, use este ID do bloco de anúncios do Ad Manager:

/21775744923/example/native

Ele está configurado para veicular anúncios de conteúdo e de instalação de apps de exemplo, bem como 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 dos anúncios de preenchimento nativo, use este bloco de anúncios do Ad Manager:

/21775744923/example/native-backfill

Ele vai veicular anúncios de conteúdo e de instalação de apps que incluem a sobreposição do AdChoices.

Atualize o código para que ele se refira aos IDs de bloco de anúncios e formato antes de ativar.