Mostrar 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 é 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ú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 do anúncio (o ImageView
que mostra o
recurso de captura de tela, por exemplo) precisa ser filho do objeto
NativeAdView
.
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>
Confira um exemplo que cria um NativeAdView
e
o preenche com um NativeAd
:
Java
AdLoader.Builder builder = new AdLoader.Builder(this, "/21775744923/example/native")
.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, "/21775744923/example/native")
.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 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 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
.
O registro das visualizações dessa maneira permite que o SDK processe automaticamente tarefas
como:
- Registrando cliques
- Registro de impressões quando o primeiro pixel fica visível na tela
- Exibição da sobreposição da AdChoices para criativos de preenchimento automático nativo, atualmente limitada a um grupo selecionado 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 é retornado. Caso seu app use 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 é automaticamente inserido. Além disso, é importante que a sobreposição do AdChoices seja 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 as diretrizes de implementação de anúncios nativos programáticos.
Atribuição de anúncios para anúncios nativos programáticos
Ao mostrar anúncios nativos programáticos, você precisa 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:
- Preencha a visualização do recurso com o recurso no objeto do anúncio.
- Registre a visualização do recurso com a classe
NativeAdView
.
Registre o
MediaView
se o layout do anúncio nativo incluir um recurso de mídia grande.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:
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 infla um layout XML que contém visualizações para exibir um anúncio nativo e localizar uma referência ao
NativeAdView
. Você também pode 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 vistas de ativos
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.
Processar cliques
Não implemente processadores de cliques personalizados em nenhuma visualização sobre ou dentro da visualização de anúncios nativa. 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, "/21775744923/example/native") // ... .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, "/21775744923/example/native") // ... .withAdListener(object : AdListener() { override fun onAdFailedToLoad(adError: LoadAdError) { // Handle the failure. } override fun onAdClicked() { // Log the click event or other custom behavior. } }) .build()
Registrar o MediaView
É necessário usar o recurso
MediaView
em vez doImageView
se você quiser incluir um recurso de imagem principal no layout do seu anúncio nativo.O
MediaView
é umView
especial projetado para mostrar o recurso de mídia principal, seja 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 umNativeAdView
, assim como qualquer outra visualização de recurso. Os apps que usam umaMediaView
precisam registrá-la com oNativeAdView
: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 propriedadeImageScaleType
ao mostrar imagens. Se você quiser mudar a forma como uma imagem é dimensionada noMediaView
, defina oImageView.ScaleType
correspondente usando o métodosetImageScaleType()
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 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 dentro do
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á feito o download e colocado dentro doMediaView
.
Por padrão,
mainImage
é o primeiro recurso de imagem transferido por download. SesetReturnUrlsForImageAssets(true)
for usado,mainImage
seránull
, e você precisará definir a propriedademainImage
para a imagem transferida manualmente. Essa imagem só será usada quando não houver um recurso de vídeo disponível.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
Quando terminar de mostrar seu anúncio nativo, ele deverá ser destruído para que a lixeira seja coletada corretamente.
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
Testar o código de anúncio nativo
Anúncios de venda direta
Para testar como são os anúncios nativos de venda direta, use este ID de bloco de anúncios do Ad Manager:
/21775744923/example/native
Ele está configurado para veicular anúncios de conteúdo e de instalação de apps de exemplo, 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 do formato de anúncio nativo personalizado é 10063170
.
Anúncios de preenchimento nativo
O preenchimento do Ad Exchange é limitado a um grupo seleto de editores. Para testar o comportamento dos anúncios nativos de preenchimento, use este bloco de anúncios do Ad Manager:
/21775744923/example/native-backfill
Ele veicula anúncios de conteúdo e de instalação de apps de exemplo que incluem a sobreposição Opções de anúncios.
Atualize o código para que ele se refira aos IDs de bloco de anúncios e modelo antes da veiculação.
Exemplos no GitHub
Exemplo de implementação completa de anúncios nativos:
Próximas etapas
Confira os seguintes tópicos: