Pour discuter de nos produits et nous faire part de vos commentaires, rejoignez le canal Discord officiel Ad Manager sur le serveur de la communauté Google Advertising and Measurement.

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

Modèles natifs

Sélectionnez une plate-forme : Android iOS Flutter

Télécharger les modèles natifs

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 profiter pleinement 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 en termes de code pour vos annonces natives. Ils sont conçus pour une implémentation rapide et une modification facile. Les modèles natifs vous permettent d'implémenter votre première annonce native en quelques minutes seulement. Vous pouvez également 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 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 sous forme de module Android Studio. Vous pouvez donc les inclure facilement 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 un format fixe. Elles seront mises à 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. Par exemple, vous pouvez 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 d'une demi-page à trois quarts de page, mais il peut également être utilisé dans les flux. Il est adapté aux pages de destination ou d'accueil.

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 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 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 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 fournir votre annonce native à votre modèle lorsqu'il se charge :

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

Il existe deux façons de styliser votre modèle : en utilisant le code XML de mise en page traditionnel et en utilisant 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 ceux que vous connaissez déjà.

Méthodes de compilateur pour le style de modèle natif
`withCallToActionTextTypeface`	`Typeface callToActionTextTypeface` Typographie 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` Typographie 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` Typographie 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 caractères 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 natifs 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.