Banner adaptativo inline

Banners adaptativos inline são um formato flexível de publicidade em banner, proporcionando máxima eficiência ao otimizar o tamanho do anúncio em cada dispositivo.

Esse tipo de anúncio permite que os desenvolvedores definam uma largura e altura máximas permitidas para o anúncio, embora o tamanho ideal do anúncio ainda seja determinado automaticamente. Para selecionar o melhor tamanho de anúncio, os banners adaptativos integrados usam a altura máxima em vez da altura fixa. Dessa forma, há espaço para melhorar o desempenho.

Normalmente, esse formato é usado em aplicativos baseados em feed ou contextos em que é aceitável focar principalmente no anúncio.

Aparência

Este guia mostra como integrar banners adaptativos inline 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 banners adaptativos inline:

• Criar uma instância da classe AdView.
• Implementar os métodos do delegado.
• Carregar o anúncio.
• Passar configurações adicionais se você estiver usando Adfox.
• Receber o anúncio no método delegado e renderizá-lo.

Características da integração de banners adaptativos inline

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 delegado func adViewDidFailLoading(_ adView: AdView, error: Error). Se você precisar carregar um anúncio de func adViewDidFailLoading(_ adView: AdView, 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. Para garantir que seus banners adaptativos inline funcionem corretamente, use Auto Layout. Usar um quadro de tamanho fixo para a visualização pode resultar em uma renderização incorreta do anúncio.

4. Os banners adaptativos inline funcionam melhor quando usam toda a largura disponível. Na maioria dos casos, essa é a largura total da tela do dispositivo. Você deve incluir todas as margens e áreas seguras de exibição aplicáveis ao aplicativo.

5. Os banners adaptativos inline foram projetados para uso em conteúdo rolável. Ele pode ter a mesma altura que a tela do dispositivo ou ser limitado à altura máxima, dependendo da API.

6. Para obter o tamanho do anúncio, use o método BannerAdSize.inlineSize(withWidth: CGFloat, maxHeight: CGFloat), passando a largura disponível do contêiner do anúncio e a altura máxima permitida do anúncio como argumentos.

7. O objeto BannerAdSize, que é calculado usando o método BannerAdSize.inlineSize(withWidth: CGFloat, maxHeight: CGFloat), contém valores constantes de largura e altura do anúncio para dispositivos idênticos. Após testar o layout do seu aplicativo em um dispositivo específico, você poderá ter certeza de que o tamanho do anúncio será constante.

Criação de uma instância da classe AdView

Para exibir anúncios em banner, crie uma instância da classe AdView, passando o tamanho do anúncio e o ID do anúncio para ela. Você também precisa definir um delegado para AdView implementando o protocolo AdViewDelegate para sua classe.

Os anúncios são calculados para dispositivos usando o método BannerAdSize.inlineSize(withWidth: CGFloat, maxHeight: CGFloat) do SDK. Como argumento, passe a largura máxima permitida do contêiner do anúncio. Recomendamos usar toda a largura da tela do dispositivo ou a largura do contêiner pai. Você deve incluir todas as margens e áreas seguras de exibição aplicáveis ao aplicativo.

Você vai precisar da ID de unidade de anúncio da interface do Yandex Advertising Network (adUnitId).

Exemplo de criação de uma instância de AdView no View Controller:

final class InlineBannerViewController: UIViewController {
    private lazy var adView: AdView = {
        let adSize = BannerAdSize.inlineSize(withWidth: 320, maxHeight: 320)

        let adView = AdView(adUnitID: "R-M-XXXXX-YY", adSize: adSize)
        adView.delegate = self
        adView.translatesAutoresizingMaskIntoConstraints = false
        return adView
    }()
}

extension InlineBannerViewController: AdViewDelegate {
    func adViewDidLoad(_ adView: AdView) {
        // This method will call after successfully loading
    }

    func adViewDidFailLoading(_ adView: AdView, error: Error) {
        // This method will call after getting any error while loading the ad
    }
}

Carregamento de anúncios

Após a criação de AdView, o anúncio precisa ser carregado.

Para notificar quando os anúncios são carregados ou falham ao carregar e para acompanhar o ciclo de vida dos banners adaptativos inline, você precisa definir propriedades de delegado para o objeto da classe AdView e implementar o protocolo AdViewDelegate.

Você pode expandir os parâmetros de solicitação de anúncio através de AdRequest, passando interesses do usuário, dados contextuais da página, detalhes de localização ou outras informações. Fornecer dados contextuais adicionais na solicitação pode melhorar consideravelmente a qualidade do anúncio. Saiba mais na seção Segmentação de anúncios.

O exemplo a seguir mostra como carregar um banner adaptativo inline. Após o carregamento bem-sucedido, o método func adViewDidLoad(_ adView: AdView) do delegado AdViewDelegate será chamado:

final class InlineBannerViewController: UIViewController {
    private lazy var adView: AdView = {
        let adSize = BannerAdSize.inlineSize(withWidth: 320, maxHeight: 320)

        let adView = AdView(adUnitID: "R-M-XXXXX-YY", adSize: adSize)
        adView.delegate = self
        adView.translatesAutoresizingMaskIntoConstraints = false
        return adView
    }()

    func loadAd() {
        adView.loadAd()
    }
}

Exibição de anúncios

Depois de carregar o anúncio com êxito, você precisa renderizá-lo. Para isso, você pode usar restrições de layout automático. Pegue o adView que você obteve do método delegado e adicione-o ao contêiner. Em seguida, adicione restrições de layout automático para que o banner seja exibido onde você deseja.

final class InlineBannerViewController: UIViewController {
    private lazy var adView: AdView = {
        let adSize = BannerAdSize.inlineSize(withWidth: 320, maxHeight: 320)

        let adView = AdView(adUnitID: "R-M-XXXXX-YY", adSize: adSize)
        adView.delegate = self
        adView.translatesAutoresizingMaskIntoConstraints = false
        return adView
    }()

    func showAd() {
        view.addSubview(adView)
        NSLayoutConstraint.activate([
            adView.topAnchor.constraint(equalTo: loadButton.bottomAnchor, constant: 100),
            adView.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ])
    }
}

Teste da integração do banner adaptativo inline

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

adUnitId de demonstração: demo-banner-yandex.

Confira a lista de IDs de posicionamento de anúncios de demonstração disponíveis na seção Blocos de anúncio de demonstração para teste.

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.

Recursos adicionais

• Link para GitHub.