โฆษณาเนทีฟแสดงต่อผู้ใช้โดยใช้คอมโพเนนต์ UI เนทีฟใน
แพลตฟอร์ม ตัวอย่างเช่น
View
ใน Android หรือ
UIView
เมื่อ
iOS
คู่มือนี้แสดงวิธีโหลด แสดง และปรับแต่งโฆษณาเนทีฟโดยใช้ รหัสเฉพาะแพลตฟอร์ม
ข้อกำหนดเบื้องต้น
- ทำตามคู่มือเริ่มต้นใช้งานให้เสร็จสมบูรณ์
- ทำความคุ้นเคยกับตัวเลือกโฆษณาเนทีฟ
ทดสอบด้วยโฆษณาทดสอบเสมอ
เมื่อสร้างและทดสอบแอป โปรดตรวจสอบว่าคุณใช้โฆษณาทดสอบแทน โฆษณาเวอร์ชันที่ใช้งานจริง วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้ รหัสหน่วยโฆษณาทดสอบสำหรับโฆษณาเนทีฟ:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
หน่วยโฆษณาทดสอบจะได้รับการกำหนดค่าให้แสดงโฆษณาทดสอบในทุกๆ คำขอ ดังนั้น คุณสามารถใช้เทมเพลตเหล่านี้ในแอป ของคุณเองขณะเขียนโค้ด ทดสอบ เพียงแทนที่รหัสหน่วยโฆษณาด้วยรหัสหน่วยโฆษณาของคุณเอง การเผยแพร่แอปของคุณ
การตั้งค่าเฉพาะแพลตฟอร์ม
หากต้องการสร้างโฆษณาเนทีฟ คุณจะต้องเขียนโค้ดเฉพาะแพลตฟอร์มสำหรับ iOS และ Android ตามด้วยการแก้ไขการใช้งาน Dart ของคุณ จากการเปลี่ยนแปลงโค้ดเนทีฟที่คุณทำ
Android
นำเข้าปลั๊กอิน
การใช้ปลั๊กอินโฆษณาบนอุปกรณ์เคลื่อนที่ของ Google บน Android จำเป็นต้องมีคลาส
โดยใช้
NativeAdFactory
API หากต้องการอ้างอิง 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 the 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
ลงทะเบียน NativeAdfactor ของคุณ
การใช้งาน 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
ลงทะเบียน NativeAdfactor ของคุณ
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 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();
}
}
เหตุการณ์โฆษณาเนทีฟ
หากต้องการรับการแจ้งเตือนเหตุการณ์ที่เกี่ยวข้องกับการโต้ตอบของโฆษณาเนทีฟ ให้ใช้
listener
คุณสมบัติของโฆษณา จากนั้นติดตั้งใช้งาน
NativeAdListener
เพื่อรับ Callback ของเหตุการณ์โฆษณา
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();
}
}
โฆษณาแบบดิสเพลย์
หากต้องการแสดง 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()
Callback
ขั้นตอนถัดไป
- ดูข้อมูลเพิ่มเติมเกี่ยวกับโฆษณาเนทีฟในโฆษณาเนทีฟ Playbook
- ดูนโยบายโฆษณาเนทีฟ หลักเกณฑ์
- ดูเรื่องราวความสำเร็จของลูกค้า: กรณีศึกษา 1 กรณีศึกษา 2