Styles natifs
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Sélectionnez une plate-forme :
Android
iOS
Flutter
Les paramètres de style natif permettent à Google Ad Manager de gérer l'affichage de vos annonces natives en fonction des styles natifs que vous spécifiez dans le produit. Commencez par spécifier la taille et le ciblage.
Ajoutez ensuite du code HTML, CSS et JavaScript pour définir des annonces responsives qui s'affichent correctement sur tous les écrans. Vous n'avez pas besoin de vous occuper du rendu. Ad Manager applique automatiquement le style natif approprié à la destination. Les styles natifs sont implémentés comme des bannières publicitaires, à l'aide d'un AdManagerAdView
. Elles peuvent être utilisées avec une taille d'annonce fixe déterminée à l'avance ou une taille d'annonce fluide déterminée au moment de l'exécution.
Prérequis
- Plug-in Flutter Google Mobile Ads 0.13.6 ou version ultérieure
Ce guide suppose que vous maîtrisez les principes de base du SDK Google Mobile Ads.
Si vous ne l'avez pas déjà fait, pensez à consulter notre guide Premiers pas.
Taille fixe
Les styles natifs de taille fixe vous permettent de contrôler la largeur et la hauteur de l'annonce native. Pour définir une taille fixe, procédez comme suit :
Créez un élément de campagne dans l'UI Ad Manager et sélectionnez l'une des tailles prédéfinies dans le menu déroulant du champ Size
.
Chargez un AdManagerBannerAd
de la même taille que celle que vous avez définie à l'étape 1.
Consultez la documentation sur les bannières publicitaires pour savoir comment instancier et charger une annonce.
Vous trouverez la liste des tailles et des constantes AdSize
correspondantes dans la section Taille de la bannière.
Voici un exemple de spécification d'une taille fixe, telle que la taille d'annonce MEDIUM_RECTANGLE
(300 x 250) :
AdManagerBannerAd ad = AdManagerBannerAd(
adUnitId: '<your-ad-unit>',
sizes: <AdSize>[AdSize.mediumRectangle],
request: AdManagerAdRequest(),
);
Taille fluide
Dans certains cas, une taille fixe peut ne pas avoir de sens. Par exemple, vous pouvez souhaiter que la largeur de l'annonce corresponde au contenu de votre application, mais que sa hauteur s'ajuste de manière dynamique pour s'adapter au contenu de l'annonce. Pour gérer ce cas, vous pouvez spécifier Fluid
comme taille d'annonce dans l'UI Ad Manager. Cela indique que la taille de l'annonce est déterminée au moment de l'exécution dans l'application. Le SDK fournit une constante spéciale AdSize
, FLUID
, pour gérer ce cas.
La hauteur de l'annonce fluide est déterminée de manière dynamique en fonction de la largeur définie par l'éditeur, ce qui permet à la vue d'annonce de la plate-forme d'ajuster sa hauteur à celle de la création.
Demande fluide
Utilisez FluidAdManagerBannerAd
pour demander une annonce fluide :
final fluidAd = FluidAdManagerBannerAd(
adUnitId: '<your-ad-unit>',
request: AdManagerAdRequest(),
listener: AdManagerBannerAdListener(
onAdLoaded: (Ad ad) {
print('$_fluidAd loaded.');
},
onAdFailedToLoad: (Ad ad, LoadAdError error) {
print('$_fluidAd failedToLoad: $error');
ad.dispose();
},
),
Afficher l'annonce fluide
Une fois votre annonce chargée, utilisez FluidAdWidget
pour afficher des annonces fluides. Sa hauteur s'ajuste à celle de la vue d'annonce de la plate-forme sous-jacente :
FluidAdWidget(
width: <your-width>,
ad: fluidAd,
);
Consultez un exemple d'implémentation de la taille d'annonce fluide Ad Manager dans l'application exemple sur GitHub.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/09/06 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/09/06 (UTC)."],[[["\u003cp\u003eNative style settings in Google Ad Manager allow you to customize the look and feel of your native ads using HTML, CSS, and JavaScript for a seamless user experience.\u003c/p\u003e\n"],["\u003cp\u003eYou can define fixed-size native ads by specifying their dimensions in the Ad Manager UI and using corresponding \u003ccode\u003eAdSize\u003c/code\u003e constants when loading the ad in your app.\u003c/p\u003e\n"],["\u003cp\u003eAlternatively, fluid-size native ads dynamically adjust their height based on the width you provide, ensuring responsiveness across different screens using the \u003ccode\u003eFluidAdManagerBannerAd\u003c/code\u003e and \u003ccode\u003eFluidAdWidget\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eTo implement native ads, you need Google Mobile Ads Flutter Plugin version 0.13.6 or higher and basic familiarity with the Google Mobile Ads SDK.\u003c/p\u003e\n"]]],["Google Ad Manager renders native ads based on specified styles. Users define ad size and targeting, then add HTML, CSS, and JavaScript for responsive design. Fixed ad sizes are set in the Ad Manager UI and loaded using `AdManagerBannerAd` with corresponding `AdSize` constants. Fluid ads use `Fluid` in the UI and the `FLUID` constant, with `FluidAdManagerBannerAd` for requests and `FluidAdWidget` for display, dynamically adjusting the height.\n"],null,["Select platform: [Android](/ad-manager/mobile-ads-sdk/android/native/styles \"View this page for the Android platform docs.\") [iOS](/ad-manager/mobile-ads-sdk/ios/native/styles \"View this page for the iOS platform docs.\") [Flutter](/ad-manager/mobile-ads-sdk/flutter/native/styles \"View this page for the Flutter platform docs.\")\n\n\u003cbr /\u003e\n\n[Native style settings](//support.google.com/admanager/answer/6366914)\nenable Google Ad Manager to handle the rendering of your native ads based on native\nstyles you specify within the product. First, specify size and targeting.\nThen add HTML, CSS, and JavaScript to define ads that are responsive\nand produce a quality display across all screens. You don't need to do\nany of the rendering; Ad Manager automatically applies the right native style\nfor the destination. Native styles are implemented just like banner ads,\nusing a `AdManagerAdView`. They can be used with a fixed ad\nsize determined ahead of time, or a fluid ad size determined at runtime.\n\nPrerequisites\n\n- Google Mobile Ads Flutter Plugin version 0.13.6 or higher\n\nThis guide assumes some working knowledge of the Google Mobile Ads SDK.\nIf you haven't already done so, consider running through our\n[Get Started](/ad-manager/mobile-ads-sdk/flutter/quick-start) guide.\n\nFixed size\n\nNative styles with a fixed size allow you to control the width and height\nof the native ad. To set a fixed size, follow these steps:\n\n1. Create a line item in the Ad Manager UI and select one of the\n predefined sizes from the `Size` field dropdown.\n\n2. Load an `AdManagerBannerAd` with the same size you set up in step 1.\n See the [Banner Ad](/ad-manager/mobile-ads-sdk/flutter/banner/get-started#instantiate_ad)\n documentation for how to instantiate and load an ad.\n You can see a list of sizes and their corresponding `AdSize` constants\n in the [Banner size](/ad-manager/mobile-ads-sdk/flutter/banner/get-started#banner_sizes)\n section.\n\nHere's an example of how to specify a fixed size, such as the\n`MEDIUM_RECTANGLE` (300x250) ad size: \n\n AdManagerBannerAd ad = AdManagerBannerAd(\n adUnitId: '\u003cyour-ad-unit\u003e',\n sizes: \u003cAdSize\u003e[AdSize.mediumRectangle],\n request: AdManagerAdRequest(),\n );\n\nFluid size\n\nIn some cases, a fixed size may not make sense. For example, you may\nwant the width of the ad to match your app's content, but need its height\nto dynamically adjust to fit the ad's content. To handle this case,\nyou can specify `Fluid` as the ad size in the Ad Manager UI, which\ndesignates that the size of the ad is determined at runtime in the app.\nThe SDK provides a special `AdSize` constant, `FLUID`, to handle this case.\nThe fluid ad size height is dynamically determined based on the publisher\ndefined width, allowing the platform ad view to adjust its height to match that\nof the creative.\n\nFluid request\n\nUse `FluidAdManagerBannerAd` to request a fluid ad: \n\n final fluidAd = FluidAdManagerBannerAd(\n adUnitId: '\u003cyour-ad-unit\u003e',\n request: AdManagerAdRequest(),\n listener: AdManagerBannerAdListener(\n onAdLoaded: (Ad ad) {\n print('$_fluidAd loaded.');\n },\n onAdFailedToLoad: (Ad ad, LoadAdError error) {\n print('$_fluidAd failedToLoad: $error');\n ad.dispose();\n },\n ),\n\nDisplaying the fluid ad\n\nAfter your ad is loaded, use `FluidAdWidget` to display fluid ads. It will\nadjust its height to match the underlying platform ad view: \n\n FluidAdWidget(\n width: \u003cyour-width\u003e,\n ad: fluidAd,\n );\n\nSee an example implementation of Ad Manager Fluid ad size in the example app\non [Github](https://github.com/googleads/googleads-mobile-flutter/blob/master/packages/google_mobile_ads/example/lib/fluid_example.dart)."]]