เทมเพลตเนทีฟใน Dart

เทมเพลตเนทีฟคือมุมมองที่มีโค้ดสมบูรณ์สําหรับโฆษณาเนทีฟ ซึ่งออกแบบมาเพื่อการติดตั้งใช้งานที่รวดเร็วและการแก้ไขที่ง่ายดาย เมื่อใช้เทมเพลตเนทีฟ ปลั๊กอินจะสร้างเลย์เอาต์ Android และ iOS ให้คุณล่วงหน้า และคุณสามารถปรับแต่งสไตล์ของชิ้นงานเนทีฟได้โดยใช้ Dart API

คู่มือนี้สาธิตวิธีใช้ Dart API เพื่อจัดรูปแบบมุมมองแพลตฟอร์มพื้นฐานและแสดงผลโฆษณา

ข้อกำหนดเบื้องต้น

  • Flutter 2.4.0 ขึ้นไป

ทดสอบด้วยโฆษณาทดสอบเสมอ

เมื่อสร้างและทดสอบแอป โปรดใช้โฆษณาทดสอบแทนโฆษณาเวอร์ชันที่ใช้งานจริง วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบสําหรับโฆษณาเนทีฟโดยเฉพาะ ดังนี้

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

หน่วยโฆษณาทดสอบได้รับการกําหนดค่าให้แสดงโฆษณาทดสอบสําหรับคําขอทุกรายการ คุณจึงใช้หน่วยโฆษณาทดสอบในแอปของคุณเองได้ขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่อง เพียงอย่าลืมแทนที่หน่วยโฆษณาทดสอบด้วยรหัสหน่วยโฆษณาของคุณเองก่อนเผยแพร่แอป

โหลดโฆษณา

ตัวอย่างต่อไปนี้จะโหลดโฆษณาเนทีฟโดยใช้เทมเพลตโฆษณาเนทีฟขนาด 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 ซึ่งช่วยให้คุณจัดรูปแบบโฆษณาเนทีฟทั้งรายการในโค้ด Dart ได้

ขนาดเทมเพลต

เทมเพลตโฆษณาเนทีฟ Flutter มี 2 ประเภท ได้แก่ TemplateType.small และ TemplateType.medium เทมเพลตขนาดเล็กเหมาะสำหรับ TableView หรือ GridView, สําหรับโฆษณาในฟีด หรือที่ใดก็ตามที่คุณต้องการการแสดงโฆษณาสี่เหลี่ยมผืนผ้าผอม เทมเพลตขนาดกลางมีไว้สำหรับการดูหน้าเว็บครึ่งถึง 3 ใน 4 ซึ่งเหมาะสําหรับหน้า Landing Page หรือหน้าแรก

เล็ก

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 สืบทอดมาจากคลาส Widget ของ Flutter และใช้เหมือนกับวิดเจ็ตอื่นๆ ได้ ใน 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 เมื่อไม่จำเป็นต้องเข้าถึงอีกต่อไป แนวทางปฏิบัติแนะนำสำหรับเวลาในการเรียกใช้ dispose() คือหลังจากที่นำ AdWidget ที่เชื่อมโยงกับโฆษณาเนทีฟออกจากต้นไม้วิดเจ็ตและอยู่ใน AdListener.onAdFailedToLoad() callback

ขั้นตอนถัดไป

ตัวอย่างที่สมบูรณ์ใน GitHub

เทมเพลตโฆษณาเนทีฟ