Formatos de anúncios nativos personalizados

Formatos de anúncio personalizados

Assim como ocorre com os formatos definidos 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 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:

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

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

Cada formato de anúncio nativo personalizado tem um ID de formato 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, assim como aqueles para formatos definidos pelo sistema:

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

- (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 na seção Nativo do menu suspenso Exibição:

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

Aqui é possível adicionar, editar e remover campos individuais. Anote o Nome de cada um dos recursos. O nome é a chave usada para conseguir os dados de cada recurso ao exibir seu 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 apresenta algumas diferenças em comparação com os formatos definidos pelo sistema:

1. Como o objetivo de GADCustomNativeAd é processar qualquer um dos formatos de anúncios nativos personalizados que você cria, 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 existe 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 dedicada de visualização do anúncio, não é necessário registrar nenhuma das visualizações usadas para mostrar os recursos do anúncio.

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

MySimpleNativeAdView.h

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

@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)

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

...
- (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 da Lei de Serviços Digitais (DSA), os anúncios de reserva veiculados no Espaço Econômico Europeu (EEE) exigem um ícone de 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 pela renderização do ícone Opções de anúncios. É importante seguir as etapas para renderizar e definir o listener de cliques do ícone "Opções de anúncios" ao renderizar os principais recursos.

O exemplo a seguir renderiza o ícone "Opções de anúncios" e configura o comportamento de clique adequado.

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

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

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

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

Na implementação do seu app, você pode usar a propriedade GADCustomNativeAd.mediaView para conferir a visualização do vídeo. Em seguida, 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 se um vídeo não estiver disponível:

...
  /// 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]()))
  }
...

...
- (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 você pode 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 cliques e impressões de anúncios nativos personalizados

Para formatos de anúncios nativos personalizados, o aplicativo é responsável por registrar impressões e relatar eventos de clique para o 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:

myCustomNativeAd.recordImpression()

[myCustomNativeAd recordImpression];

O SDK evita que impressões duplicadas sejam registradas 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 uma visualização de recurso recebeu um clique, 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 que correspondeu a esse recurso, seu código ficaria assim:

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

[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 cliques personalizados

GADCustomNativeAd tem uma propriedade customClickHandler, que é do tipo GADNativeAdCustomClickHandler

typealias GADNativeAdCustomClickHandler = (assetID: String) -> Void

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

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

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

1. Invoque o bloco customClickHandler no Objective-C ou o fechamento no Swift, se um tiver sido definido.
2. Consulte os URLs de link direto do anúncio e abra o primeiro em que um app correspondente seja 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 um fechamento no Swift. Se você definir um bloqueio ou uma interdição, o SDK o executará e não fará mais ações. No entanto, se você definir um valor nulo, o SDK usará o link direto e/ou os URLs de destino registrados com o anúncio.

Os gerenciadores de cliques personalizados permitem que o app decida por conta própria a melhor ação 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:

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")

[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 é configurado para veicular exemplos de anúncios de instalação de apps 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 nativos

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

/6499/example/native-backfill

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

Lembre-se de atualizar o código para que ele consulte seus IDs de formato e bloco de anúncios reais antes de ativá-lo.