Dart의 네이티브 템플릿

네이티브 템플릿은 네이티브 광고를 위한 코드 완성형 보기로 쉽게 수정할 수 있습니다. 네이티브 템플릿을 사용하면 플러그인은 미리 빌드된 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()에서 삭제됩니다. 있습니다.

다음 단계

GitHub의 전체 예시

네이티브 템플릿