Exibir 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 tenha que fazer isso imediatamente. Para tornar a exibição os formatos de anúncio definidos pelo sistema, o SDK oferece alguns recursos úteis, como descritas abaixo.
Classe NativeAdView
Para o formato NativeAd
, há o modelo
NativeAdView
. Esta é uma aula
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 (o ImageView
que mostra o
recurso de captura de tela, por exemplo) deve ser um filho de NativeAdView
objeto.
A hierarquia de visualização de um anúncio nativo que usa uma
LinearLayout
para exibir 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>
// Other assets such as image or media view, call to action, etc follow.
...
</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, "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
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 outro para registrar o próprio objeto NativeAd
.
O registro das visualizações dessa maneira permite que o SDK processe automaticamente as tarefas.
como:
- Registrando cliques
- Registrando impressões quando o primeiro pixel fica visível na tela
- Exibir a sobreposição das Opções de anúncios para preenchimento nativo criativos, que atualmente são limitados a um grupo seleto de editores
Sobreposição das Opções de anúncios
Uma sobreposição das Opções de anúncios é adicionada como uma visualização de anúncio pelo SDK quando um anúncio de preenchimento é retornados. Se seu aplicativo usar preenchimento de anúncios nativos, deixe espaço na sua tag de preferência esquina da visualização do anúncio nativo para o logotipo "Opções de anúncios" inserido automaticamente. Além disso, que a sobreposição das Opções de anúncios seja facilmente vista. Portanto, escolha cores e imagens adequadas. Para mais informações sobre o aparência e função, consulte o artigo sobre implementação de anúncios nativos programáticos diretrizes.
Atribuição de anúncios para anúncios nativos programáticos
Ao exibir anúncios nativos programáticos, você precisa exibir uma atribuição de anúncio para indicam que a visualização é um anúncio. Saiba mais na nossa política diretrizes.
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:
- Preencha a visualização do recurso com o recurso no objeto do anúncio.
- Registrar a visualização de recursos 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
.
Veja 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
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 umNativeAdView
existente se houver um no seu fragmento ou atividade; ou até mesmo criar uma instância dinamicamente, sem usar um arquivo de layout.Preencher e registrar as visualizações de recursos
Esse exemplo de código localiza a visualização usada para exibir o título, define o texto usando o recurso de string fornecido pelo objeto do 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 seu valor e registrá-la usando o a classe de visualização do anúncio deve ser repetida para cada um dos recursos fornecidos pelo objeto de anúncio nativo que o app exibirá.
Processar cliques
Não implemente manipuladores de cliques personalizados em visualizações acima ou dentro da visualização do anúncio nativo. Para observar os eventos de clique, use o modelo listener.
Os cliques nos recursos de visualização do anúncio são gerenciados pelo SDK, desde que você preencher e registrar as visualizações de recurso, conforme discutido na seção anterior.
Aqui está um exemplo que usa um anúncio ouvinte a observar eventos de clique:
Java
AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/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, "/21775744923/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
MediaView
em vez deImageView
se quiser incluir um recurso de imagem principal no layout do seu anúncio nativo anúncio.O
MediaView
é umView
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. Ela precisam ser colocados na hierarquia de visualização de umaNativeAdView
, assim como qualquer visualização de outros recursos. Os apps que usam umMediaView
precisam registrá-lo noNativeAdView
:Java
MediaView mediaView = adView.findViewById(R.id.ad_media); adView.setMediaView(mediaView);
Kotlin
adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
Assim como acontece com todas as visualizações de recursos, a visualização de mídia precisa ter o conteúdo preenchido. Para isso, usamos
getMediaContent()
para recuperar o conteúdo de mídia que pode ser transmitido para umaMediaView
. Este é um snippet de código que define o conteúdo de mídia para a mídia visualizar:Java
mediaView.setMediaContent(nativeAd.getMediaContent());
Kotlin
mediaView.mediaContent = nativeAd.mediaContent
ImageScaleType
A classe
MediaView
tem uma propriedadeImageScaleType
ao mostrar de imagens de contêiner. Se você quiser mudar a forma como uma imagem é dimensionada noMediaView
, defina oImageView.ScaleType
correspondente usando a funçãosetImageScaleType()
doMediaView
: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 classeMediaView
. Quando o A propriedadeMediaView
mediaContent
é definida com uma instânciaMediaContent
: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, verifiquehasVideoContent()
:Se o anúncio não tiver um recurso de vídeo, o recurso
mainImage
será baixado e colocada dentro deMediaView
.
Por padrão,
mainImage
é o primeiro recurso de imagem transferido por download. SesetReturnUrlsForImageAssets(true)
é usado,mainImage
énull
, e você precisa Defina a propriedademainImage
como a imagem transferida por download manualmente. Observe que este imagem será usada apenas quando não houver nenhum recurso de vídeo disponível.Registrar o objeto de anúncio nativo
A 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 exibir 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()
Testar o código de anúncio nativo
Anúncios de venda direta
Se quiser testar como são anúncios nativos de venda direta, você pode criar uso desse ID de bloco de anúncios do Ad Manager:
/21775744923/example/native
Ele foi configurado para exibir exemplos de anúncios de instalação do app e de conteúdo, bem como formato personalizado de anúncio nativo 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 nativo
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:
/21775744923/example/native-backfill
Ele veicula exemplos de anúncios de instalação do app e de conteúdo que incluem as Opções de anúncios sobreposição.
Lembre-se de atualizar seu código para que ele se refira ao seu bloco de anúncios e aos IDs de modelo reais antes de ir ao ar.
Exemplos no GitHub
Exemplo de implementação completa de anúncios nativos:
Próximas etapas
Confira os seguintes tópicos: