原生樣式
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
透過原生樣式設定,Google Ad Manager 能依照您在產品中指定的樣式,自動呈現原生廣告。您只需先設定好廣告大小和目標對象,再加入 HTML、CSS 和 JavaScript 定義程式碼,就能打造出在各種螢幕上出色呈現的回應式廣告。您無需自行設定廣告的顯示方式,Ad Manager 會自動根據放送位置套用合適的原生樣式。原生樣式和橫幅廣告一樣是用 AdManagerAdView
導入,可以使用預先設定的固定廣告大小,也可以採用在執行階段動態調整的彈性大小。
必備條件
- Google Mobile Ads Flutter 外掛程式 0.13.6 以上版本
本指南假設您對 Google Mobile Ads SDK 已有基本瞭解。如果您還不熟悉這個 SDK,建議先參閱「開始使用」指南。
固定大小
採用固定大小的原生樣式時,您可以控制廣告的寬度和高度。如要設定固定大小,請按照下列步驟操作:
在 Ad Manager 使用者介面中建立委刊項,然後從 Size
欄位下拉式選單中選取一個預先定義的大小。
載入符合步驟 1 所設大小的 AdManagerBannerAd
。如要瞭解如何例項化及載入廣告,請參閱「橫幅廣告」說明文件。在「橫幅大小」一節,您可以查看各種大小和對應的 AdSize
常數。
以下示範如何指定固定大小,例如 MEDIUM_RECTANGLE
(300x250) 廣告大小:
AdManagerBannerAd ad = AdManagerBannerAd(
adUnitId: '<your-ad-unit>',
sizes: <AdSize>[AdSize.mediumRectangle],
request: AdManagerAdRequest(),
);
自動調整大小
有時候,固定大小的廣告可能不太適用。舉例來說,您可能希望廣告寬度與應用程式內容一致,但高度能依廣告內容動態調整。如有這種需求,您可以在 Ad Manager 使用者介面中將廣告大小設為 Fluid
,代表廣告大小會在應用程式執行階段決定。SDK 提供特殊的 AdSize
常數 FLUID
,專門用於處理這種情況。自動調整大小的廣告會根據發布商設定的寬度動態調整,讓平台廣告檢視區塊的高度與廣告素材一致。
自動調整請求
FluidAdManagerBannerAd
可用於請求自動調整廣告:
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();
},
),
顯示自動調整廣告
廣告載入後,可使用 FluidAdWidget
來顯示自動調整廣告。這類廣告會配合所在平台的廣告檢視區塊,自動調整高度:
FluidAdWidget(
width: <your-width>,
ad: fluidAd,
);
如需導入 Ad Manager 自動調整廣告的例子,請參考 GitHub 的範例應用程式。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2025-09-02 (世界標準時間)。
[null,null,["上次更新時間:2025-09-02 (世界標準時間)。"],[[["\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)."]]