FacebookAds

Installation

Configuration

Creating the placement ID

Configuring app.json

• In the Expo client, all of your Facebook API calls will be made with Expo's Facebook App ID. This means you will not see any related ad info in your Facebook developer page while running your project in the Expo client.
• To use your app's own Facebook App ID (and thus see any related ad info in your Facebook developer page), you'll need to build a standalone app.

Development vs Production

import * as FacebookAds from 'expo-ads-facebook';

FacebookAds.AdSettings.addTestDevice(FacebookAds.AdSettings.currentDeviceHash);

Usage

Interstitial Ads

import * as FacebookAds from 'expo-ads-facebook';

FacebookAds.InterstitialAdManager.showAd(placementId)
  .then(didClick => {})
  .catch(error => {});

Native Ads

1. Create NativeAdsManager instance

import * as FacebookAds from 'expo-ads-facebook';

const adsManager = new FacebookAds.NativeAdsManager(placementId, numberOfAdsToRequest);

• placementId - which is a unique identifier describing your ad units
• numberOfAdsToRequest - which is a number of ads to request by ads manager at a time

2. Wrap your component with withNativeAd HOC

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);

• 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 body
• callToActionText - Call to action phrase, e.g. - "Install Now"
• socialContext - social context for the Ad, for example "Over half a million users"

3. Add AdMediaView and AdIconView components

Note: Don't use more than one AdMediaView and AdIconView 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);

4. Mark which components trigger the ad

Note: In order for elements wrapped with AdTriggerView to trigger the ad, you also must include AdMediaView 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);

5. Render the ad component

class MyApp extends React.Component {
  render() {
    return (
      <View>
        <AdComponent adsManager={adsManager} />
      </View>
    );
  }
}

• 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

• standard (BANNER_HEIGHT_50)
• large (BANNER_HEIGHT_90)
• rectangle (RECTANGLE_HEIGHT_250)

1. Showing ad

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>
  );
}

API

import * as FacebookAds from 'expo-ads-facebook';

NativeAdsManager

disableAutoRefresh

adsManager.disableAutoRefresh();

setMediaCachePolicy (iOS)

adsManager.setMediaCachePolicy('none' | 'icon' | 'image' | 'all');

InterstitialAdManager

showAd

InterstitialAdManager.showAd('placementId')
  .then(...)
  .catch(...);

AdSettings

currentDeviceHash

addTestDevice

FacebookAds.AdSettings.addTestDevice('hash');

clearTestDevices

FacebookAds.AdSettings.clearTestDevices();

setLogLevel (iOS)

FacebookAds.AdSettings.setLogLevel(
  'none' | 'debug' | 'verbose' | 'warning' | 'error' | 'notification'
);

setIsChildDirected

FacebookAds.AdSettings.setIsChildDirected(true | false);

setMediationService

FacebookAds.AdSettings.setMediationService('foobar');

setUrlPrefix

FacebookAds.AdSettings.setUrlPrefix('...');

Troubleshooting