โฆษณาเนทีฟจะแสดงต่อผู้ใช้โดยใช้คอมโพเนนต์ UI ที่เป็นของแพลตฟอร์มนั้นๆ เช่น View ใน Android หรือ UIView ใน iOS
คู่มือนี้แสดงวิธีโหลด แสดง และปรับแต่งโฆษณาเนทีฟโดยใช้โค้ดเฉพาะแพลตฟอร์ม
ข้อกำหนดเบื้องต้น
- ทำตามคู่มือเริ่มต้นใช้งาน
- ทำความคุ้นเคยกับตัวเลือกโฆษณาเนทีฟ
ทดสอบด้วยโฆษณาทดสอบเสมอ
เมื่อสร้างและทดสอบแอป โปรดใช้โฆษณาทดสอบแทน โฆษณาจริงที่ใช้งานจริง วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบเฉพาะสำหรับโฆษณาเนทีฟ ดังนี้
- /21775744923/example/native
หน่วยโฆษณาทดสอบได้รับการกำหนดค่าให้แสดงโฆษณาทดสอบสำหรับทุกคำขอ ดังนั้น คุณจึงใช้หน่วยโฆษณาทดสอบในแอปของตัวเองได้ขณะเขียนโค้ด ทดสอบ และ แก้ไขข้อบกพร่อง เพียงตรวจสอบว่าคุณได้แทนที่หน่วยโฆษณาทดสอบด้วยรหัสหน่วยโฆษณาของตัวเองก่อน เผยแพร่แอป
การตั้งค่าเฉพาะแพลตฟอร์ม
หากต้องการสร้างโฆษณาเนทีฟ คุณจะต้องเขียนโค้ดเฉพาะแพลตฟอร์มสำหรับ iOS และ Android จากนั้นจึงแก้ไขการติดตั้งใช้งาน Dart เพื่อใช้ประโยชน์ จากการเปลี่ยนแปลงโค้ดเนทีฟที่คุณทำ
Android
นำเข้าปลั๊กอิน
การติดตั้งใช้งานปลั๊กอินโฆษณา Google ในอุปกรณ์เคลื่อนที่ใน Android ต้องใช้คลาสที่
ใช้ API NativeAdFactory
 หากต้องการอ้างอิง API นี้จากโปรเจ็กต์ Android ให้เพิ่มบรรทัดต่อไปนี้ลงใน settings.gradle
def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
    pluginsFile.withInputStream { stream -> plugins.load(stream) }
}
plugins.each { name, path ->
    def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
    include ":$name"
    project(":$name").projectDir = pluginDirectory
}
ใช้ NativeAdFactory
จากนั้นสร้างคลาสที่ใช้ NativeAdFactory และลบล้างเมธอด createNativeAd()
package io.flutter.plugins.googlemobileadsexample;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.widget.TextView;
import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;
/**
 * my_native_ad.xml can be found at
 * github.com/googleads/googleads-mobile-flutter/blob/main/packages/google_mobile_ads/
 *     example/android/app/src/main/res/layout/my_native_ad.xml
 */
