Skip to main content

​
Overview

Backfill ads automatically display alternative ads when no direct ads are available, maximizing revenue. Adrop supports major ad networks like AdMob and Pangle as backfill ad sources.
Backfill ads require additional platform-specific native setup.

​
Android Setup

​
1. Gradle Configuration

​
settings.gradle.kts

Add the Pangle ad network repository:
settings.gradle.kts
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://artifact.bytedance.com/repository/pangle") }
    }
}

​
build.gradle.kts

Add backfill ad dependencies: 
dependencies {
    implementation("io.adrop:adrop-ads:1.7.2")
    implementation("io.adrop:adrop-ads-backfill:1.7.2")
}

​
2. AndroidManifest.xml Configuration

If using AdMob as backfill, add the AdMob App ID to AndroidManifest.xml:
AndroidManifest.xml
<manifest>
    <application>
        <!-- AdMob App ID -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>
Replace ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy with your actual AdMob App ID.

​
3. ProGuard Configuration

If using ProGuard, add the following rules:
proguard-rules.pro
-keep class io.adrop.** { *; }
-dontwarn io.adrop.**

​
iOS Setup

​
1. Podfile Modification

Add backfill ad dependencies to your Podfile:
Podfile
target 'YourApp' do
  # Adrop SDK
  pod 'adrop-ads'

  # Backfill ad SDK
  pod 'adrop-ads-backfill'

  # ... other dependencies
end
After adding dependencies, run the following commands: 
cd ios
pod install

​
2. Info.plist Configuration

If using AdMob as backfill, add the AdMob App ID to Info.plist:
Info.plist
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy</string>
Replace ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy with your actual AdMob App ID.

​
Console Configuration

Enable backfill ads in the Adrop console:
  1. Log in to Adrop Console
  2. Navigate to Ad Units menu
  3. Select the ad unit to enable backfill
  4. Enable backfill ads in the Backfill Settings section
  5. Select the backfill ad network (AdMob, Pangle, etc.)
  6. Enter network-specific settings (e.g., AdMob Ad Unit ID)

​
Using in React Native

​
Checking Backfill Ads

Use the isBackfilled property to check if an ad is a backfill ad. 
import { AdropBanner } from 'adrop-ads-react-native'

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: 320, height: 100 }}
  onAdReceived={(unitId, metadata) => {
    if (metadata?.isBackfilled) {
      console.log('Backfill ad loaded')
    } else {
      console.log('Direct ad loaded')
    }
  }}
/>

​
Interstitial Ads

import { AdropInterstitialAd } from 'adrop-ads-react-native'

const interstitialAd = new AdropInterstitialAd('YOUR_UNIT_ID')

interstitialAd.listener = {
  onAdReceived: (ad) => {
    if (ad.isBackfilled) {
      console.log('Backfill ad loaded')
    } else {
      console.log('Direct ad loaded')
    }
  }
}

​
Rewarded Ads

import { AdropRewardedAd } from 'adrop-ads-react-native'

const rewardedAd = new AdropRewardedAd('YOUR_UNIT_ID')

rewardedAd.listener = {
  onAdReceived: (ad) => {
    if (ad.isBackfilled) {
      console.log('Backfill ad loaded')
    } else {
      console.log('Direct ad loaded')
    }
  }
}

​
Native Ads

For native ads, you need to render media views differently based on whether it’s a backfill ad. 
import {
  AdropNativeAd,
  AdropNativeAdView,
  AdropMediaView,
  AdropHeadLineView,
  AdropBodyView,
} from 'adrop-ads-react-native'
import { WebView } from 'react-native-webview'

const NativeAdExample = () => {
  const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
  const [isLoaded, setIsLoaded] = useState(false)

  useEffect(() => {
    const ad = new AdropNativeAd('YOUR_UNIT_ID')
    ad.listener = {
      onAdReceived: (ad) => {
        console.log('Ad received:', ad.isBackfilled ? 'backfill' : 'direct')
        setIsLoaded(true)
      }
    }
    ad.load()
    setNativeAd(ad)

    return () => ad.destroy()
  }, [])

  return (
    <AdropNativeAdView nativeAd={nativeAd}>
      <AdropHeadLineView style={styles.headline} />
      <AdropBodyView style={styles.body} />

      {/* Use different media view based on backfill status */}
      {nativeAd?.isBackfilled ? (
        // Backfill ad: Use AdropMediaView
        <AdropMediaView style={styles.media} />
      ) : (
        // Direct ad: Render with WebView
        <WebView
          source={{ html: nativeAd?.properties?.creative ?? '' }}
          style={styles.media}
          javaScriptEnabled={true}
          mediaPlaybackRequiresUserAction={false}
          allowsInlineMediaPlayback={true}
          scrollEnabled={false}
        />
      )}
    </AdropNativeAdView>
  )
}
For native ads that are not backfill ads, video ads must be rendered directly using WebView.

​
Ad Display Flow

Backfill ads are displayed in the following order:

​
Supported Ad Formats

Backfill ads support the following formats:
Ad FormatSupportDescription
BannerSupportedFixed-size banner ads
NativeSupportedCustomizable native ads
InterstitialSupportedFull-screen ads
RewardedSupportedReward-based ads
PopupSupportedPopup-style ads

​
Best Practices

Enable Backfill Ads

Enable backfill ads on all ad units to maximize ad fill rate and revenue.

Set Appropriate Timeouts

Set appropriate timeouts for direct and backfill ads to improve user experience.

Analyze Backfill Ads

Use the isBackfilled property to track and analyze the ratio of direct to backfill ads.

Handle Native Ad Media

For native ads, use AdropMediaView or WebView appropriately based on backfill status.

​
Important Notes

  • Android: You must add the io.adrop:adrop-ads-backfill:1.7.2 dependency to use backfill ads.
  • iOS: You must add pod 'adrop-ads-backfill' to your Podfile to use backfill ads.
  • If using AdMob, you must add the AdMob App ID to each platform’s manifest file.
  • For native ads that are not backfill, media must be rendered with WebView.
  • You must comply with the backfill ad network’s policies.

​
Next Steps

Banner Ads

Learn how to integrate banner ads

Interstitial Ads

Learn how to integrate interstitial ads

Rewarded Ads

Learn how to integrate rewarded ads

Native Ads

Learn how to integrate native ads