Meta Audience Network

Règles de composition publicitaire sur l’Audience Network pour Android

Les appareils Android sont de toutes formes et tailles : vous devez donc veiller à l’apparence qu’auront vos publicités natives sur différents appareils. La composition publicitaire de vos publicités natives doit rester flexible pour en garantir la cohérence sur les différents appareils. C’est-à-dire qu’au lieu de définir votre composition à l’aide de dimensions statiques, la composition doit être réactive aux différentes tailles d’écran et aux orientations.

Pour créer une composition réactive, il est recommandé d’utiliser ConstraintLayout qui est disponible dans une bibliothèque d’API compatible avec Android 2.3 (API level 9) et versions ultérieures. De plus, la dernière version d’Android Studio inclut l’outil Layout Editor qui simplifie le processus de construction d’une ConstraintLayout. Vous trouverez ci-dessous un tutoriel expliquant comment développer l’UI d’une publicité native avec ConstraintLayout à l’aide de Layout Editor.

Assurez-vous d’avoir terminé le Guide de démarrage et le guide Démarrer avec Android avant de commencer.

Conditions requises

Étapes de création d’une composition publicitaire native

Étape 1 : Inclure la bibliothèque ConstraintLayout

Étape 2 : Composer la partie supérieure de la publicité native (icônes, titre et étiquette compris)

Étape 3 : Composer la MediaView de la publicité native

Étape 4 : Composer le contexte social, le corps et le bouton d’action de la publicité native

Exemple de composition complète avec contrainte XML

Démo de composition avec contrainte pour différentes orientations et tailles d’écran


Exemple de composition avec contrainte XML pour un bandeau publicitaire natif

Exemple de composition complète avec contrainte XML

Démo de composition avec contrainte pour différentes orientations et tailles d’écran


Politique régissant les publicités natives

Mauvais exemple d’éléments cliquables

Bon exemple d’éléments cliquables

Étapes de création d’une composition publicitaire native

Étape 1 : Inclure la bibliothèque ConstraintLayout

Pour utiliser ConstraintLayout dans votre projet, procédez comme suit :



Ajoutez la déclaration suivante à votre build.gradle au niveau du module (et non du projet) pour utiliser la bibliothèque ConstraintLayout la plus récente :

dependencies {
    ...
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}

En cas de problème lors de la résolution de la Constraint Layout Library, vérifiez que vous avez synchronisé votre fichier Gradle et essayez de redémarrer Android Studio.

Une fois que le fichier Gradle est synchronisé avec la bibliothèque ConstraintLayout, vous devriez pouvoir créer un fichier de composition XML avec ConstraintLayout :

Étape 2 : Composer la partie supérieure de la publicité native (icônes, titre et étiquette compris)

Commencez par ajouter des guides Horizontal Guidelines et définissez layout_constraintGuide_begin sur 55dp, paramètre qui servira de contrainte pour les autres vues. Ajoutez une com.facebook.ads.MediaView, contraignez ses bords supérieur et gauche sur la composition parente, et son bord inférieur sur le guide.

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

Ajoutez un autre Horizontal Guideline, définissez layout_constraintGuide_begin sur 27.5dp, paramètre qui servira à séparer le nom de l’annonceur et le libellé Sponsorisé. Ajoutez les éléments native_advertiser_name, native_ad_sponsored_label et ad_choices_container comme suit :

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

Étape 3 : Composer la MediaView de la publicité native

Ajoutez la MediaView et contraignez-la sur le guide Horizontal Guideline créé à l’étape 2 comme suit :

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

Étape 4 : Composer le contexte social, le corps et le bouton d’action de la publicité native

Ajoutez les éléments native_ad_social_context, native_ad_body et native_ad_call_to_action et contraignez-les sous la 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>

Exemple de composition complète avec contrainte XML

Voici un exemple de composition complète avec contrainte XML pour une publicité native :

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

Démo de composition avec contrainte pour différentes orientations et tailles d’écran

Vous avez déjà créé une ConstraintLayout pour votre publicité native, qui proposera la meilleure expérience utilisateur pour différentes orientations et tailles d’écran. La ConstraintLayout doit rester cohérente à la fois sur les téléphones et les tablettes Android. Remarque : la composition se situe dans ScrollView ; il est possible de la faire défiler dans l’orientation Landscape sur téléphone lorsque la publicité native n’est pas entièrement visible.

Exemple de composition avec contrainte XML pour un bandeau publicitaire natif

Les bandeaux publicitaires natifs sont disponibles dans la dernière version du SDK Meta Audience Network. La création d’une composition avec contrainte pour un bandeau publicitaire natif se déroule pratiquement de la même manière que pour une Native Ad. Vous pouvez suivre les étapes présentées ci-dessus pour créer la composition d’un Native Banner Ad ou copier l’exemple de code de composition XML suivant dans votre projet.

Exemple de composition complète avec contrainte XML

Voici un exemple de composition complète avec contrainte XML pour un bandeau publicitaire natif :

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

Démo de composition avec contrainte pour différentes orientations et tailles d’écran

Respect de la politique relative aux publicités natives

Afin de créer un produit de qualité, les développeur·ses doivent respecter la politique de Meta Audience Network lorsqu’ils ou elles travaillent sur la composition d’une publicité native ou d’un bandeau publicitaire natif. Laissez toujours les utilisateur·ices maîtres de leurs clics. En particulier concernant les éléments cliquables d’une publicité, veillez bien à ce que seuls les titres, les URL, les appels à l’action et les images des publicités soient cliquables. De plus, l’espace blanc dans le texte du titre ou les vues d’images ne doit pas être cliquable.

Mauvais exemple d’éléments cliquables

Dans les compositions de publicité native que vous créez, vous ne devez pas utiliser de largeur ni de hauteur fixes pour les éléments TextView, AdIcon et MediaView afin d’éviter un white space dans le titre des publicités. Voici un exemple de ce qu’il ne faut jamais faire :



Voici à quoi ressemble un mauvais exemple :

Bon exemple d’éléments cliquables

Pour créer une publicité de qualité, suivez les étapes de développement d’une disposition avec contraintes ci-dessus pour vos publicités ou bandeaux publicitaires natifs. Par exemple, vous devez toujours appliquer wrap_content à la largeur et à la hauteur dans TextView ; vous pouvez attribuer une largeur fixe ou match_parent à une AdIcon ou une MediaView, mais vous devez utiliser wrap_content pour la hauteur. Voici à quoi ressemble une composition lorsque vous respectez la politique de Meta Audience Network :

Étapes suivantes

Autres ressources

Guide de démarrage

Guide technique de démarrage avec Audience Network

Référence concernant l’API

Référence concernant le SDK Facebook pour Android.