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.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> ); } }
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('...');