Diretriz para o layout do anúncio do Audience Network no Android
Há dispositivos Android de diversos tipos e tamanhos, por isso você deve ter cuidado com a aparência de seus anúncios nativos em diferentes dispositivos. Para garantir que o layout do anúncio nativo seja consistente em vários dispositivos, ele precisa ser flexível. Ou seja, em vez de definir seu layout com dimensões estáticas, você deve fazer com que ele seja responsivo a diferentes tamanhos e orientações de tela.
A boa prática para criar um layout responsivo é usar o ConstraintLayout, que está disponível em uma biblioteca de API compatível com Android 2.3 (API level 9) ou superior. Além disso, na versão mais recente do Android Studio, é possível usar o Layout Editor para simplificar o processo de criação do ConstraintLayout. Veja abaixo um tutorial sobre como criar a interface do usuário do anúncio nativo com o ConstraintLayout do Layout Editor.
Certifique-se de ter concluído os guias de Introdução do Audience Network e Introdução do Android antes de continuar.
Pré-requisitos
- Conclua os exemplos Anúncio nativo e Anúncio em banner nativo.
- Leia a Política do Facebook para criar um produto de qualidade.
- Consulte o artigo Criar uma IU responsiva com o ConstraintLayout.
- Consulte o artigo Criar uma IU com o Layout Editor.
Etapas de criação do layout do anúncio nativo
Etapa 1: incluir a biblioteca do ConstraintLayout
Etapa 2: criar o layout da parte superior do anúncio nativo (incluindo ícones, título e etiqueta)
Etapa 3: criar o layout MediaView do anúncio nativo
Etapa 4: criar o layout do contexto social, corpo do anúncio e botão de ação do anúncio nativo
Exemplo: layout completo com limitação XML
Demonstração: layout com limitação em diferentes orientações e tamanhos de tela
Exemplo de layout com limitação XML de um anúncio em banner nativo
Exemplo: layout completo com limitação XML
Demonstração: layout com limitação em diferentes orientações e tamanhos de tela
Política de anúncios nativos
Mau exemplo de elementos clicáveis
Bom exemplo de elementos clicáveis
Etapas de criação do layout do anúncio nativo
Etapa 1: incluir a biblioteca do ConstraintLayout
Para usar o ConstraintLayout no seu projeto, faça o seguinte:
Adicione a seguinte declaração ao build.gradle no nível do módulo (não projeto!) para usar a biblioteca do ConstraintLayout mais recente:
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}Se tiver problemas com a Constraint Layout Library, verifique se você sincronizou o arquivo do Gradle e tente reiniciar o Android Studio.
Depois de sincronizar o arquivo do Gradle com a biblioteca do ConstraintLayout, será possível criar um arquivo de layout XML com o ConstraintLayout:
Etapa 2: criar o layout da parte superior do anúncio nativo (incluindo ícones, título e etiqueta)
Primeiro, adicione Horizontal Guidelines e defina layout_constraintGuide_begin como 55dp, que é usado para limitar outras visualizações. Adicione um com.facebook.ads.MediaView e limite os lados esquerdo e superior de acordo com o layout principal. Depois, limite o lado inferior de acordo com a orientação.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/below_ad_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="55dp" />
...
</android.support.constraint.ConstraintLayout>Depois, adicione outra Horizontal Guideline e defina layout_constraintGuide_begin como 27.5dp, que é usado para separar o texto de nome do anunciante e a etiqueta do patrocinador. Adicione o native_advertiser_name, a native_ad_sponsored_label e o ad_choices_container da seguinte forma:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/black"
android:textSize="15sp"
android:text="@string/placeholder"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="27.5dp" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<LinearLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
...
</android.support.constraint.ConstraintLayout>Etapa 3: criar o layout MediaView do anúncio nativo
Adicione o MediaView e o limite de acordo com a Horizontal Guideline criada na Etapa 2 da seguinte forma:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<com.facebook.ads.MediaView
android:id="@+id/native_ad_media"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />
...
</android.support.constraint.ConstraintLayout>Etapa 4: criar o layout do contexto social, corpo do anúncio e botão de ação do anúncio nativo
Adicione o native_ad_social_context, o native_ad_body e a native_ad_call_to_action. Depois, os limite abaixo do MediaView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
<TextView
android:id="@+id/native_ad_body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="2"
android:textColor="@android:color/black"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="15dp"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:text="@string/placeholder"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintEnd_toEndOf="@id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
...
</android.support.constraint.ConstraintLayout>Exemplo: layout completo com limitação XML
Veja um exemplo completo de layout com limitação XML para um anúncio nativo:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/below_ad_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="55dp" />
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/black"
android:textSize="15sp"
android:text="@string/placeholder"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="27.5dp" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<LinearLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.facebook.ads.MediaView
android:id="@+id/native_ad_media"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
<TextView
android:id="@+id/native_ad_body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="2"
android:textColor="@android:color/black"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="15dp"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:text="@string/placeholder"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintEnd_toEndOf="@id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
</android.support.constraint.ConstraintLayout>Demonstração: layout com limitação em diferentes orientações e tamanhos de tela
Você já criou um ConstraintLayout para o seu anúncio nativo, e ele oferecerá a experiência ideal ao usuário em diferentes tamanhos e orientações de tela. O ConstraintLayout deve ter uma aparência consistente em smartphones e tablets Android. Observação: o layout fica dentro da ScrollView; será possível rolar a tela na orientação Landscape em smartphones quando o anúncio nativo não for exibido por completo.
Exemplo de layout com limitação de um anúncio em banner nativo
O anúncio em banner nativo foi disponibilizado na versão mais recente do SDK do Audience Network da Meta. As etapas para criar um layout com limitação para um banner nativo são semelhantes às do Native Ad. Você pode seguir as etapas acima para criar o layout do Native Banner Ad ou copiar o exemplo de código de layout XML a seguir para o seu projeto.
Exemplo: layout completo com limitação XML
Veja um exemplo completo de layout com limitação XML para um anúncio em banner nativo:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="3dp">
<RelativeLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="Placeholder"
app:layout_constraintStart_toEndOf="@id/ad_choices_container"
app:layout_constraintTop_toTopOf="parent" />
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="3dp"
android:gravity="center"
app:layout_constraintStart_toStartOf="@id/ad_choices_container"
app:layout_constraintTop_toBottomOf="@id/ad_choices_container" />
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:textColor="@android:color/black"
android:textSize="15sp"
android:textStyle="bold"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="43dp" />
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="80dp"
android:layout_height="50dp"
android:gravity="center"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:paddingLeft="3dp"
android:paddingRight="3dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/native_ad_icon" />
</android.support.constraint.ConstraintLayout>Demonstração: layout com limitação em diferentes orientações e tamanhos de tela
Conformidade com a Política de Anúncios Nativos
Para criar um produto de qualidade, os desenvolvedores devem seguir a Política do Audience Network da Meta sempre que implementarem o layout de anúncio nativo ou de anúncio em banner nativo. Você deve permitir que os usuários tenham controle total para clicar. Especialmente no caso dos elementos clicáveis em seu anúncio, você deve garantir que somente os títulos, URLs, chamadas para a ação e ativos de imagem do anúncio sejam clicáveis. Além disso, os espaços em branco no texto do título ou nas visualizações de imagem não podem ser clicáveis.
Mau exemplo de elementos clicáveis
Ao criar um layout para um anúncio nativo, não use altura e largura fixas em TextView, AdIcon e MediaView para evitar white space nos títulos dos anúncios. Veja abaixo um mau exemplo mostrando o que você nunca deve fazer:
Veja a aparência de um exemplo incorreto:
Bom exemplo de elementos clicáveis
Para criar um anúncio nativo de qualidade, siga as etapas acima para criar um layout com limitação para os anúncios nativos e anúncios em banner. Por exemplo, você deve sempre aplicar "wrap_content" à altura e à largura em TextView. É possível atribuir uma largura fixa ou match_parent a um AdIcon ou MediaView, mas wrap_content deve ser usado para a altura. Veja abaixo a aparência do layout ao seguir a Política do Audience Network da Meta:
Próximas etapas
- Siga nossas orientações para integrar diferentes formatos de anúncio no seu aplicativo:
Testar a integração de anúncios com seu aplicativo
Enviar seu aplicativo para análise.
Assim que recebermos uma solicitação de anúncio do seu aplicativo ou site, ela será analisada para garantir sua conformidade com as Políticas do Audience Network e os Padrões da Comunidade do Facebook. Saiba mais sobre nosso processo de análise.
Mais recursos |
Guia de introduçãoGuia técnico de introdução ao Audience Network | Referência da APIReferência do SDK do Facebook para Android |