class NativeAdFactoryExample implements NativeAdFactory {
  private final LayoutInflater layoutInflater;
  NativeAdFactoryExample(LayoutInflater layoutInflater) {
    this.layoutInflater = layoutInflater;
  }
  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    final NativeAdView adView =
        (NativeAdView) layoutInflater.inflate(R.layout.my_native_ad, null);
    // Set the media view.
    adView.setMediaView((MediaView) adView.findViewById(R.id.ad_media));
    // Set other ad assets.
    adView.setHeadlineView(adView.findViewById(R.id.ad_headline));
    adView.setBodyView(adView.findViewById(R.id.ad_body));
    adView.setCallToActionView(adView.findViewById(R.id.ad_call_to_action));
    adView.setIconView(adView.findViewById(R.id.ad_app_icon));
    adView.setPriceView(adView.findViewById(R.id.ad_price));
    adView.setStarRatingView(adView.findViewById(R.id.ad_stars));
    adView.setStoreView(adView.findViewById(R.id.ad_store));
    adView.setAdvertiserView(adView.findViewById(R.id.ad_advertiser));
    // The headline and mediaContent are guaranteed to be in every NativeAd.
    ((TextView) adView.getHeadlineView()).setText(nativeAd.getHeadline());
    adView.getMediaView().setMediaContent(nativeAd.getMediaContent());
    // These assets aren't guaranteed to be in every NativeAd, so it's important to
    // check before trying to display them.
    if (nativeAd.getBody() == null) {
      adView.getBodyView().setVisibility(View.INVISIBLE);
    } else {
      adView.getBodyView().setVisibility(View.VISIBLE);
      ((TextView) adView.getBodyView()).setText(nativeAd.getBody());
    }
    if (nativeAd.getCallToAction() == null) {
      adView.getCallToActionView().setVisibility(View.INVISIBLE);
    } else {
      adView.getCallToActionView().setVisibility(View.VISIBLE);
      ((Button) adView.getCallToActionView()).setText(nativeAd.getCallToAction());
    }
    if (nativeAd.getIcon() == null) {
      adView.getIconView().setVisibility(View.GONE);
    } else {
      ((ImageView) adView.getIconView()).setImageDrawable(nativeAd.getIcon().getDrawable());
      adView.getIconView().setVisibility(View.VISIBLE);
    }
    if (nativeAd.getPrice() == null) {
      adView.getPriceView().setVisibility(View.INVISIBLE);
    } else {
      adView.getPriceView().setVisibility(View.VISIBLE);
      ((TextView) adView.getPriceView()).setText(nativeAd.getPrice());
    }
    if (nativeAd.getStore() == null) {
      adView.getStoreView().setVisibility(View.INVISIBLE);
    } else {
      adView.getStoreView().setVisibility(View.VISIBLE);
      ((TextView) adView.getStoreView()).setText(nativeAd.getStore());
    }
    if (nativeAd.getStarRating() == null) {
      adView.getStarRatingView().setVisibility(View.INVISIBLE);
    } else {
      ((RatingBar) adView.getStarRatingView()).setRating(nativeAd.getStarRating()
          .floatValue());
      adView.getStarRatingView().setVisibility(View.VISIBLE);
    }
    if (nativeAd.getAdvertiser() == null) {
      adView.getAdvertiserView().setVisibility(View.INVISIBLE);
    } else {
      adView.getAdvertiserView().setVisibility(View.VISIBLE);
      ((TextView) adView.getAdvertiserView()).setText(nativeAd.getAdvertiser());
    }
    // This method tells Google Mobile Ads SDK that you have finished populating your
    // native ad view with this native ad.
    adView.setNativeAd(nativeAd);
    return adView;
  }
}
ดูตัวอย่างการกำหนดค่าเลย์เอาต์ NativeAdView ได้ที่ my_native_ad.xml
ลงทะเบียน NativeAdFactory
NativeAdFactory การติดตั้งใช้งานแต่ละครั้งจะต้องลงทะเบียนด้วย
factoryId ซึ่งเป็นString ตัวระบุที่ไม่ซ้ำกัน เมื่อเรียกใช้
MainActivity.configureFlutterEngine(FlutterEngine) factoryId จะ
ใช้ในภายหลังเมื่อสร้างอินสแตนซ์โฆษณาเนทีฟจากโค้ด Dart
คุณสามารถใช้และลงทะเบียน NativeAdFactory สำหรับเลย์เอาต์โฆษณาเนทีฟที่ไม่ซ้ำกันแต่ละรายการที่แอปใช้ หรือจะใช้เพียงรายการเดียวเพื่อจัดการเลย์เอาต์ทั้งหมดก็ได้
โปรดทราบว่าเมื่อสร้างด้วย
เพิ่มลงในแอป คุณควรยกเลิกการลงทะเบียน
NativeAdFactory ใน
cleanUpFlutterEngine(engine) ด้วย
เมื่อสร้าง NativeAdFactoryExample แล้ว ให้ตั้งค่าMainActivity ดังนี้
package my.app.path;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;
public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(FlutterEngine flutterEngine) {
    flutterEngine.getPlugins().add(new GoogleMobileAdsPlugin());
    super.configureFlutterEngine(flutterEngine);
    GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine,
        "adFactoryExample", NativeAdFactoryExample());
  }
  @Override
  public void cleanUpFlutterEngine(FlutterEngine flutterEngine) {
    GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "adFactoryExample");
  }
}
iOS
ใช้ NativeAdFactory
การติดตั้งใช้งานปลั๊กอินโฆษณาในอุปกรณ์เคลื่อนที่ของ Google ใน iOS ต้องใช้คลาส
ที่ใช้
FLTNativeAdFactory
API สร้างคลาสที่ใช้ NativeAdFactory และใช้เมธอด
createNativeAd()
#import "FLTGoogleMobileAdsPlugin.h"
/**
 * The example NativeAdView.xib can be found at
 * github.com/googleads/googleads-mobile-flutter/blob/main/packages/google_mobile_ads/
 *     example/ios/Runner/NativeAdView.xib
 */
