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

Sélectionnez une plate-forme : Android iOS Flutter

Les annonces natives vous permettent de personnaliser vos annonces et d'améliorer ainsi 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 à démarrer, 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. Grâce aux modèles natifs, vous pouvez implémenter votre première annonce native en quelques minutes seulement et personnaliser rapidement son apparence sans avoir à écrire 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.

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 chaque fois que vous avez besoin d'une vue d'annonce rectangulaire longue. Vous pouvez par exemple l'utiliser pour des 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 pages 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, téléchargez simplement le fichier ZIP (à l’aide de l’option Clone or download [Cloner ou télécharger] sur GitHub) et importez le module dans votre projet Android Studio existant.

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

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.

ajouter un modèle à la mise en page

L'utilisation des modèles s'effectue en deux étapes :

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>

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 de dictionnaire de styles

Il existe deux façons de styliser votre modèle : à 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 création disponibles. Le créateur 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 création pour le style de modèle natif
`withCallToActionTextTypeface`	`Typeface callToActionTextTypeface` Police de l'incitation à l'action.
`withCallToActionTextSize`	`float callToActionTextSize` Taille du texte de l'incitation à l'action.
`withCallToActionTypefaceColor`	`int callToActionTypefaceColor` Couleur du texte de l'incitation à l'action.
`withCallToActionBackgroundColor`	`ColorDrawable callToActionBackgroundColor` Couleur d'arrière-plan de l'incitation à l'action.
`withPrimaryTextTypeface`	`Typeface primaryTextTypeface` Police de la première ligne de texte.
`withPrimaryTextSize`	`float primaryTextSize` Taille de la première ligne de texte.
`withPrimaryTextTypefaceColor`	`int primaryTextTypefaceColor` Couleur de la première ligne de texte.
`withPrimaryTextBackgroundColor`	`ColorDrawable primaryTextBackgroundColor` Couleur d'arrière-plan de la première ligne de texte.
`withSecondaryTextTypeface`	`Typeface secondaryTextTypeface` Police de la deuxième ligne de texte.
`withSecondaryTextSize`	`float secondaryTextSize` Taille de la deuxième ligne de texte.
`withSecondaryTextTypefaceColor`	`int secondaryTextTypefaceColor` Couleur du texte de la deuxième ligne de texte.
`withSecondaryTextBackgroundColor`	`ColorDrawable secondaryTextBackgroundColor` Couleur d'arrière-plan de la deuxième ligne de texte.
`withTertiaryTextTypeface`	`Typeface tertiaryTextTypeface` Police de la troisième ligne de texte.
`withTertiaryTextSize`	`float tertiaryTextSize` Taille de la troisième ligne de texte.
`withTertiaryTextTypefaceColor`	`int tertiaryTextTypefaceColor` Couleur du texte de la troisième ligne de texte.
`withTertiaryTextBackgroundColor`	`ColorDrawable tertiaryTextBackgroundColor` Couleur d'arrière-plan de la troisième ligne de texte.
`withMainBackgroundColor`	`ColorDrawable mainBackgroundColor` 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.