Cette page a été traduite par l'API Cloud Translation.

Modèles natifs

Les annonces natives vous permettent de personnaliser vos annonces, ce qui améliore 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 paraissent être une extension naturelle de votre application. Pour vous aider à vous lancer, nous avons créé des modèles natifs.

Les modèles natifs sont des vues complètes du code de 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 personnaliser rapidement l'apparence sans trop de code. Vous pouvez placer ces modèles où vous le souhaitez, par exemple dans une vue recycler utilisée dans un flux d'actualités, dans une boîte de dialogue ou ailleurs dans votre application.

Nos modèles natifs sont fournis en tant que module Android Studio. Vous pouvez donc facilement les inclure dans votre projet et 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 tous les deux un format fixe. Elles seront redimensionnées pour occuper toute la largeur de leurs vues parentes.

Modèle de petite taille

@layout/gnt_small_template_view

Le petit modèle est idéal pour les vues de recycler ou chaque fois que vous avez besoin d'une vue d'annonce rectangulaire allongée. 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 une vue de page d'un demi à trois quarts, mais 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 entendu, 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 (Cloner ou télécharger) sur GitHub) et d'importer 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 à votre 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 se fait en deux étapes:

Tout d'abord, vous devez 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 transmettre votre annonce native à votre modèle lorsqu'il se charge:

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());

Clés du dictionnaire des styles

Il existe deux façons de styliser votre modèle: à l'aide du fichier 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 compilateur disponibles. Le générateur 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` Police de l'incitation à l'action.
`withCallToActionTextSize`	`float callToActionTextSize` Taille du texte de l'incitation à l'action.
`withCallToActionTypefaceColor`	`int callToActionTypefaceColor` Couleur du texte d'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.
`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.
`withTertiaryTextBackgroundColor`	`ColorDrawable tertiaryTextBackgroundColor` Couleur d'arrière-plan de la troisième ligne de texte.
`withMainBackgroundColor`	`ColorDrawable mainBackgroundColor` Couleur principale de l'arrière-plan.

Contribuer

Nous avons créé des modèles d'annonces natives pour vous aider à développer rapidement des annonces natives. Nous serions ravis de vous voir contribuer à notre dépôt GitHub pour ajouter de nouveaux modèles ou fonctionnalités. Envoyez-nous une demande d'extraction, et nous l'examinerons.