Anúncios nativos

Publicidade nativa é um tipo de anúncio em que o layout pode ser definido no lado do aplicativo. Esta funcionalidade permite alterar o estilo visual dos anúncios e seu posicionamento, considerando as especificidades do design do aplicativo.

Anúncios nativos melhoram a experiência com anúncios. Como resultado, você pode exibir mais anúncios sem que o usuário perca o interesse. Isso garante a máxima receita de publicidade a longo prazo.

A renderização de anúncios é realizada com ferramentas nativas da plataforma, o que melhora o desempenho e a qualidade dos anúncios.

Aparência

Este guia mostrará como integrar anúncios nativos em aplicativos iOS. Além de exemplos de código e instruções, contém recomendações específicas aos formatos e links para recursos adicionais.

Pré-requisito

1. Siga os passos de integração do SDK descritos em Início rápido.
2. Inicialize seu SDK de anúncios com antecedência.
3. Confirme se você está utilizando a última versão do Yandex Mobile Ads SDK. Se você estiver usando mediação, confirme se também está utilizando a última versão da compilação unificada.

Implementação

Principais passos para integrar anúncios nativos:

• Criar e configurar NativeAdLoader.
• Definir um delegado para o carregador e implementar os métodos de delegado necessários.
• Carregar o anúncio.
• Passar configurações adicionais se você estiver usando Adfox.
• Exibir o anúncio carregado.

Características da integração de anúncios nativos

1. Todas as chamadas para métodos do Yandex Mobile Ads SDK devem ser feitas a partir do thread principal.

2. Aconselhamos que você não tente carregar um novo anúncio ao receber um erro no método func nativeAdLoader(_ loader: NativeAdLoader, didFailLoadingWithError error: Error). Se você precisar carregar um anúncio de func nativeAdLoader(_ loader: NativeAdLoader, didFailLoadingWithError error: Error), restrinja as tentativas de carregamento de anúncios para evitar solicitações de anúncios malsucedidas recorrentes devido a restrições de conexão de rede.

3. Recomendamos manter uma referência forte ao anúncio e seu carregador durante todo o ciclo de vida da tela que interage com o anúncio.

4. Recomendamos calcular o tamanho do contêiner do anúncio com base no conteúdo do anúncio.

   Quando o anúncio é carregado, você precisa renderizar todos os respectivos ativos. Você pode obter a lista de componentes disponíveis no anúncio a partir do objeto de anúncio NativeAd.

5. Anúncios com vídeo geralmente têm um CTR mais alto, o que resulta em maior receita com os anúncios. Para exibir anúncios em vídeo, o tamanho do contêiner do anúncio e o componente MediaView devem ter pelo menos 300 x 160 dp (pixels de densidade independente).

6. Recomendamos usar um layout que inclua o conjunto completo de possíveis ativos. Em nossa experiência, layouts que incluem todo o conjunto de ativos têm conversão melhor.

Carregamento de anúncios

Para carregar anúncios nativos, crie um objeto NativeAdLoader.

Os parâmetros de solicitação de anúncio são configurados usando o objeto da classe NativeAdRequestConfiguration. Como parâmetros de solicitação, você precisa passar o ID do bloco de anúncios. Você também pode configurar o método de carregamento de imagem, idade, gênero e outros dados que podem melhorar a qualidade da seleção de anúncios. Saiba mais na seção Segmentação de anúncios.

Para receber notificações sobre os resultados do carregamento de anúncios, implemente o protocolo NativeAdLoaderDelegate e defina-o como um delegado para o NativeAdLoader criado anteriormente.

Para carregar um anúncio, chame o método loadAd(with: NativeAdRequestConfiguration).

O exemplo a seguir mostra como carregar anúncios nativos a partir do View Controller:

final class CustomNativeViewController: UIViewController {
    private var adLoader: NativeAdLoader?

    override func viewDidLoad() {
        adLoader = NativeAdLoader()
        adLoader?.delegate = self
    }

    private func loadNativeAd() {
        let requestConfiguration = NativeAdRequestConfiguration(adUnitID: "R-M-XXXXX-YY")
        adLoader?.loadAd(with: requestConfiguration)
    }
}

extension CustomNativeViewController: NativeAdLoaderDelegate {
    func nativeAdLoader(_ loader: NativeAdLoader, didLoad ad: NativeAd) {
         //  Notifies that a native ad is loaded
    }

