מודעות מותאמות מוצגות למשתמשים באמצעות רכיבי ממשק משתמש שפועלים באופן מקורי בפלטפורמה – לדוגמה, View
ב-Android או UIView
ב-iOS.
במדריך הזה מוסבר איך לטעון, להציג ולהתאים אישית מודעות מותאמות באמצעות קוד ספציפי לפלטפורמה.
דרישות מוקדמות
- קוראים את המדריך לתחילת העבודה.
- מומלץ לקרוא על האפשרויות של מודעות מותאמות.
ביצוע בדיקות באמצעות מודעות בדיקה תמיד
כשאתם מפתחים ובודקים את האפליקציות, חשוב להשתמש במודעות בדיקה במקום במודעות פעילות בסביבת הייצור. הדרך הקלה ביותר לטעון מודעות לבדיקה היא להשתמש במזהה הייעודי של יחידת המודעות לבדיקה של מודעות מותאמות:
/21775744923/example/native
יחידות המודעות לבדיקה מוגדרות להחזיר מודעות בדיקה לכל בקשה, כך שתוכלו להשתמש בהן באפליקציות שלכם בזמן הכתיבה, הבדיקה ותיקון הבאגים – רק חשוב לוודא שתחליפו אותן במזהי יחידות המודעות שלכם לפני שתפרסמו את האפליקציה.
הגדרות ספציפיות לפלטפורמה
כדי ליצור מודעות מותאמות, צריך לכתוב קוד ספציפי לפלטפורמה ל-iOS ול-Android, ולאחר מכן לשנות את ההטמעה של טבלת ה-Dart כדי לנצל את השינויים בקוד הנייטיב שביצעתם.
Android
ייבוא הפלאגין
כדי להטמיע את הפלאגין של Google Mobile Ads ב-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
ומבטלת את ה-method 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.
רישום NativeAdManufacturer
כל הטמעה של NativeAdFactory
צריכה להיות רשומה עם factoryId
, מזהה String
ייחודי, בזמן הקריאה ל-MainActivity.configureFlutterEngine(FlutterEngine)
. המשתנה factoryId
ישמש מאוחר יותר בזמן יצירת מודעת Native מקוד Dart.
אפשר להטמיע ולרשום את NativeAdFactory
לכל פריסה ייחודית של מודעה נאטיבית שמשמשת את האפליקציה, או להשתמש ב-NativeAdFactory
אחד לכל הפריסות.
חשוב לזכור שכאשר יוצרים באמצעות add-to-app, צריך לבטל גם את הרישום של 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 Mobile Ads ב-iOS, צריך להטמיע מחלקה של ה-API ל-FLTNativeAdFactory
. יוצרים מחלקה שמטמיעה את 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
ישמש מאוחר יותר בזמן יצירת מודעת Native מקוד Dart.
אפשר להטמיע ולרשום FLTNativeAdFactory
לכל פריסה ייחודית של מודעה רגילה שמשמשת את האפליקציה, או להשתמש ב-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
שמשויך למודעה המקורית מוסר מעץ הווידג'טים, ובפונקציית ה-callback AdListener.onAdFailedToLoad()
.