네이티브 스타일
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
네이티브 스타일 설정을
사용하면 Google Ad Manager에서 제품 내에 지정한 네이티브
스타일을 기반으로 네이티브 광고의 렌더링을 처리할 수 있습니다. 먼저 크기 및 타겟팅을 지정합니다.
그런 다음 HTML, CSS, JavaScript를 추가하여 반응형 광고를 정의하고
모든 화면에서 고화질로 표시되는 광고를 생성합니다. 렌더링을 직접
할 필요가 없습니다. Ad Manager에서 도착 페이지에 맞는 네이티브 스타일을
자동으로 적용합니다. 네이티브 스타일은 AdManagerAdView를 사용하여 배너 광고와 마찬가지로
구현됩니다. 사전에 결정된 고정 광고
크기 또는 런타임에 결정된 유동 광고 크기와 함께 사용할 수 있습니다.
기본 요건
- Google 모바일 광고 Flutter 플러그인 버전 0.13.6 이상
이 가이드는 Google 모바일 광고 SDK에 대한 실무적인 이해가 있다는 것을 전제로 설명을 제공합니다.
시작 가이드를 진행하지 않은 경우 시작 가이드부터
진행하시기 바랍니다.
고정 크기
고정 크기의 네이티브 스타일을
사용하면 네이티브 광고의 너비와 높이를 설정할 수 있습니다. 고정 크기를 설정하려면 다음 단계를 따르세요.
Ad Manager UI에서 광고 항목을 만들고 Size 필드 드롭다운에서 사전 정의된
크기 중 하나를 선택합니다.
1단계에서 설정한 것과 동일한 크기로 AdManagerBannerAd를 로드합니다.
광고를 인스턴스화하고 로드하는 방법은
배너 광고 문서를 참고하세요.
배너 크기 섹션에서 크기 목록과
해당 AdSize 상수를
확인할 수 있습니다.
다음은 MEDIUM_RECTANGLE(300x250) 광고 크기와
같은 고정 크기를 지정하는 방법의 예입니다.
AdManagerBannerAd ad = AdManagerBannerAd(
adUnitId: '<your-ad-unit>',
sizes: <AdSize>[AdSize.mediumRectangle],
request: AdManagerAdRequest(),
);
유동 크기
경우에 따라 고정 크기가 적합하지 않을 수 있습니다. 예를 들어 광고의 너비는
앱의 콘텐츠와 일치해야 하지만 높이는 광고의 콘텐츠에 맞게
동적으로 조정해야 할 수 있습니다. 이 경우를 처리하려면
Ad Manager UI에서 광고 크기를 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,
);
GitHub의 예에 해당하는 앱에서
Ad Manager 유동 광고 크기의 구현 예를 확인하세요.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-08-31(UTC)
[null,null,["최종 업데이트: 2025-08-31(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,["# Native Styles\n\nSelect 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\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----------\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----------\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\n### Fluid 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\n### Displaying 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)."]]