    func nativeAdLoader(_ loader: NativeAdLoader, didFailLoadingWithError error: Error) {
        //  Notifies that the ad failed to load
    }
}

Renderização de anúncios

Quando o anúncio é carregado, você precisa renderizar todos os respectivos ativos. Você pode obter a lista de componentes disponíveis no anúncio a partir do objeto de anúncio NativeAd.

Existem duas maneiras de configurar o layout de um anúncio:

• Layout usando um modelo.
• Configuração manual para um layout de anúncios nativos.

Layout usando um modelo

A maneira mais fácil de trabalhar com anúncios nativos é usar um modelo padrão para layout: bastam algumas linhas de código na versão básica.

O modelo já tem o conjunto completo de ativos necessários e define o posicionamento relativo entre eles. O modelo funciona com qualquer tipo de anúncio nativo permitido.

final class NativeTemplateViewController: UIViewController, NativeAdDelegate {
    private let adView = NativeBannerView()

    // ...

    private lazy var adLoader: NativeAdLoader = {
        let adLoader = NativeAdLoader()
        adLoader.delegate = self
        return adLoader
    }()

    override func viewDidLoad() {
        setupUI()
        loadNativeAd()
    }

    private func loadNativeAd() {
        let requestConfiguration = NativeAdRequestConfiguration(adUnitID: "demo-native-content-yandex")
        adLoader.loadAd(with: requestConfiguration)
    }

    private func bindNativeAd(_ ad: NativeAd) {
        ad.delegate = self
        adView.ad = ad
    }

    private func setupUI() {
	// ...
    }
}

extension NativeTemplateViewController: NativeAdLoaderDelegate {
    func nativeAdLoader(_ loader: NativeAdLoader, didLoad ad: NativeAd) {
        bindNativeAd(ad)
    }

    func nativeAdLoader(_ loader: NativeAdLoader, didFailLoadingWithError error: Error) {
        // ...
    }
 }

Você pode personalizar o modelo de anúncios nativos. Saiba mais em Configuração do layout usando um modelo.

Configuração manual de um layout de anúncios nativos

Quando as configurações do modelo não são suficientes para obter o efeito desejado, você pode configurar anúncios nativos manualmente.

Este método permite criar manualmente o layout de anúncios nativos, definindo o posicionamento relativo dos ativos de anúncio. Seu anúncio pode conter tanto ativos de exibição obrigatória quanto opcional. Confira a lista completa em Ativos de anúncio nativo.

Para configurar manualmente a exibição de anúncios nativos:

1. Crie um view personalizado para a classe YMANativeAdView.

2. Configure o posicionamento de elementos personalizados para exibir componentes.

3. Vincule esses elementos personalizados às propriedades YMANativeAdView correspondentes:

   final class CustomNativeAdView: YMANativeAdView {
       // ...
   
       init() {
           super.init(frame: CGRect())
           setupUI()
           bindAssets()
       }
   
       private func bindAssets() {
           titleLabel = customTitleLabel
           domainLabel = customDomainLabel
           warningLabel = customWarningLabel
           sponsoredLabel = customSponsoredLabel
           feedbackButton = customFeedbackButton
           callToActionButton = customCallToActionButton
           mediaView = customMediaView
           priceLabel = customPriceLabel
           reviewCountLabel = customReviewCountLabel
           ratingView = customRatingView
           bodyLabel = customBodyLabel
           iconImageView = customIconImageView
       }
   
       private func setupUI() {
       // ...
       }
   }
   

   Observação

   Se você não vincular um elemento personalizado à propriedade YMANativeAdView para o componente obrigatório, o anúncio não será exibido.

