Deprecated. This module will be removed in SDK 46. There will be no replacement that works with the classic build service (expo build) because the classic build service has been superseded by EAS Build. With EAS Build and Development Builds, you should use react-native-fbads instead.
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-facebookIf you're installing this in a bare React Native app, you should also follow these additional installation instructions.
expo-ads-facebook using its built-in config plugin if you use config plugins in your project (EAS Build or expo run:[android|ios]). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect.facebookAppId and facebookDisplayName keys.expo build:[android|ios])expo-ads-facebook repository.{
"expo": {
"facebookScheme": "fb1234567891234567",
"facebookAppId": "1234567891234567",
"facebookDisplayName": "My name",
"facebookAutoLogAppEventsEnabled": true,
"facebookAdvertiserIDCollectionEnabled": true,
"plugins": [
[
"expo-ads-facebook",
{
"userTrackingPermission": "This identifier will be used to deliver personalized ads to you."
}
]
]
}
}
| Name | Default | Description |
|---|---|---|
userTrackingPermission | "This identifier will be used to deliver personalized ads to you." | Only for: iOS Sets the iOS `NSUserTrackingUsageDescription` permission message in Info.plist. |
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 oneAdMediaViewandAdIconViewcomponent (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 withAdTriggerViewto trigger the ad, you also must includeAdMediaViewin 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.iOS: it requires theNSUserTrackingUsageDescriptionmessage added to the Info.plist.
iOS: it requires theNSUserTrackingUsageDescriptionmessage added to the Info.plist.
AdsManager gets created.FacebookAds.AdSettings.addTestDevice('hash');
FacebookAds.AdSettings.clearTestDevices();
FacebookAds.AdSettings.setAdvertisingTrackingEnabled(true);
FacebookAds.AdSettings.setLogLevel(
'none' | 'debug' | 'verbose' | 'warning' | 'error' | 'notification'
);
FacebookAds.AdSettings.setIsChildDirected(true | false);
This is calledsetMixedAudiencein the underlying Android SDK.
FacebookAds.AdSettings.setMediationService('foobar');
FacebookAds.AdSettings.setUrlPrefix('...');
| Info.plist Key | Description |
|---|---|
| A message that informs the user why an app is requesting permission to use data for tracking the user or the device. |