@interface NativeAdFactoryExample : NSObject <FLTNativeAdFactory>
@end
@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                      customOptions:(NSDictionary *)customOptions {
  // Create and place the ad in the view hierarchy.
  GADNativeAdView *adView =
      [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;
  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  ((UILabel *)adView.headlineView).text = nativeAd.headline;
  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  ((UILabel *)adView.bodyView).text = nativeAd.body;
  adView.bodyView.hidden = nativeAd.body ? NO : YES;
  [((UIButton *)adView.callToActionView) setTitle:nativeAd.callToAction
                                         forState:UIControlStateNormal];
  adView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;
  ((UIImageView *)adView.iconView).image = nativeAd.icon.image;
  adView.iconView.hidden = nativeAd.icon ? NO : YES;
  ((UILabel *)adView.storeView).text = nativeAd.store;
  adView.storeView.hidden = nativeAd.store ? NO : YES;
  ((UILabel *)adView.priceView).text = nativeAd.price;
  adView.priceView.hidden = nativeAd.price ? NO : YES;
  ((UILabel *)adView.advertiserView).text = nativeAd.advertiser;
  adView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;
  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  adView.callToActionView.userInteractionEnabled = NO;
  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  // Note: this should always be done after populating the ad views.
  adView.nativeAd = nativeAd;
  return adView;
}
@end
ดูตัวอย่างการกำหนดค่าเลย์เอาต์ GADNativeAdView ได้ที่ NativeAdView.xib
ลงทะเบียน NativeAdFactory
FLTNativeAdFactory แต่ละรายการต้องลงทะเบียนกับ factoryId ซึ่งเป็นตัวระบุ String ที่ไม่ซ้ำกันใน registerNativeAdFactory:factoryId:nativeAdFactory:
ระบบจะใช้ factoryId ในภายหลังเมื่อสร้างอินสแตนซ์โฆษณาเนทีฟ
จากโค้ด Dart
คุณสามารถใช้และลงทะเบียน FLTNativeAdFactory สำหรับเลย์เอาต์โฆษณาเนทีฟที่ไม่ซ้ำกันแต่ละรายการที่แอปใช้ หรือจะใช้เพียงรายการเดียวเพื่อจัดการเลย์เอาต์ทั้งหมดก็ได้
เมื่อสร้าง FLTNativeAdFactory แล้ว ให้ตั้งค่า AppDelegate ดังนี้
#import "FLTGoogleMobileAdsPlugin.h"
#import "NativeAdFactoryExample.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
      didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];
  // Must be added after GeneratedPluginRegistrant registerWithRegistry:self];
  // is called.
  NativeAdFactoryExample *nativeAdFactory = [[NativeAdFactoryExample alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                          factoryId:@"adFactoryExample"
                                    nativeAdFactory:nativeAdFactory];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
โหลดโฆษณา
หลังจากเพิ่มโค้ดเฉพาะแพลตฟอร์มแล้ว ให้ไปที่ Dart เพื่อโหลดโฆษณา ตรวจสอบว่า factoryID ตรงกับรหัสที่คุณลงทะเบียนไว้ก่อนหน้านี้
class NativeExampleState extends State<NativeExample> {
  NativeAd? _nativeAd;
  bool _nativeAdIsLoaded = false;
 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/21775744923/example/native';
  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        // Factory ID registered by your native ad factory implementation.
        factoryId: 'adFactoryExample',
        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();
          },
        ),
        request: const AdManagerAdRequest(),
        // Optional: Pass custom options to your native ad factory implementation.
        customOptions: {'custom-option-1', 'custom-value-1'}
    );
    _nativeAd.load();
  }
}
เหตุการณ์โฆษณาเนทีฟ
หากต้องการรับการแจ้งเตือนเกี่ยวกับเหตุการณ์ที่เกี่ยวข้องกับการโต้ตอบโฆษณาเนทีฟ ให้ใช้พร็อพเพอร์ตี้
listener
ของโฆษณา จากนั้นใช้
NativeAdListener
เพื่อรับการเรียกกลับของเหตุการณ์โฆษณา
class NativeExampleState extends State<NativeExample> {
  NativeAd? _nativeAd;
  bool _nativeAdIsLoaded = false;
 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/21775744923/example/native';
  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        // Factory ID registered by your native ad factory implementation.
        factoryId: 'adFactoryExample',
        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 AdManagerAdRequest(),
        // Optional: Pass custom options to your native ad factory implementation.
        customOptions: {'custom-option-1', 'custom-value-1'}
    );
    _nativeAd.load();
        
  }
}
โฆษณาแบบดิสเพลย์
หากต้องการแสดง NativeAd เป็นวิดเจ็ต คุณต้องสร้างอินสแตนซ์ของ
AdWidget
ด้วยโฆษณาที่รองรับหลังจากเรียกใช้ load() คุณสร้างวิดเจ็ตก่อนเรียกใช้ load() ได้ แต่ต้องเรียกใช้ load() ก่อนจึงจะเพิ่มวิดเจ็ตลงใน
แผนผังวิดเจ็ตได้
AdWidget สืบทอดมาจากคลาส Widget ของ Flutter และใช้ได้เหมือนกับวิดเจ็ตอื่นๆ
 ใน iOS ให้ตรวจสอบว่าคุณวางวิดเจ็ตในคอนเทนเนอร์ที่มี
ความกว้างและความสูงที่ระบุ ไม่เช่นนั้น โฆษณาอาจไม่แสดง
final Container adContainer = Container(
  alignment: Alignment.center,
  child: AdWidget adWidget = AdWidget(ad: _nativeAd!),
  width: WIDTH,
  height: HEIGHT,
);
ทิ้งโฆษณา
NativeAd
ต้องกำจัดเมื่อไม่จำเป็นต้องเข้าถึงอีกต่อไป แนวทางปฏิบัติแนะนำสำหรับ
เวลาเรียกใช้ dispose() คือหลังจากที่ AdWidget ที่เชื่อมโยงกับโฆษณาเนทีฟ
ถูกนำออกจากแผนผังวิดเจ็ตและในแฮนเดิล AdListener.onAdFailedToLoad()
การเรียกกลับ