4. Vincule o view personalizado ao objeto de anúncio NativeAd para exibir anúncios nativos no método nativeAdLoader(_ loader: NativeAdLoader, didLoad ad: NativeAd) do delegado NativeAdLoaderDelegate. Para fazer isso, chame o método bind(with adView: YMANativeAdView) para o objeto NativeAd:

   final class NativeCustomViewController: UIViewController, NativeAdDelegate {
       private let adView = NativeCustomAdView()
   
       // ...
   
       private lazy var adLoader: NativeAdLoader = {
           let adLoader = NativeAdLoader()
           adLoader.delegate = self
           return adLoader
       }()
   
       override func viewDidLoad() {
           super.viewDidLoad()
           setupUI()
           loadNativeAd()
       }
   
       private func loadNativeAd() {
           let requestConfiguration = NativeAdRequestConfiguration(adUnitID: "demo-native-app-yandex")
           adLoader.loadAd(with: requestConfiguration)
       }
   
       private func bindNativeAd(_ ad: NativeAd) {
           ad.delegate = self
           do {
               try ad.bind(with: adView)
           } catch {
               // ...
           }
       }
   
       private func setupUI() {
       // ...
       }
   }
   
   extension NativeCustomViewController: NativeAdLoaderDelegate {
       func nativeAdLoader(_ loader: NativeAdLoader, didLoad ad: NativeAd) {
           bindNativeAd(ad)
       }
   
       func nativeAdLoader(_ loader: NativeAdLoader, didFailLoadingWithError error: Error) {
           // ...
       }
   }
   

Carregamento de vários anúncios

O Yandex Mobile Ads SDK permite carregar vários anúncios em uma única solicitação (até nove anúncios).

1. Crie uma instância da classe NativeBulkAdLoader para obter anúncios nativos.

2. Crie nativeAdRequestConfiguration usando a classe NativeAdRequestConfiguration. Como parâmetros de solicitação, você pode usar o ID do bloco de anúncios, o método para carregar imagens, a idade, o gênero e outros dados que possam melhorar a qualidade da seleção de anúncios.

3. Defina um delegado para obter anúncios que implemente o protocolo NativeBulkAdLoaderDelegate.

4. Para monitorar o processo de carregamento de anúncios, implemente os métodos do protocolo NativeBulkAdLoaderDelegate:: -nativeBulkAdLoader:didLoadAds: e -nativeBulkAdLoader:didFailLoadingWithError:.

5. Envie para o carregador a configuração da solicitação e a quantidade de anúncios solicitados (o parâmetro adsCount).

// Creating a request configuration
let requestConfiguration = MutableNativeAdRequestConfiguration(adUnitID: AdUnitID)

// Creating a loader
adLoader = NativeBulkAdLoader()
adLoader.delegate = self

// Passing the request configuration and the number of requested ads to the loader
adLoader.loadAds(with: requestConfiguration, adsCount: adsCount)

// Implementing delegate methods

func nativeBulkAdLoader(_ nativeBulkAdLoader: NativeBulkAdLoader, didLoad ads: [NativeAd]) {
    // ..
    // Processing each object with the id<NativeAd> separately
}

Teste da integração de anúncios nativos

Uso de blocos de anúncios de demonstração para teste de anúncios

Recomendamos usar anúncios de teste para testar sua integração de anúncios nativos e seu próprio aplicativo.

Para garantir que anúncios de teste sejam retornados para cada solicitação de anúncio, criamos um ID especial de posicionamento de anúncios de demonstração. Use-o para verificar sua integração de anúncios.

Demonstração adUnitId para um anúncio de texto e imagem: demo-native-content-yandex.

Demonstração adUnitId para um anúncio de aplicativos móveis: demo-native-app-yandex.

Teste da integração de anúncios

Você pode testar sua integração de anúncios usando a ferramenta Console nativa.

Para ver logs detalhados, chame o método enableLogging da classe YMAMobileAds.

YMAMobileAds.enableLogging()

Para ver os logs do SDK, acesse a ferramenta Console e defina Subsystem = com.mobile.ads.ads.sdk. Você também pode filtrar logs por categoria e nível de erro.

Se você estiver tendo problemas para integrar anúncios, receberá um relatório detalhado sobre os problemas e recomendações de como corrigi-los.

Indicador de integração de anúncios nativos

Se um erro for cometido ao integrar anúncios nativos, um indicador é exibido sobre o anúncio no modo simulador. Clique no indicador para ver uma mensagem com informações de depuração para ajudar a entender o motivo do erro. Clique novamente no indicador para ocultar a mensagem.

Para ativar o indicador para dispositivos reais também, passe o valor DeviceTypeHardware | DeviceTypeSimulator no método enableVisibilityErrorIndicatorForDeviceType:.

MobileAds.enableVisibilityErrorIndicator(for: [.hardware, .simulator])

Para desativar o indicador, passe o valor DeviceTypeNone no método enableVisibilityErrorIndicatorForDeviceType:.

MobileAds.enableVisibilityErrorIndicator(for: [])

Recursos adicionais

• Link para GitHub.