Mettre en forme les mises en page d'annonces avec des modèles natifs

Sélectionnez une plate-forme : iOS Flutter Android (Legacy)

Télécharger des modèles natifs

Point clé : Avant de continuer, découvrez comment charger une annonce native.

Les annonces natives vous permettent de personnaliser vos annonces et d'améliorer l'expérience utilisateur. Une meilleure expérience utilisateur peut augmenter l'engagement et améliorer votre rendement global.

Pour tirer le meilleur parti des annonces natives, il est important de styliser vos mises en page d'annonces afin qu'elles s'intègrent naturellement à votre application. Pour vous aider à vous lancer, nous avons créé des modèles natifs.

Les modèles natifs sont des vues complètes de code pour vos annonces natives, conçues pour une implémentation rapide et une modification facile. Avec les modèles natifs, vous pouvez implémenter votre première annonce native en quelques minutes seulement, et vous pouvez rapidement personnaliser l'apparence sans beaucoup de code. Vous pouvez placer ces modèles où vous le souhaitez, par exemple dans une vue de recyclage utilisée dans un flux d'actualités, dans une boîte de dialogue ou n'importe où ailleurs dans votre application.

**Remarque** : Si vous souhaitez concevoir vos propres mises en page natives à partir de zéro, consultez plutôt la documentation format natif avancé.

Nos modèles natifs sont fournis sous forme de module Android Studio. Il est donc facile de les inclure dans votre projet et de les utiliser comme vous le souhaitez.

Tailles des modèles

Il existe deux modèles : petit et moyen. Ils utilisent tous les deux la classe TemplateView et ont un format fixe. Ils seront mis à l'échelle pour remplir la largeur de leurs vues parentes.

Petit modèle

@layout/gnt_small_template_view

Le petit modèle est idéal pour les vues de recyclage ou lorsque vous avez besoin d'une vue d'annonce rectangulaire longue. Vous pouvez par exemple l'utiliser pour les annonces In-Feed.

Modèle moyen

@layout/gnt_medium_template_view

Le modèle moyen est conçu pour être une vue de page d'une demi-page à trois quarts, mais il peut également être utilisé dans les flux. Il est adapté aux pages de destination ou aux écrans de démarrage.

N'hésitez pas à tester différents emplacements. Bien sûr, vous pouvez également modifier le code source et les fichiers XML en fonction de vos besoins.

Installer les modèles d'annonces natives

Pour installer les modèles natifs, il vous suffit de télécharger le fichier ZIP (à l'aide de l' option Clone or download sur GitHub) et d' importer le module dans votre projet Android Studio existant.

1. Sélectionnez File > New > Import Module (Fichier > Nouveau > Importer un module).

2. Sélectionnez le dossier nativetemplates.

   

3. Ajoutez la ligne suivante au fichier build.gradle au niveau de l'application :

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

Utiliser les modèles d'annonces natives

Vous pouvez utiliser le modèle dans n'importe quel fichier XML de mise en page, comme n'importe quel autre groupe de vues.

L'utilisation des modèles se fait en deux étapes :

1. Vous devez d'abord inclure le modèle dans votre mise en page.

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

2. Ensuite, vous devez attribuer votre annonce native à votre modèle lors de son chargement :

   MobileAds.initialize(this);
   AdLoader adLoader = new AdLoader.Builder(this, "/21775744923/example/native")
       .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 AdManagerAdRequest.Builder().build());
   

Clés du dictionnaire de styles

Vous pouvez styliser votre modèle de deux manières : à l'aide du code XML de mise en page traditionnel et à l'aide de notre objet NativeTemplateStyle.Builder. L'exemple de code ci-dessus montre comment utiliser l'objet NativeTemplateStyle.Builder pour définir la couleur d'arrière-plan principale, mais il existe également de nombreuses autres options. Voici toutes les méthodes de compilation disponibles. Le compilateur renvoie un objet NativeTemplateStyle qui remplace tout style de mise en page XML. Les mises en page XML gnt_small_template.xml et gnt_medium_template.xml utilisent les mêmes paramètres de style Android que vous connaissez déjà.

Méthodes de compilation pour le style de modèle natif
withCallToActionTextTypeface	Typeface callToActionTextTypeface La typographie de l'incitation à l'action.
withCallToActionTextSize	float callToActionTextSize La taille du texte de l'incitation à l'action.
withCallToActionTypefaceColor	int callToActionTypefaceColor La couleur du texte de l'incitation à l'action.
withCallToActionBackgroundColor	ColorDrawable callToActionBackgroundColor La couleur d'arrière-plan de l'incitation à l'action.
withPrimaryTextTypeface	Typeface primaryTextTypeface La police de la première ligne de texte.
withPrimaryTextSize	float primaryTextSize La taille de la première ligne de texte.
withPrimaryTextTypefaceColor	int primaryTextTypefaceColor La couleur de la première ligne de texte.
withPrimaryTextBackgroundColor	ColorDrawable primaryTextBackgroundColor La couleur d'arrière-plan de la première ligne de texte.
withSecondaryTextTypeface	Typeface secondaryTextTypeface La police de la deuxième ligne de texte.
withSecondaryTextSize	float secondaryTextSize La taille de la deuxième ligne de texte.
withSecondaryTextTypefaceColor	int secondaryTextTypefaceColor La couleur du texte de la deuxième ligne de texte.
withSecondaryTextBackgroundColor	ColorDrawable secondaryTextBackgroundColor La couleur d'arrière-plan de la deuxième ligne de texte.
withTertiaryTextTypeface	Typeface tertiaryTextTypeface La police de la troisième ligne de texte.
withTertiaryTextSize	float tertiaryTextSize La taille de la troisième ligne de texte.
withTertiaryTextTypefaceColor	int tertiaryTextTypefaceColor La couleur du texte de la troisième ligne de texte.
withTertiaryTextBackgroundColor	ColorDrawable tertiaryTextBackgroundColor La couleur d'arrière-plan de la troisième ligne de texte.
withMainBackgroundColor	ColorDrawable mainBackgroundColor La couleur d'arrière-plan principale.

Contribuer

Nous avons créé des modèles natifs pour vous aider à développer rapidement des annonces natives. Nous serions ravis que vous contribuiez à notre GitHub dépôt pour ajouter de nouveaux modèles ou fonctionnalités. Envoyez-nous une demande d'extraction et nous y jetterons un coup d'œil.