原生广告是通过平台原本就有的界面组件向用户呈现的广告素材资源。这种广告使用您在构建布局时已经采用的同类视图进行展示,而且能以和周围视觉设计相称的形式呈现,让用户有浑然一体的使用体验。具体到代码编写层面,这意味着当原生广告加载时,您的应用会收到一个包含其素材资源的 NativeAd 对象,然后就由此应用(而不是 Google 移动广告 SDK)负责展示它们了。
总的来说,要想成功植入原生广告,需要完成两部分工作:一是通过 SDK 加载广告,二是在您的应用中展示广告内容。本指南将介绍如何使用 SDK 加载原生广告。
平台设置
原生广告通过平台原本就有的界面组件(例如,Android 中的 View
或 iOS 中的 UIView
)向用户呈现。
由于原生广告需要使用平台原本就有的界面组件,因此此功能需要对 Android 和 iOS 进行额外的设置:
Android
在 Android 中实现 Google 移动广告插件需要一个可实现 NativeAdFactory
的类。NativeAdFactory
中包含一个可获取 NativeAd
和自定义选项并返回 NativeAdView
的方法。NativeAdView
是显示在应用中的视图。
您可以在 MainActivity.java
中实现此插件,也可以在 MainActivity.java
所在的同一目录中创建一个单独的类:
package my.app.path; 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; class NativeAdFactoryExample implements NativeAdFactory { @Override public NativeAdView createNativeAd( NativeAd nativeAd, Map<String, Object> customOptions) { // Create NativeAdView } }
每个 NativeAdFactory
都需要使用 factoryId
(一个唯一的 String
标识符)在 MainActivity.configureFlutterEngine(FlutterEngine)
中进行注册。您可以为应用所使用的每个唯一原生广告版式分别实现和注册一个 NativeAdFactory
,也可以用单个 NativeAdFactory 处理所有版式。
在使用加入现有应用功能进行构建时,还应在 cleanUpFlutterEngine(engine)
中取消注册 NativeAdFactory
。
MainActivity.java
应类似于:
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"); } }
在 Dart 中创建 NativeAd
时,factoryId
需要与将工厂添加到 GoogleMobileAdsPlugin
时所用的工厂 ID 相符。在上述代码段中,adFactoryExample
是 factoryId
的名称。下面是一个 NativeAdFactory
示例:
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/tree/master/packages/google_mobile_ads/example/android/app/src/main/res/layout */ 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); final TextView headlineView = adView.findViewById(R.id.ad_headline); final TextView bodyView = adView.findViewById(R.id.ad_body); headlineView.setText(nativeAd.getHeadline()); bodyView.setText(nativeAd.getBody()); adView.setBackgroundColor(Color.YELLOW); adView.setNativeAd(nativeAd); adView.setBodyView(bodyView); adView.setHeadlineView(headlineView); return adView; } }
iOS
在 iOS 中实现 Google 移动广告插件需要一个可实现 FLTNativeAdFactory
的类。FLTNativeAdFactory
中包含一个可获取 GADNativeAd
和自定义选项并返回 GADNativeAdView
的方法。GADNativeAdView
是显示在应用中的视图。
您可以通过 AppDelegate
实现 FLTNativeAdFactory
协议,也可以创建一个单独的类:
/* AppDelegate.m */ #import "FLTGoogleMobileAdsPlugin.h" @interface NativeAdFactoryExample : NSObject<FLTNativeAdFactory> @end @implementation NativeAdFactoryExample - (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd customOptions:(NSDictionary *)customOptions { // Create GADNativeAdView } @end
每个 FLTNativeAdFactory
都需要使用 factoryId
(一个唯一的 String
标识符)在 registerNativeAdFactory:factoryId:nativeAdFactory:
中进行注册。
您可以为应用所使用的每个唯一原生广告版式分别实现和注册一个 FLTNativeAdFactory
,也可以用单个 FLTNativeAdFactory 处理所有版式。为此,您需要导入 FLTGoogleMobileAdsPlugin.h
并使用 FlutterPluginRegistry
(工厂的唯一标识符)和工厂本身调用 registerNativeAdFactory:factoryId:nativeAdFactory:
,还必须在调用 GeneratedPluginRegistrant registerWithRegistry:self];
后添加工厂。
如果 AppDelegate.m
中的操作完成,应显示如下:
#import "FLTGoogleMobileAdsPlugin.h" @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [GeneratedPluginRegistrant registerWithRegistry:self]; NativeAdFactoryExample *nativeAdFactory = [[NativeAdFactoryExample alloc] init]; [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self factoryId:@"adFactoryExample" nativeAdFactory:nativeAdFactory]; return [super application:application didFinishLaunchingWithOptions:launchOptions]; } @end
在 Dart 中创建 NativeAd
时,factoryID
需要与将工厂添加到 FLTGoogleMobileAdsPlugin
时所用的工厂 ID 相符。在上述代码段中,adFactoryExample
是 factoryID
的名称。请查看以下 FLTNativeAdFactory
示例:
/** * The example NativeAdView.xib can be found at * //github.com/googleads/googleads-mobile-flutter/blob/master/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 ad in view hierarchy. GADNativeAdView *adView = [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject; // Associate the native ad view with the native ad object. This is // required to make the ad clickable. adView.nativeAd = nativeAd; // 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; return adView; } @end
务必用测试广告进行测试
在构建和测试应用时,请确保使用的是测试广告,而不是实际投放的广告。否则,可能会导致您的帐号被暂停。
对于原生广告,加载测试广告最简便的方法就是使用我们的专用测试广告单元 ID:
这些测试广告单元 ID 已经过专门配置,可确保每个请求返回的都是测试广告。您可以在自己应用的编码、测试和调试过程中随意使用这些测试广告单元 ID。只是一定要在发布应用前用您自己的广告单元 ID 替换这些测试广告单元 ID。
实例化广告
NativeAd
需要 adUnitId
、factoryId
、AdRequest
和 NativeAdListener
。以下示例实例化了一个原生广告:
final NativeAd myNative = NativeAd(
adUnitId: '<ad unit id>',
factoryId: 'adFactoryExample',
request: AdRequest(),
listener: NativeAdListener(),
);
工厂 ID
factoryId
需要与将工厂添加到 Android 中的 GoogleMobileAdsPlugin
和/或 iOS 中的 FLTGoogleMobileAdsPlugin
时所用的工厂 ID 相符。两个平台可以使用同一 factoryId
,每个平台也可以使用自己的工厂 ID。
原生广告事件
通过使用 NativeAdListener
,您可以监听各种广告生命周期事件,例如广告何时加载。以下示例实现了每个方法,并将消息记录到控制台:
final NativeAdListener listener = NativeAdListener(
// Called when an ad is successfully received.
onAdLoaded: (Ad ad) => print('Ad loaded.'),
// Called when an ad request failed.
onAdFailedToLoad: (Ad ad, LoadAdError error) {
// Dispose the ad here to free resources.
ad.dispose();
print('Ad failed to load: $error');
},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (Ad ad) => print('Ad opened.'),
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (Ad ad) => print('Ad closed.'),
// Called when an impression occurs on the ad.
onAdImpression: (Ad ad) => print('Ad impression.'),
// Called when a click is recorded for a NativeAd.
onNativeAdClicked: (NativeAd ad) => print('Ad clicked.'),
);
加载广告
实例化 NativeAd
之后,必须先调用 load()
,然后才能将其展示在屏幕上。
myNative.load();
展示广告
要以微件形式展示 NativeAd
,您必须在调用 load()
之后实例化含有受支持广告的 AdWidget
。您可以在调用 load()
之前创建微件,但必须先调用 load()
,然后才能将该微件添加到微件树中。
final AdWidget adWidget = AdWidget(ad: myBanner);
AdWidget
继承自 Flutter 的 Widget
类,可以像其他任何微件一样使用。在 iOS 中,请确保将该微件放置在具有指定宽度和高度的容器中。否则,您的广告可能不会展示。
final Container adContainer = Container(
alignment: Alignment.center,
child: adWidget,
width: 500,
height: 500,
);
广告调用 load()
后,如果不再需要访问该方法,则必须调用 dispose()
。调用 dispose()
的最佳做法是,在将 AdWidget
从微件树中移除后调用,或在 AdListener.onAdFailedToLoad
回调中调用。
大功告成!您的应用现在就可以展示原生广告了。