Nativo avançado

Mostrar um NativeAd

Quando um anúncio nativo é carregado, o SDK dos anúncios para dispositivos móveis do Google invoca o listener do formato de anúncio correspondente. Seu app é responsável por exibir o anúncio, embora não necessariamente tenha que fazê-lo imediatamente. Para facilitar a exibição de formatos de anúncio definidos pelo sistema, o SDK oferece alguns recursos úteis, conforme descrito abaixo.

Classe NativeAdView

Para o formato NativeAd, há a classe NativeAdView correspondente. Essa classe é um ViewGroup que os editores precisam usar como raiz do NativeAd. Um NativeAdView corresponde a um único anúncio nativo. Cada visualização usada para mostrar os recursos desse anúncio (o ImageView que mostra o recurso de captura de tela, por exemplo) deve ser um filho de NativeAdView objeto.

A hierarquia de vistas de um anúncio nativo que usa um LinearLayout para mostrar as visualizações de recursos pode ficar assim:

<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
    android:orientation="vertical">
        <LinearLayout
        android:orientation="horizontal">
          <ImageView
           android:id="@+id/ad_app_icon" />
          <TextView
            android:id="@+id/ad_headline" />
         </LinearLayout>
         <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

Aqui está um exemplo que cria um NativeAdView e o preenche com um NativeAd:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            // Assumes you have a placeholder FrameLayout in your View layout
            // (with ID fl_adplaceholder) where the ad is to be placed.
            FrameLayout frameLayout =
                findViewById(R.id.fl_adplaceholder);
            // Assumes that your ad layout is in a file call native_ad_layout.xml
            // in the res/layout folder
            NativeAdView adView = (NativeAdView) getLayoutInflater()
                .inflate(R.layout.native_ad_layout, null);
            // This method sets the assets into the ad view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .forNativeAd { nativeAd ->
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with ID fl_adplaceholder) where the ad is to be placed.
        val frameLayout: FrameLayout = findViewById(R.id.fl_adplaceholder)
        // Assumes that your ad layout is in a file call native_ad_layout.xml
        // in the res/layout folder
        val adView = layoutInflater
                .inflate(R.layout.native_ad_layout, null) as NativeAdView
        // This method sets the assets into the ad view.
        populateNativeAdView(nativeAd, adView)
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
    }

Todos os recursos de um determinado anúncio nativo precisam ser renderizados Layout NativeAdView. O SDK dos anúncios para dispositivos móveis do Google tenta registrar um aviso quando os recursos nativos são renderizados fora de um layout de visualização de anúncio nativo.

As classes de visualização de anúncio também fornecem métodos usados para registrar a visualização usada para cada ativo individual e um para registrar o objeto NativeAd em si. O registro das visualizações dessa maneira permite que o SDK processe automaticamente as tarefas. como:

  • Gravar cliques
  • Registro de impressões quando o primeiro pixel fica visível na tela
  • Como mostrar a sobreposição das Opções de anúncios

Sobreposição das Opções de anúncios

Uma sobreposição das Opções de anúncios é adicionada a cada visualização de anúncio pelo SDK. Deixe espaço no canto de sua preferência da visualização de anúncios nativos para o logotipo das Opções de anúncios inserido automaticamente. Além disso, é importante que a sobreposição de Opções de anúncios seja facilmente visível. Escolha cores de fundo e imagens adequadas. Para mais informações sobre a aparência e a função da sobreposição, consulte Descrições de campo de anúncios nativos.

Atribuição de anúncios

Você precisa exibir uma atribuição de anúncio para indicar que a visualização é um anúncio. Saiba mais nas diretrizes de políticas.

Exemplo de código

Estas são as etapas para exibir um anúncio nativo:

  1. Crie uma instância da classe NativeAdView.
  2. Para cada recurso de anúncio a ser exibido:

    1. Preencha a visualização do recurso com o recurso no objeto do anúncio.
    2. Registre a visualização do recurso com a classe NativeAdView.
  3. Registre o MediaView caso o layout do anúncio nativo inclua um grande recurso de mídia.

  4. Registre o objeto do anúncio com a classe NativeAdView.

Confira um exemplo de função que mostra um NativeAd:

Java

private void displayNativeAd(ViewGroup parent, NativeAd ad) {

  // Inflate a layout and add it to the parent ViewGroup.
  LayoutInflater inflater = (LayoutInflater) parent.getContext()
          .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  NativeAdView adView = (NativeAdView) inflater
          .inflate(R.layout.ad_layout_file, parent);

  // Locate the view that will hold the headline, set its text, and call the
  // NativeAdView's setHeadlineView method to register it.
  TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
  headlineView.setText(ad.getHeadline());
  adView.setHeadlineView(headlineView);

  // Repeat the process for the other assets in the NativeAd
  // using additional view objects (Buttons, ImageViews, etc).

  // If the app is using a MediaView, it should be
  // instantiated and passed to setMediaView. This view is a little different
  // in that the asset is populated automatically, so there's one less step.
  MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
  adView.setMediaView(mediaView);

  // Call the NativeAdView's setNativeAd method to register the
  // NativeAdObject.
  adView.setNativeAd(ad);

  // Ensure that the parent view doesn't already contain an ad view.
  parent.removeAllViews();

  // Place the AdView into the parent.
  parent.addView(adView);
}

Kotlin

