expo-ads-facebook
provides access to the Facebook Audience SDK, allowing you to monetize your app with targeted ads.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
expo install expo-ads-facebook
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
facebookAppId
and facebookDisplayName
keys.placementId
is required, simply provide DEMO_AD_TYPE#YOUR_PLACEMENT_ID
where DEMO_AD_TYPE
is one of the values shown here in the "Demo Ad Type Table".import * as FacebookAds from 'expo-ads-facebook'; FacebookAds.AdSettings.addTestDevice(FacebookAds.AdSettings.currentDeviceHash);
import * as FacebookAds from 'expo-ads-facebook'; FacebookAds.InterstitialAdManager.showAd(placementId) .then(didClick => {}) .catch(error => {});
NativeAdManager
is responsible for fetching and caching ads as you request them.import * as FacebookAds from 'expo-ads-facebook'; const adsManager = new FacebookAds.NativeAdsManager(placementId, numberOfAdsToRequest);
placementId
- which is a unique identifier describing your ad unitsnumberOfAdsToRequest
- which is a number of ads to request by ads manager at a timewithNativeAd
higher-order component. The wrapped component will receive a prop named nativeAd
, which you can use to render an ad.import * as FacebookAds from 'expo-ads-facebook'; class AdComponent extends React.Component { render() { return ( <View> <Text>{this.props.nativeAd.bodyText}</Text> </View> ); } } export default FacebookAds.withNativeAd(AdComponent);
nativeAd
object can contain the following properties:advertiserName
- The name of the Facebook Page or mobile app that represents the business running each ad.headline
- The headline that the advertiser entered when they created their ad. This is usually the ad's main title.linkDescription
- Additional information that the advertiser may have entered.adTranslation
- The word 'ad', translated into the language based upon Facebook app language setting.promotedTranslation
- The word 'promoted', translated into the language based upon Facebook app language setting.sponsoredTranslation
- The word 'sponsored', translated into the language based upon Facebook app language setting.bodyText
- Ad bodycallToActionText
- Call to action phrase, e.g. - "Install Now"socialContext
- social context for the Ad, for example "Over half a million users"AdMediaView
displays native ad media content whereas AdIconView
is responsible for displaying an ad icon.Note: Don't use more than oneAdMediaView
andAdIconView
component (each) within one native ad. If you use more, only the last mounted one will be populated with ad content.
import * as FacebookAds from 'expo-ads-facebook'; const { AdIconView, AdMediaView } = FacebookAds; class AdComponent extends React.Component { render() { return ( <View> <AdMediaView /> <AdIconView /> </View> ); } } export default FacebookAds.withNativeAd(AdComponent);
Note: In order for elements wrapped withAdTriggerView
to trigger the ad, you also must includeAdMediaView
in the children tree.
import * as FacebookAds from 'expo-ads-facebook'; const { AdTriggerView, AdMediaView } = FacebookAds; class AdComponent extends React.Component { render() { return ( <View> <AdMediaView /> <AdTriggerView> <Text>{this.props.nativeAd.bodyText}</Text> </AdTriggerView> </View> ); } } export default FacebookAds.withNativeAd(AdComponent);
adsManager
instance you created earlier.class MyApp extends React.Component { render() { return ( <View> <AdComponent adsManager={adsManager} /> </View> ); } }
onAdLoaded
and onError
.onAdLoaded
will be called once an ad is fetched and provided to your component (the nativeAd
property introduced in step 2.) The one and only argument with which the function will be called will be the native ad object.onError
will be called if the Audience framework encounters an error while fetching the ad. The one and only argument with which the function will be called will be an instance of Error
.class MyApp extends React.Component { render() { return ( <View> <AdComponent adsManager={adsManager} onAdLoaded={ad => console.log(ad)} onError={error => console.warn(error)} /> </View> ); } }
BannerAd
component allows you to display native as banners (known as AdView).standard
(BANNER_HEIGHT_50)large
(BANNER_HEIGHT_90)rectangle
(RECTANGLE_HEIGHT_250)BannerAd
from the package:import * as FacebookAds from 'expo-ads-facebook'; function ViewWithBanner(props) { return ( <View> <FacebookAds.BannerAd placementId="YOUR_BANNER_PLACEMENT_ID" type="standard" onPress={() => console.log('click')} onError={error => console.log('error', error)} /> </View> ); }
import * as FacebookAds from 'expo-ads-facebook';
FBNativeAdsManager
. It provides a mechanism to fetch a set of ads and use them.adsManager.disableAutoRefresh();
adsManager.setMediaCachePolicy('none' | 'icon' | 'image' | 'all');
InterstitialAdManager.showAd('placementId') .then(...) .catch(...);
boolean
indicating whether user didClick an ad or not.showAd
call being performed at a time. Otherwise, an error will be thrown.AdsManager
gets created.FacebookAds.AdSettings.addTestDevice('hash');
FacebookAds.AdSettings.clearTestDevices();
FacebookAds.AdSettings.setLogLevel( 'none' | 'debug' | 'verbose' | 'warning' | 'error' | 'notification' );
FacebookAds.AdSettings.setIsChildDirected(true | false);
FacebookAds.AdSettings.setMediationService('foobar');
FacebookAds.AdSettings.setUrlPrefix('...');