Documentation

  2. Home
  4. Docs
  6. Documentation
  8. Core Modules
  10. Ads

Ads

Facebook Ads

Some of our React Native apps have built-in functionality for Facebook Ads (Audience Network). We’ve included support for interstitial ads and native ads. The code lives in src/Core/ads/facebook. The Facebook Audience Network library is already included for you. If it’s not, you can simply install it by following the official steps outlined in expo-ads-facebook documentation. 1. Create a FB Audience Network account 2. Get a placement ID for Android, and a placement ID for iOS 3. Update the placement IDs in the config.js file of your React Native template

adsConfig: {
  facebookAdsPlacementID: Platform.OS === 'ios' ? "834318260403282_834914470343661" : "834318260403282_834390467062728",
  adSlotInjectionInterval: 10
},

4. Add your device’s hash to the list of testing devices in the Facebook Developer Console. (follow Facebook’s official instructions on how to do this) 5. Update the audience-network SDK version manually Changes are that the Expo NPM package wrapping up the audience network SDK is deprecated by the time you build your Facebook ads. Unfortunately this is unavoidable, since the open-source community doesn’t have the bandwidth to keep up with all Facebook updates. Facebook requires new Audience Network accounts to use the latest SDK version, so you’ll need to update this in node_modules manually:

  • Run “npm install“
  • For Android:
    • Open node_modules/expo-ads-facebook/android/build.gradle
    • Change the line with the SDK version with this: 
      api 'com.facebook.android:audience-network-sdk:5.+'
  • For iOS:
    • Open node_modules/expo-ads-facebook/ios/EXAdsFacebook.podspec
    • Modify the framework version to the latest one 
      s.dependency 'FBAudienceNetwork', '5.9.0'
    • Re-run “pod update” in the ios folder
  • Now build your project again
  • Important: Every time you remove node_modules or clean your React Native project you’ll have to redo this operation, since this change is getting lost.

Native Ads Native ads are enabled by default in our social networks. If you completed steps 1-4, then you should already be seeing testing ads in your feed. For native ads, you can leverage IMNativeFBAdComponentView component (which lives in src/Core/ads/facebook). This is already used by default, but you can take a look here if you want to understand the code or change the native ads UI. Interstitial Ads If you instead want to use interstitial ads, here’s a code snippet that triggers them

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

...

FacebookAds.InterstitialAdManager.showAd("834318260403282_834371153731326")
    .then(didClick => {})
    .catch(error => {
        alert(error);
 });