Esta página foi traduzida pela API Cloud Translation.

Nativo avançado

Exibir um NativeAd

Quando um anúncio nativo é carregado, o SDK dos anúncios para dispositivos móveis do Google invoca o listener para o formato de anúncio correspondente. Seu app fica responsável por exibir o anúncio, embora não tenha que fazer isso imediatamente. Para facilitar a exibição de formatos de anúncios 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 único NativeAdView corresponde a um único anúncio nativo. Cada visualização usada para mostrar os recursos desse anúncio (a ImageView que exibe o recurso de captura de tela, por exemplo) precisa ser filha do objeto NativeAdView.

A hierarquia de visualização de um anúncio nativo que usa um LinearLayout para mostrar as visualizações de recursos pode ter esta aparência:

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


         // Other assets such as image or media view, call to action, etc follow.
         ...
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

Veja um exemplo que cria um NativeAdView e o preenche com um NativeAd:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "AD_UNIT_ID")
    .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 text, images and the native ad, etc into the ad
            // view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "AD_UNIT_ID")
    .forNativeAd { nativeAd ->
        // 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 text, images and the native ad, etc into the ad
        // view.
        populateNativeAdView(nativeAd, adView)
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with id ad_frame) where the ad is to be placed.
        ad_frame.removeAllViews()
        ad_frame.addView(adView)
    }

Todos os recursos de um determinado anúncio nativo precisam ser renderizados no 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 do anúncio também fornecem métodos usados para registrar a visualização usada para cada recurso individual e um para registrar o próprio objeto NativeAd. Registrar as visualizações dessa maneira permite que o SDK processe automaticamente tarefas como:

Registro de cliques
Registro de impressões quando o primeiro pixel fica visível na tela
Exibição da sobreposição de Opções de anúncios para criativos de preenchimento nativo (atualmente limitada a um grupo seleto de editores)

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

Uma sobreposição das Opções de anúncios é adicionada pelo SDK como uma visualização de anúncio quando um anúncio de preenchimento é retornado. Se o aplicativo usar preenchimento de anúncios nativos, deixe um espaço no canto preferido da visualização do anúncio nativo para o logotipo das Opções de anúncios, que é inserido automaticamente. Além disso, é importante que a sobreposição das Opções de anúncios esteja facilmente visível. Escolha as cores do plano de fundo e as imagens adequadamente. Para mais informações sobre a aparência e a função da sobreposição, consulte as diretrizes de implementação de anúncios nativos programáticos.

Atribuição de anúncios nativos programáticos

Ao exibir anúncios nativos programáticos, é preciso mostrar 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:

Crie uma instância da classe NativeAdView.
Para cada recurso de anúncio a ser exibido:
1. Preencha a visualização de recursos com o recurso no objeto de anúncio.
2. Registrar a visualização do recurso com a classe ViewGroup.
Registre o MediaView se o layout do anúncio nativo incluir um grande recurso de mídia.
Registre o objeto de anúncio com a classe ViewGroup.

Confira um exemplo de função que exibe 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 above 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 above 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:

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

Esse código está inflando um layout XML que contém visualizações para mostrar um anúncio nativo e, em seguida, localiza uma referência ao NativeAdView. Também é possível reutilizar um NativeAdView já existente se houver um no fragmento ou na atividade, ou até mesmo criar uma instância dinamicamente sem usar um arquivo de layout.

Preencher e registrar as visualizações de recursos

Este exemplo de código 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 a 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 para localizar a visualização, definir o valor dela e registrá-la na classe de visualização do anúncio precisa ser repetido para cada um dos recursos fornecidos pelo objeto de anúncio nativo que o app exibirá.

Processar cliques

Não implemente gerenciadores de cliques personalizados em nenhuma visualização acima ou dentro da visualização do anúncio nativo. Para observar os eventos de clique, use o listener de anúncios.

Os cliques nos recursos de visualização de anúncio são processados pelo SDK, desde que você as preencha e registre corretamente, conforme discutido na seção anterior.

Confira um exemplo que usa um listener de anúncios para observar eventos de clique:

Java

AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
    ...
    .withAdListener(new AdListener() {
        @Override
        public void onAdFailedToLoad(LoadAdError adError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
        @Override
        public void onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build();

Kotlin

val adLoader = AdLoader.Builder(this, "/6499/example/native")
    ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
    })
    .build()

Registrar o MediaView

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

O MediaView é um View especial projetado 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. Ela precisa ser colocada na hierarquia de visualização de uma NativeAdView, assim como qualquer outra visualização de recursos. Os apps que usam um MediaView precisam registrá-lo no NativeAdView:
Java
```
MediaView mediaView = adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);
```
Kotlin
```
adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
```
Assim como em todas as visualizações de recursos, a visualização de mídia precisa ter o conteúdo preenchido. Isso é feito usando o método getMediaContent() para extrair o conteúdo de mídia que pode ser transmitido para um MediaView. Confira um snippet de código que configura o conteúdo de mídia para a visualização de mídia:
Java
```
mediaView.setMediaContent(nativeAd.getMediaContent());
```
Kotlin
```
mediaView.mediaContent = nativeAd.mediaContent
```
ImageScaleType

A classe MediaView tem uma propriedade ImageScaleType ao mostrar imagens. Se você quiser mudar a forma como uma imagem é dimensionada em MediaView, defina o ImageView.ScaleType correspondente usando o método setImageScaleType() da 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 a propriedade mediaContent MediaView é definida com uma instância MediaContent:
- Se um recurso de vídeo estiver disponível, ele será armazenado em buffer e reproduzido dentro do MediaView. É possível saber se um recurso de vídeo está disponível conferindo hasVideoContent().
- Se o anúncio não tiver um recurso de vídeo, o recurso mainImage será transferido por download e colocado 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 como sua imagem transferida por download manualmente. Essa imagem será usada apenas quando não houver recursos de vídeo disponíveis.
Registrar o objeto de anúncio nativo

Esta etapa final registra o objeto de anúncio nativo com a visualização responsável por exibi-lo:
Java
```
adView.setNativeAd(ad);
```
Kotlin
```
adView.setNativeAd(ad)
```

Destruir anúncio

Quando terminar de mostrar o anúncio nativo, destrua-o para que ele seja devidamente coletado.

Java

nativeAd.destroy();
        .inflate(R.layout.ad_layout_file, parent);

Kotlin

nativeAd.destroy()

Testar o código de anúncio nativo

Anúncios de venda direta

Se quiser testar como são os anúncios nativos de venda direta, use este ID de bloco de anúncios do Ad Manager:

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

O ID do modelo para o formato personalizado de anúncio nativo é 10063170.

Anúncios de preenchimento nativos

No momento, o preenchimento do Ad Exchange está limitado a um grupo seleto de editores. Para testar o comportamento de anúncios de preenchimento nativo, use este bloco de anúncios do Ad Manager:

/6499/example/native-backfill

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

Não se esqueça de atualizar o código para que ele consulte seus IDs de modelo e bloco de anúncios reais antes de ativá-lo.

Exemplos no GitHub

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

Java Kotlin

Próximas etapas

Confira os seguintes tópicos:

Nativo avançado

Exibir um NativeAd

Classe NativeAdView

Java

Kotlin

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

Atribuição de anúncios nativos programáticos

Exemplo de código

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

ImageScaleType

Java

Kotlin

MediaContent

Java

Kotlin

Destruir anúncio

Java

Kotlin

Testar o código de anúncio nativo

Anúncios de venda direta

Anúncios de preenchimento nativos

Exemplos no GitHub

Próximas etapas

Classe `NativeAdView`