fun displayNativeAd(parent: ViewGroup, ad: NativeAd) {

  // Inflate a layout and add it to the parent ViewGroup.
  val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
          as LayoutInflater
  val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView

  // Locate the view that will hold the headline, set its text, and use the
  // NativeAdView's headlineView property to register it.
  val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
  headlineView.text = ad.headline
  adView.headlineView = headlineView

  // Repeat the process for the other assets in the NativeAd using
  // additional view objects (Buttons, ImageViews, etc).

  val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
  adView.mediaView = mediaView

  // Call the NativeAdView's setNativeAd method to register the
  // NativeAdObject.
  adView.setNativeAd(ad)

  // Ensure that the parent view doesn't already contain an ad view.
  parent.removeAllViews()

  // Place the AdView into the parent.
  parent.addView(adView)
}

Estas são as tarefas individuais:

  1. Inflar o layout

    Java

    LayoutInflater inflater = (LayoutInflater) parent.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    NativeAdView adView = (NativeAdView) inflater
            .inflate(R.layout.ad_layout_file, parent);
    

    Kotlin

    val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
            as LayoutInflater
    val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
    

    Este código está inflando um layout XML que contém visualizações para exibir um anúncio nativo anúncio e localizando uma referência para o NativeAdView. Também é possível reutilizar um NativeAdView existente se houver um no seu fragmento ou atividade; ou até mesmo criar uma instância dinamicamente, sem usar um arquivo de layout.

  2. Preencher e registrar as visualizações de recursos

    Este código de exemplo localiza a visualização usada para mostrar o título, define o texto usando o recurso de string fornecido pelo objeto de anúncio e o registra com o objeto NativeAdView:

    Java

    TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
    headlineView.setText(ad.getHeadline());
    adView.setHeadlineView(headlineView);
    

    Kotlin

    val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
    headlineView.text = ad.headline
    adView.headlineView = headlineView
    

    Esse processo de localizar a visualização, definir o valor dela e registrá-la com a classe de visualização de anúncios precisa ser repetido para cada um dos recursos fornecidos pelo objeto de anúncio nativo que o app vai mostrar.

  3. Processar cliques

    Não implemente manipuladores de cliques personalizados em visualizações acima ou dentro da visualização do anúncio nativo. Os cliques nos recursos de visualização do anúncio são processados pelo SDK, desde que você preencha e registre corretamente as visualizações de recursos, conforme discutido na seção anterior.

    Para detectar cliques, implemente o callback de clique do SDK dos anúncios para dispositivos móveis do Google:

    Java

    AdLoader adLoader = new AdLoader.Builder(context, "ca-app-pub-3940256099942544/2247696110")
        // ...
        .withAdListener(new AdListener() {
            @Override
            public void onAdFailedToLoad(LoadAdError adError) {
                // Handle the failure by logging.
            }
            @Override
            public void onAdClicked() {
                // Log the click event or other custom behavior.
            }
        })
        .build();
    

    Kotlin

    val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
        // ...
        .withAdListener(object : AdListener() {
            override fun onAdFailedToLoad(adError: LoadAdError) {
                // Handle the failure.
            }
            override fun onAdClicked() {
                // Log the click event or other custom behavior.
            }
        })
        .build()
    
  4. Registrar o MediaView

    É necessário usar o MediaView em vez de ImageView se quiser incluir um recurso de imagem principal no layout do seu anúncio nativo anúncio.

    O MediaView é um View especial criado para mostrar o principal recurso de mídia, vídeo ou imagem.

    O MediaView pode ser definido em um layout XML ou construído dinamicamente. Ele precisa ser colocado na hierarquia de visualização de um NativeAdView, assim como qualquer outra visualização de recurso. Os apps que usam uma MediaView precisam registrá-la com o NativeAdView:

    Java

     // Populate and register the media asset view.
     nativeAdView.setMediaView(nativeAdBinding.adMedia);
    

    Kotlin

     // Populate and register the media asset view.
     nativeAdView.mediaView = nativeAdBinding.adMedia
    

    ImageScaleType

    A classe MediaView tem uma propriedade ImageScaleType ao exibir imagens. Se você quiser mudar a forma como uma imagem é dimensionada no MediaView, defina o ImageView.ScaleType correspondente usando a função setImageScaleType() do MediaView:

    Java

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
    

    Kotlin

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
    

    MediaContent

    A classe MediaContent contém os dados relacionados ao conteúdo de mídia do anúncio nativo, que é exibido usando a classe MediaView. Quando o A propriedade MediaView mediaContent é definida com uma instância MediaContent:

    • Se um recurso de vídeo estiver disponível, ele será armazenado em buffer e começará a ser reproduzido no MediaView. Para saber se um recurso de vídeo está disponível, verifique hasVideoContent():

    • Se o anúncio não tiver um recurso de vídeo, o recurso mainImage será baixado e colocada dentro de MediaView.

    Por padrão, mainImage é o primeiro recurso de imagem transferido por download. Se setReturnUrlsForImageAssets(true) for usado, mainImage será null, e você precisará definir a propriedade mainImage para a imagem transferida manualmente. Essa imagem só será usada quando não houver um recurso de vídeo disponível.

  5. Registrar o objeto de anúncio nativo

    Essa etapa final registra o objeto do anúncio nativo com a visualização responsável por exibi-lo.

    Java

    adView.setNativeAd(ad);
    

    Kotlin

    adView.setNativeAd(ad)
    

Destruir anúncio

Ao terminar de mostrar seu anúncio nativo, ele deve ser destruído para que o anúncio que o lixo seja coletado corretamente.

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Exemplos no GitHub

Exemplo de implementação completa de anúncios nativos:

Java Kotlin

Próximas etapas

Confira os seguintes tópicos: