네이티브 템플릿은 네이티브 광고를 위한 코드 완성형 보기로 쉽게 구현할 수 있습니다. 네이티브 템플릿을 사용하면 플러그인은 미리 빌드된 Android 및 iOS 레이아웃을 사용할 수 있으며, 기본 레이아웃의 스타일을 네이티브 애셋을 만듭니다.
이 가이드에서는 Dart API를 사용하여 기본 광고를 렌더링합니다.
기본 요건
- Flutter 2.4.0 이상
- 시작 가이드를 모두 읽어보세요.
- 네이티브 광고 옵션을 숙지하세요.
항상 테스트 광고로 테스트
앱을 빌드하고 테스트할 때는 만들 수 있습니다. 테스트 광고를 로드하는 가장 쉬운 방법은 네이티브 광고의 테스트 광고 단위 ID:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
테스트 광고 단위는 모든 요청에 대해 테스트 광고를 반환하도록 구성되어 있으므로 코딩, 테스트, 개발 중에 자체 앱에서 이를 사용할 수 있으며 자체 광고 단위 ID로 바꿔야 합니다. 매우 중요합니다
광고 로드
다음 예에서는 medium
크기의 네이티브를 사용하여 네이티브 광고를 로드합니다.
템플릿:
class NativeExampleState extends State<NativeExample> {
NativeAd? nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final String _adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/2247696110'
: 'ca-app-pub-3940256099942544/3986624511';
/// Loads a native ad.
void loadAd() {
_nativeAd = NativeAd(
adUnitId: _adUnitId,
listener: NativeAdListener(
onAdLoaded: (ad) {
debugPrint('$NativeAd loaded.');
setState(() {
_nativeAdIsLoaded = true;
});
},
onAdFailedToLoad: (ad, error) {
// Dispose the ad here to free resources.
debugPrint('$NativeAd failed to load: $error');
ad.dispose();
},
),
request: const AdRequest(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
자세한 내용은
NativeTemplateStyle
드림
및
NativeTemplateTextStyle
를 확인하세요.
광고 맞춤설정
네이티브 템플릿을 사용하여 네이티브 광고를 맞춤설정할 때 광고의 UI 구성
NativeTemplateStyle
클래스에 게시되므로
네이티브 광고를 표시합니다.
템플릿 크기
Flutter 네이티브 광고 템플릿에는 TemplateType.small
와
TemplateType.medium
입니다. 작은 템플릿은 TableView
또는 GridView
, 인피드 광고 또는 얇은 직사각형 광고 보기가 필요한 모든 곳에 적합합니다. 이
중간 템플릿은 1/2~3/4의 페이지 조회용으로
방문 페이지 또는 스플래시 페이지에 적합합니다.
작게 | |
---|---|
Android |
iOS |
보통 | |
Android |
iOS |
네이티브 광고 이벤트
네이티브 광고 상호작용과 관련된 이벤트에 대한 알림을 받으려면
listener
드림
광고의 속성입니다. 그런 다음
NativeAdListener
드림
광고 이벤트 콜백을 수신할 수 있습니다.
class NativeExampleState extends State<NativeExample> {
NativeAd? _nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final String _adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/2247696110'
: 'ca-app-pub-3940256099942544/3986624511';
/// Loads a native ad.
void loadAd() {
_nativeAd = NativeAd(
adUnitId: _adUnitId,
listener: NativeAdListener(
onAdLoaded: (ad) {
print('$NativeAd loaded.');
setState(() {
_nativeAdIsLoaded = true;
});
},
onAdFailedToLoad: (ad, error) {
// Dispose the ad here to free resources.
print('$NativeAd failedToLoad: $error');
ad.dispose();
},
// Called when a click is recorded for a NativeAd.
onAdClicked: (ad) {},
// Called when an impression occurs on the ad.
onAdImpression: (ad) {},
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (ad) {},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (ad) {},
// For iOS only. Called before dismissing a full screen view
onAdWillDismissScreen: (ad) {},
// Called when an ad receives revenue value.
onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
),
request: const AdRequest(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
디스플레이 광고
NativeAd
를 위젯으로 표시하려면
AdWidget
load()
를 호출한 후 지원되는 광고와 함께 표시됩니다. 다음 날짜 이전에 위젯을 만들 수 있습니다.
load()
를 호출하지만 위젯에 추가하기 전에 load()
를 호출해야 합니다.
있습니다.
AdWidget
는 Flutter의 Widget
클래스에서 상속되며 다른 클래스처럼 사용할 수 있습니다.
위젯에 추가합니다. iOS의 경우 지정된
지정할 수 있습니다. 그렇지 않으면 광고가 게재되지 않을 수 있습니다.
// Small template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 90, // minimum recommended height
maxWidth: 400,
maxHeight: 200,
),
child: AdWidget(ad: _nativeAd!),
);
// Medium template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 320, // minimum recommended height
maxWidth: 400,
maxHeight: 400,
),
child: AdWidget(ad: _nativeAd!),
);
광고 폐기
가
NativeAd
드림
는 액세스 권한이 더 이상 필요하지 않은 경우 폐기해야 합니다. GCP의
dispose()
를 호출해야 하는 시점이 네이티브 광고와 연결된 AdWidget
이후
위젯 트리와 AdListener.onAdFailedToLoad()
에서 삭제됩니다.
있습니다.
다음 단계
- 네이티브 광고에서 네이티브 광고에 대해 자세히 알아보기 플레이북을 참고하세요.
- 네이티브 광고 정책과 가이드라인을 참고하세요.
- 고객 성공사례 보기: 우수사례 1, 우수사례 2.