Trang này được dịch bởi Cloud Translation API.

Thiết lập mã gốc trong Android và iOS

Quảng cáo gốc được hiển thị cho người dùng bằng cách sử dụng các thành phần giao diện người dùng có nguồn gốc từ nền tảng – ví dụ: View trên Android hoặc một UIView bật iOS.

Hướng dẫn này chỉ cho bạn cách tải, hiển thị và tuỳ chỉnh quảng cáo gốc bằng mã dành riêng cho nền tảng.

Điều kiện tiên quyết

Xem hết Hướng dẫn bắt đầu sử dụng.
Làm quen với các lựa chọn cho quảng cáo gốc.

Luôn thử nghiệm bằng quảng cáo thử nghiệm

Khi tạo và thử nghiệm ứng dụng, hãy nhớ sử dụng quảng cáo thử nghiệm thay vì quảng cáo thực tế. Cách dễ nhất để tải quảng cáo thử nghiệm là sử dụng mã đơn vị quảng cáo thử nghiệm cho quảng cáo gốc:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

Các đơn vị quảng cáo thử nghiệm được định cấu hình để trả về quảng cáo thử nghiệm cho mọi yêu cầu, vì vậy, bạn có thể dùng chúng trong ứng dụng của mình khi lập trình, thử nghiệm và gỡ lỗi—chỉ cần đảm bảo bạn thay thế chúng bằng ID đơn vị quảng cáo của riêng mình trước xuất bản ứng dụng của bạn.

Thiết lập theo nền tảng cụ thể

Để tạo quảng cáo gốc, bạn cần phải viết mã dành riêng cho từng nền tảng cho iOS và Android, sau đó sửa đổi cách triển khai DEX để tận dụng những thay đổi mã gốc mà bạn đã thực hiện.

Android

Nhập trình bổ trợ

Việc triển khai Android của trình bổ trợ Quảng cáo trên thiết bị di động của Google yêu cầu một lớp triển khai NativeAdFactory API. Để tham chiếu API này từ dự án Android của bạn, hãy thêm phương thức các dòng sau vào tệp settings.gradle của bạn:

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
}

Triển khai NativeAdFactory

Tiếp theo, hãy tạo một lớp triển khai NativeAdFactory rồi ghi đè phương thức 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&lt;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 the Google Mobile Ads SDK that you have finished populating your
    // native ad view with this native ad.
    adView.setNativeAd(nativeAd);

    return adView;
  }
}

Để biết ví dụ về cách định cấu hình bố cục NativeAdView, hãy xem my_native_ad.xml.

Đăng ký ClaimReviewFactory của bạn

Bạn phải đăng ký mỗi cách triển khai NativeAdFactory bằng một factoryId là một giá trị nhận dạng duy nhất của String khi gọi MainActivity.configureFlutterEngine(FlutterEngine). factoryId sẽ là được sử dụng sau này khi tạo thực thể quảng cáo gốc từ mã Dart.

Bạn có thể triển khai và đăng ký NativeAdFactory cho từng gốc riêng biệt bố cục quảng cáo mà ứng dụng của bạn sử dụng hoặc một bố cục quảng cáo duy nhất có thể xử lý tất cả các bố cục.

Lưu ý rằng khi tạo bằng add-to-app (thêm vào ứng dụng), Bạn cũng nên huỷ đăng ký NativeAdFactory ở cleanUpFlutterEngine(engine).

Sau khi bạn tạo NativeAdFactoryExample, hãy thiết lậpMainActivity của bạn làm sau:

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

Triển khai PARTICIPANTFactory

Việc triển khai iOS trình bổ trợ Quảng cáo trên thiết bị di động của Google yêu cầu một lớp triển khai FLTNativeAdFactory API. Tạo một lớp triển khai NativeAdFactory và triển khai 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 &lt;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

Để biết ví dụ về cách định cấu hình bố cục GADNativeAdView, hãy xem nội dung NativeAdView.xib.

Đăng ký NativeAdFactory

Mỗi FLTNativeAdFactory cần được đăng ký bằng một factoryId (một mã duy nhất) Giá trị nhận dạng String, trong registerNativeAdFactory:factoryId:nativeAdFactory:. factoryId sẽ được sử dụng sau này khi tạo thực thể cho một quảng cáo gốc từ mã Dart.

Bạn có thể triển khai và đăng ký một FLTNativeAdFactory cho mỗi bố cục quảng cáo gốc riêng biệt mà ứng dụng của bạn sử dụng, hoặc một phương thức duy nhất có thể xử lý tất cả các bố cục.

Sau khi bạn tạo FLTNativeAdFactory, hãy thiết lập AppDelegate của bạn làm sau:

#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

Tải quảng cáo

Sau khi bạn thêm mã dành riêng cho nền tảng của mình, hãy chuyển sang Dart để tải quảng cáo. Nhãn hiệu đảm bảo factoryID khớp với giấy tờ tuỳ thân bạn đã đăng ký trước đó.

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,
        // 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 AdRequest(),
        // Optional: Pass custom options to your native ad factory implementation.
        customOptions: {'custom-option-1', 'custom-value-1'}
    );
    _nativeAd.load();
  }
}

Sự kiện quảng cáo gốc

Để nhận thông báo về những sự kiện có liên quan đến lượt tương tác với quảng cáo gốc, hãy sử dụng listener thuộc tính của quảng cáo. Sau đó, hãy triển khai NativeAdListener để nhận lệnh gọi lại sự kiện quảng cáo.

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,
        // 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 AdRequest(),
        // Optional: Pass custom options to your native ad factory implementation.
        customOptions: {'custom-option-1', 'custom-value-1'}
    );
    _nativeAd.load();
        
  }
}

Quảng cáo hiển thị hình ảnh

Để hiển thị NativeAd dưới dạng một tiện ích, bạn phải tạo thực thể cho một AdWidget bằng một quảng cáo được hỗ trợ sau khi gọi load(). Bạn có thể tạo tiện ích trước khi gọi load(), nhưng load() phải được gọi trước khi thêm nó vào tiện ích cây xanh.

AdWidget kế thừa từ lớp Widget của Flutter và có thể được sử dụng như bất kỳ lớp nào khác tiện ích. Trên iOS, hãy nhớ đặt tiện ích này trong vùng chứa có chiều rộng và chiều cao. Nếu không, quảng cáo của bạn có thể sẽ không hiển thị.

final Container adContainer = Container(
  alignment: Alignment.center,
  child: AdWidget adWidget = AdWidget(ad: _nativeAd!),
  width: WIDTH,
  height: HEIGHT,
);

Vứt bỏ quảng cáo

Đáp NativeAd phải được vứt bỏ khi không cần truy cập vào sản phẩm nữa. Phương pháp hay nhất để thời điểm gọi dispose() sau AdWidget được liên kết với quảng cáo gốc sẽ bị xoá khỏi cây tiện ích và trong AdListener.onAdFailedToLoad() .

Các bước tiếp theo

Tìm hiểu thêm về quảng cáo gốc trong cẩm nang về quảng cáo gốc của chúng tôi.
Xem chính sách về quảng cáo gốc và nguyên tắc.
Xem một số câu chuyện thành công của khách hàng: Nghiên cứu điển hình 1! nghiên cứu điển hình 2.

Ví dụ đầy đủ trên GitHub

Nền tảng gốc