Esta página foi traduzida pela API Cloud Translation.

Modelos nativos

Com os anúncios nativos, você pode personalizar seus anúncios, resultando em uma melhor experiência do usuário. Experiências de usuário melhores podem aumentar o engajamento e melhorar seu rendimento geral.

Para aproveitar ao máximo os anúncios nativos, é importante estilizar os layouts de anúncios para que pareçam uma extensão natural do seu app. Para ajudar você a começar, criamos modelos nativos.

Os modelos nativos são visualizações com código completo para seus anúncios nativos, projetados para implementação rápida e fácil modificação. Com os modelos nativos, você pode implementar seu primeiro anúncio nativo em poucos minutos e personalizar rapidamente a aparência sem precisar de muito código. Você pode colocar esses modelos em qualquer lugar que quiser, como em uma visualização de reciclador usada em um feed de notícias, em uma caixa de diálogo ou em qualquer outro lugar no app.

Nossos modelos nativos são fornecidos como um módulo do Android Studio. Por isso, é fácil incluí-los no projeto e usá-los como quiser.

Tamanhos de modelos

Há dois modelos: pequeno e médio. Ambos usam a classe TemplateView e têm uma proporção fixa. Elas vão ser dimensionadas para preencher a largura das visualizações mães.

Modelo pequeno

@layout/gnt_small_template_view

O modelo pequeno é ideal para visualizações de reciclador ou sempre que você precisar de uma visualização de anúncio retangular longa. Por exemplo, você pode usar esse recurso para anúncios In-feed.

Modelo médio

@layout/gnt_medium_template_view

O modelo médio é destinado a ser uma visualização de página de metade a três quartos, mas também pode ser usado em feeds. É bom para páginas de destino ou de abertura.

Fique à vontade para testar a posição. É claro que você também pode mudar o código-fonte e os arquivos XML para atender aos seus requisitos.

Como instalar os modelos de anúncios nativos

Para instalar os modelos nativos, faça o download do arquivo ZIP usando a opção Clone or download no GitHub e importe o módulo para o projeto do Android Studio.

Escolha File > New > Import Module.
Selecione a pasta nativetemplates.

Adicione a linha a seguir ao arquivo build.gradle no nível do app:

dependencies {
        ...
        implementation project(':nativetemplates')
        ...
}

Como usar os modelos de anúncios nativos

É possível usar o modelo em qualquer arquivo XML de layout, como qualquer outro grupo de visualização.

adicionar modelo ao layout

O uso dos modelos é um processo de duas etapas:

Primeiro, você precisa incluir o modelo como parte do layout.

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"
   tools:showIn="@layout/activity_main" >

<!--  This is your template view -->
<com.google.android.ads.nativetemplates.TemplateView
   android:id="@+id/my_template"
   <!-- this attribute determines which template is used. The other option is
    @layout/gnt_medium_template_view -->
   app:gnt_template_type="@layout/gnt_small_template_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

...
</LinearLayout>

Em seguida, você precisa fornecer o anúncio nativo ao modelo quando ele for carregado:

MobileAds.initialize(this);
AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            NativeTemplateStyle styles = new
              NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
            TemplateView template = findViewById(R.id.my_template);
            template.setStyles(styles);
            template.setNativeAd(nativeAd);
        }
     })
     .build();

adLoader.loadAd(new AdRequest.Builder().build());

Chaves do dicionário de estilos

Há duas maneiras de estilizar seu modelo: usando o XML de layout tradicional e usando nosso objeto NativeTemplateStyle.Builder. O exemplo de código acima demonstra como usar o objeto NativeTemplateStyle.Builder para definir a cor de plano de fundo principal, mas há várias outras opções. Confira todos os métodos de builder disponíveis. O builder retorna um objeto NativeTemplateStyle que substitui qualquer estilo de layout XML. Os layouts XML gnt_small_template.xml e gnt_medium_template.xml usam os mesmos parâmetros de estilo do Android que você já conhece.

Métodos do builder para estilo de modelo nativo
`withCallToActionTextTypeface`	`Typeface callToActionTextTypeface` O tipo de letra da call-to-action.
`withCallToActionTextSize`	`float callToActionTextSize` O tamanho do texto da call-to-action.
`withCallToActionTypefaceColor`	`int callToActionTypefaceColor` A cor do texto da call-to-action.
`withCallToActionBackgroundColor`	`ColorDrawable callToActionBackgroundColor` A cor de fundo da call-to-action.
`withPrimaryTextTypeface`	`Typeface primaryTextTypeface` O tipo de letra da primeira linha de texto.
`withPrimaryTextSize`	`float primaryTextSize` O tamanho da primeira linha de texto.
`withPrimaryTextTypefaceColor`	`int primaryTextTypefaceColor` A cor da primeira linha de texto.
`withPrimaryTextBackgroundColor`	`ColorDrawable primaryTextBackgroundColor` A cor de fundo da primeira linha de texto.
`withSecondaryTextTypeface`	`Typeface secondaryTextTypeface` O tipo de letra da segunda linha de texto.
`withSecondaryTextSize`	`float secondaryTextSize` O tamanho da segunda linha de texto.
`withSecondaryTextTypefaceColor`	`int secondaryTextTypefaceColor` A cor do texto da segunda linha.
`withSecondaryTextBackgroundColor`	`ColorDrawable secondaryTextBackgroundColor` A cor de fundo da segunda linha de texto.
`withTertiaryTextTypeface`	`Typeface tertiaryTextTypeface` O tipo de letra da terceira linha de texto.
`withTertiaryTextSize`	`float tertiaryTextSize` O tamanho da terceira linha de texto.
`withTertiaryTextTypefaceColor`	`int tertiaryTextTypefaceColor` A cor do texto da terceira linha.
`withTertiaryTextBackgroundColor`	`ColorDrawable tertiaryTextBackgroundColor` A cor de plano de fundo da terceira linha de texto.
`withMainBackgroundColor`	`ColorDrawable mainBackgroundColor` A cor principal do plano de fundo.

Contribuir

Criamos modelos nativos para ajudar você a desenvolver anúncios nativos rapidamente. Gostariamos que você contribuísse com nosso repositório do GitHub para adicionar novos modelos ou recursos. Envie uma solicitação de pull, e vamos analisar.