Banner Ads - Ad Control Help Center

Overview

Banner ads are rectangular ads displayed in a portion of the screen. They can be easily implemented using the AdropBanner component.

Key Features

Can be fixed at the top, bottom, or middle of the screen
Support for image and video ads
Support for automatic or manual ad loading
Ad event handling through callbacks
Provides ad metadata (creative ID, campaign ID, etc.)

Use test unit IDs in development: PUBLIC_TEST_UNIT_ID_320_100 or PUBLIC_TEST_UNIT_ID_320_50

AdropBanner Component

Props

string

required

Unit ID created in the Ad Control Console

ViewStyle

required

Banner style (width and height required)

string

Context ID for contextual targeting (1.17.0+). Only the value at mount time applies. To change it, change key to remount the banner.

boolean

default:"true"

Whether to automatically load ads when the component is mounted

boolean

default:"false"

Whether to use custom click handling. If set to true, the browser won’t automatically open on ad click.

{ width: number; height: number } | null

Explicit ad size to request from the server. When style.width is a number, adSize is automatically derived from the style dimensions ({ width: style.width, height: style.height }). When style.width is a string (e.g., '100%'), adSize defaults to null and the SDK uses responsive sizing. You generally do not need to set this prop manually.

(unitId: string, metadata?: AdropBannerMetadata) => void

Callback invoked when ad is successfully received

(unitId: string, metadata?: AdropBannerMetadata) => void

Callback invoked when user clicks the ad

(unitId: string, metadata?: AdropBannerMetadata) => void

Callback invoked when ad is displayed on screen

(unitId: string, errorCode?: string) => void

Callback invoked when ad reception fails

(unitId: string) => void

Callback invoked when a video ad starts playing

(unitId: string) => void

Callback invoked when a video ad finishes playing

Basic Usage

Auto Load (Recommended)

Automatically load the ad when the component is mounted.

import React from 'react'
import { View, StyleSheet, Dimensions } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const App = () => {
  const screenWidth = Dimensions.get('window').width

  return (
    <View style={styles.container}>
      {/* Main content */}
      <View style={styles.content}>
        {/* ... */}
      </View>

      {/* Banner ad */}
      <AdropBanner
        unitId="YOUR_UNIT_ID"
        style={{ width: screenWidth, height: 80 }}
        onAdReceived={(unitId, metadata) => {
          console.log('Banner ad received successfully', unitId, metadata)
        }}
        onAdFailedToReceive={(unitId, errorCode) => {
          console.log('Banner ad failed to receive', unitId, errorCode)
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
  },
})

export default App

Manual Load Using Ref

You can load ads at the desired time using ref.

import React, { useRef } from 'react'
import { View, Button, StyleSheet, Dimensions } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

interface AdropBannerRef {
  load: () => void
}

const App = () => {
  const bannerRef = useRef<AdropBannerRef>(null)
  const screenWidth = Dimensions.get('window').width

  const loadBanner = () => {
    bannerRef.current?.load()
  }

  return (
    <View style={styles.container}>
      <Button title="Load Banner Ad" onPress={loadBanner} />

      <AdropBanner
        ref={bannerRef}
        unitId="YOUR_UNIT_ID"
        style={{ width: screenWidth, height: 80 }}
        autoLoad={false}
        onAdReceived={(unitId, metadata) => {
          console.log('Banner ad received successfully', unitId, metadata)
        }}
        onAdFailedToReceive={(unitId, errorCode) => {
          console.log('Banner ad failed to receive', unitId, errorCode)
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
})

export default App

Callback Functions

onAdReceived

Called when ad reception is successful.

const handleAdReceived = (unitId: string, metadata?: AdropBannerMetadata) => {
  console.log('Banner ad received successfully')
  console.log('Unit ID:', unitId)
  console.log('Creative ID:', metadata?.creativeId)
  console.log('Campaign ID:', metadata?.campaignId)
  console.log('Transaction ID:', metadata?.txId)
  console.log('Destination URL:', metadata?.destinationURL)

  // Handle actions such as hiding loading indicator
}

onAdClicked

Called when user clicks the ad.

const handleAdClicked = (unitId: string, metadata?: AdropBannerMetadata) => {
  console.log('Banner ad clicked')
  console.log('Unit ID:', unitId)
  console.log('Destination URL:', metadata?.destinationURL)

  // Handle actions such as click analytics logging
}

onAdImpression

Called when ad is displayed on screen.

const handleAdImpression = (unitId: string, metadata?: AdropBannerMetadata) => {
  console.log('Banner ad impression')
  console.log('Unit ID:', unitId)
  console.log('Creative ID:', metadata?.creativeId)

  // Handle actions such as impression analytics logging
}

onAdFailedToReceive

Called when ad reception fails.

const handleAdFailedToReceive = (unitId: string, errorCode?: string) => {
  console.log('Banner ad failed to receive')
  console.log('Unit ID:', unitId)
  console.log('Error code:', errorCode)

  // Handle errors and display fallback content
  if (errorCode === AdropErrorCode.network) {
    console.log('Please check your network connection')
  } else if (errorCode === AdropErrorCode.adNoFill) {
    console.log('No ads available to display')
  }
}

onAdVideoStart

Called when a video ad starts playing.

const handleAdVideoStart = (unitId: string) => {
  console.log('Video ad started playing')
  console.log('Unit ID:', unitId)
}

onAdVideoEnd

Called when a video ad finishes playing.

const handleAdVideoEnd = (unitId: string) => {
  console.log('Video ad finished playing')
  console.log('Unit ID:', unitId)
}

AdropBannerMetadata

Type for ad metadata.

type AdropBannerMetadata = {
  creativeId: string      // Creative ID
  txId: string           // Transaction ID
  campaignId: string     // Campaign ID
  destinationURL: string // Destination URL
  browserTarget: BrowserTarget // Browser target (EXTERNAL = 0, INTERNAL = 1)
}

This information can be useful for ad analytics, tracking, and reporting.

Ad Sizes

Banner ads should have style dimensions that match the size set in the unit.

Size	Usage
320 x 50	Small banner
320 x 100	Medium banner
16:9 ratio	Video banner

Using Fixed Size

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: 320, height: 100 }}
/>

Fitting to Screen Width

import { Dimensions } from 'react-native'

const screenWidth = Dimensions.get('window').width

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: screenWidth, height: 80 }}
/>

Using Responsive Size

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: '100%', height: 80 }}
/>

If width is set as a string (e.g., '100%'), it works responsively, but if set as a number, that value is passed to the ad server to request ads of appropriate size.

Test Unit IDs

Use the following test unit IDs during development and testing.

Ad Type	Test Unit ID	Size
Banner (320x50)	`PUBLIC_TEST_UNIT_ID_320_50`	320 x 50
Banner (320x100)	`PUBLIC_TEST_UNIT_ID_320_100`	320 x 100

Usage Example

<AdropBanner
  unitId="PUBLIC_TEST_UNIT_ID_320_100"
  style={{ width: 320, height: 100 }}
/>

Error Handling

Implement appropriate error handling when ad loading fails.

Managing Error State

import React, { useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const App = () => {
  const [error, setError] = useState<string | null>(null)

  const handleAdReceived = () => {
    setError(null)
  }

  const handleAdFailedToReceive = (unitId: string, errorCode?: string) => {
    setError(errorCode || 'Unknown error')
  }

  return (
    <View style={styles.container}>
      <AdropBanner
        unitId="YOUR_UNIT_ID"
        style={{ width: 320, height: 100 }}
        onAdReceived={handleAdReceived}
        onAdFailedToReceive={handleAdFailedToReceive}
      />

      {error && (
        <Text style={styles.errorText}>
          Ad loading failed: {error}
        </Text>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  errorText: {
    marginTop: 8,
    color: 'red',
  },
})

export default App

Best Practices

1. Screen Visibility

Load ads when the banner is visible on screen.

import React, { useEffect, useRef } from 'react'
import { AppState } from 'react-native'

const App = () => {
  const bannerRef = useRef<{ load: () => void }>(null)
  const appState = useRef(AppState.currentState)

  useEffect(() => {
    const subscription = AppState.addEventListener('change', nextAppState => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === 'active'
      ) {
        // Refresh ad when app returns to foreground
        bannerRef.current?.load()
      }
      appState.current = nextAppState
    })

    return () => {
      subscription.remove()
    }
  }, [])

  return (
    <AdropBanner
      ref={bannerRef}
      unitId="YOUR_UNIT_ID"
      style={{ width: 320, height: 100 }}
    />
  )
}

2. Loading Indicator

Improve user experience during ad loading.

import React, { useState } from 'react'
import { View, ActivityIndicator, StyleSheet } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const App = () => {
  const [loading, setLoading] = useState(true)

  return (
    <View style={styles.container}>
      {loading && (
        <ActivityIndicator
          style={styles.loader}
          size="small"
          color="#999"
        />
      )}

      <AdropBanner
        unitId="YOUR_UNIT_ID"
        style={{ width: 320, height: 100 }}
        onAdReceived={() => setLoading(false)}
        onAdFailedToReceive={() => setLoading(false)}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  loader: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: [{ translateX: -12 }, { translateY: -12 }],
  },
})

3. Managing Multiple Banners

Manage the state of each banner when using multiple banners.

import React, { useState } from 'react'
import { View, Text } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const App = () => {
  const [banner1Loaded, setBanner1Loaded] = useState(false)
  const [banner2Loaded, setBanner2Loaded] = useState(false)

  return (
    <View>
      <Text>Banner 1: {banner1Loaded ? 'Loaded' : 'Loading'}</Text>
      <AdropBanner
        unitId="UNIT_ID_1"
        style={{ width: 320, height: 100 }}
        onAdReceived={() => setBanner1Loaded(true)}
      />

      <Text>Banner 2: {banner2Loaded ? 'Loaded' : 'Loading'}</Text>
      <AdropBanner
        unitId="UNIT_ID_2"
        style={{ width: 320, height: 100 }}
        onAdReceived={() => setBanner2Loaded(true)}
      />
    </View>
  )
}

4. Custom Click Handling

Use useCustomClick to handle ad clicks directly.

import { Linking } from 'react-native'
import { AdropBanner, type AdropBannerMetadata } from 'adrop-ads-react-native'

const App = () => {
  const handleAdClicked = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('Ad clicked:', unitId)

    // Custom analytics logging
    analytics.logEvent('ad_clicked', {
      unitId,
      campaignId: metadata?.campaignId,
    })

    // Manually open browser
    if (metadata?.destinationURL) {
      Linking.openURL(metadata.destinationURL)
    }
  }

  return (
    <AdropBanner
      unitId="YOUR_UNIT_ID"
      style={{ width: 320, height: 100 }}
      useCustomClick={true}
      onAdClicked={handleAdClicked}
    />
  )
}

Complete Example

TypeScript Example

import React, { useRef, useState } from 'react'
import {
  View,
  Text,
  Button,
  StyleSheet,
  Dimensions,
  ActivityIndicator,
} from 'react-native'
import { AdropBanner, type AdropBannerMetadata } from 'adrop-ads-react-native'

interface AdropBannerRef {
  load: () => void
}

const BannerExample = () => {
  const bannerRef = useRef<AdropBannerRef>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [metadata, setMetadata] = useState<AdropBannerMetadata | null>(null)

  const screenWidth = Dimensions.get('window').width

  const loadBanner = () => {
    setLoading(true)
    setError(null)
    bannerRef.current?.load()
  }

  const handleAdReceived = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('✅ Banner ad received successfully')
    console.log('Unit ID:', unitId)
    console.log('Metadata:', metadata)

    setLoading(false)
    setError(null)
    if (metadata) {
      setMetadata(metadata)
    }
  }

  const handleAdClicked = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('👆 Banner ad clicked')
    console.log('Unit ID:', unitId)
    console.log('Destination URL:', metadata?.destinationURL)
  }

  const handleAdImpression = (unitId: string, metadata?: AdropBannerMetadata) => {
    console.log('👁️ Banner ad impression')
    console.log('Unit ID:', unitId)
    console.log('Creative ID:', metadata?.creativeId)
  }

  const handleAdFailedToReceive = (unitId: string, errorCode?: string) => {
    console.log('❌ Banner ad failed to receive')
    console.log('Unit ID:', unitId)
    console.log('Error code:', errorCode)

    setLoading(false)
    setError(errorCode || 'Unknown error')
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Banner Ad Example</Text>

      <Button title="Load Banner Ad" onPress={loadBanner} />

      <View style={styles.bannerContainer}>
        {loading && (
          <ActivityIndicator
            style={styles.loader}
            size="small"
            color="#666"
          />
        )}

        <AdropBanner
          ref={bannerRef}
          unitId="YOUR_UNIT_ID"
          style={{ width: screenWidth, height: 80 }}
          autoLoad={false}
          onAdReceived={handleAdReceived}
          onAdClicked={handleAdClicked}
          onAdImpression={handleAdImpression}
          onAdFailedToReceive={handleAdFailedToReceive}
        />

        {error && (
          <View style={styles.errorContainer}>
            <Text style={styles.errorText}>Error: {error}</Text>
          </View>
        )}

        {metadata && (
          <View style={styles.metadataContainer}>
            <Text style={styles.metadataTitle}>Ad Metadata:</Text>
            <Text style={styles.metadataText}>
              Creative ID: {metadata.creativeId}
            </Text>
            <Text style={styles.metadataText}>
              Campaign ID: {metadata.campaignId}
            </Text>
            <Text style={styles.metadataText}>
              Transaction ID: {metadata.txId}
            </Text>
          </View>
        )}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginVertical: 50,
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  bannerContainer: {
    marginTop: 20,
    position: 'relative',
    width: '100%',
  },
  loader: {
    position: 'absolute',
    top: 40,
    left: '50%',
    transform: [{ translateX: -12 }],
    zIndex: 1,
  },
  errorContainer: {
    marginTop: 8,
    padding: 8,
    backgroundColor: '#ffebee',
    borderRadius: 4,
  },
  errorText: {
    color: '#c62828',
    textAlign: 'center',
  },
  metadataContainer: {
    marginTop: 12,
    padding: 12,
    backgroundColor: '#f5f5f5',
    borderRadius: 4,
  },
  metadataTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  metadataText: {
    fontSize: 12,
    color: '#666',
    marginTop: 2,
  },
})

export default BannerExample

JavaScript Example

import React, { useRef, useState } from 'react'
import {
  View,
  Text,
  Button,
  StyleSheet,
  Dimensions,
  ActivityIndicator,
} from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

const BannerExample = () => {
  const bannerRef = useRef(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  const screenWidth = Dimensions.get('window').width

  const loadBanner = () => {
    setLoading(true)
    setError(null)
    bannerRef.current?.load()
  }

  const handleAdReceived = (unitId, metadata) => {
    console.log('Banner ad received successfully', unitId, metadata)
    setLoading(false)
    setError(null)
  }

  const handleAdFailedToReceive = (unitId, errorCode) => {
    console.log('Banner ad failed to receive', unitId, errorCode)
    setLoading(false)
    setError(errorCode || 'Unknown error')
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Banner Ad Example</Text>

      <Button title="Load Banner Ad" onPress={loadBanner} />

      <View style={styles.bannerContainer}>
        {loading && <ActivityIndicator style={styles.loader} />}

        <AdropBanner
          ref={bannerRef}
          unitId="YOUR_UNIT_ID"
          style={{ width: screenWidth, height: 80 }}
          autoLoad={false}
          onAdReceived={handleAdReceived}
          onAdFailedToReceive={handleAdFailedToReceive}
        />

        {error && (
          <Text style={styles.errorText}>Error: {error}</Text>
        )}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginVertical: 50,
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  bannerContainer: {
    marginTop: 20,
    width: '100%',
  },
  loader: {
    marginVertical: 20,
  },
  errorText: {
    marginTop: 8,
    color: 'red',
    textAlign: 'center',
  },
})

export default BannerExample

Backfill Ads

To use backfill ads, you must have the backfill dependency added to your native platforms (Android/iOS).

When backfill ads are enabled, the SDK automatically falls back to backfill ads when no direct ad is available. You can handle backfill-specific error codes in the onAdFailedToReceive callback.

<AdropBanner
  unitId="YOUR_UNIT_ID"
  onAdReceived={(unitId, metadata) => {
    console.log('Ad loaded:', metadata?.creativeId)
  }}
  onAdFailedToReceive={(unitId, errorCode) => {
    switch (errorCode) {
      case AdropErrorCode.adNoFill:
        console.log('No direct ad available, requesting backfill...')
        break
      case AdropErrorCode.backfillNoFill:
        console.log('No backfill ad available either')
        break
      default:
        console.log('Ad load failed:', errorCode)
    }
  }}
/>

Preloading Backfill Ads (preload)

Starting with SDK 1.17.0, you can use AdropBanner.preload() to preload a backfill banner ad. When an <AdropBanner> loaded with the same unit ID and the same size gets no direct ad and falls back to a backfill ad, it displays the preloaded ad right away instead of requesting a backfill ad again. The banner still requests a direct ad first, regardless of preload. If a direct ad is displayed, the preloaded ad is kept as is. If you don’t call preload, the behavior is the same as before.

Requirements

You need adrop-ads-react-native 1.17.0 or later and, on the native platforms, the backfill dependency 1.17.0 or later. See Getting Started.
Preload fetches a backfill ad only when the server has told the app that there are no direct ads to show right now. Otherwise, it ends with AdropErrorCode.preloadSkipped without requesting a backfill ad. This is a normal result in apps that have direct ad campaigns.
Right after the app is installed, right after you change the App Key, and right after you switch to a different user with setUID, preload ends with AdropErrorCode.preloadSkipped until the server response arrives.
With test unit IDs, preload always ends with AdropErrorCode.preloadSkipped.

Usage

Call preload right before you open the screen that contains the banner. A preloaded ad is discarded after 30 minutes if it isn’t used, so call preload only for banners you’re about to display. You don’t need to wait for the result before loading the banner. If the ad is still being fetched, the banner waits for that result and uses it. AdropBanner.preload() resolves when preloading succeeds. Any other result (including AdropErrorCode.preloadSkipped) rejects with { code, message }. If you don’t handle it, even SKIPPED, which is a normal result, triggers an unhandled Promise rejection warning, so wrap the call in try/catch or attach .catch.

import { AdropBanner, AdropErrorCode } from 'adrop-ads-react-native'

// Call right before you open the screen that contains the banner.
const preloadFeedBanner = async () => {
  try {
    await AdropBanner.preload({
      unitId: 'YOUR_UNIT_ID',
      adSize: { width: 320, height: 50 }, // 320x50 if omitted
    })
    console.log('Preload complete')
  } catch (error: any) {
    if (error?.code === AdropErrorCode.preloadSkipped) {
      // This is a normal result. Call preload again right before you open the next screen.
      return
    }
    // Don't call preload again right away here.
    console.log('Not preloaded:', error?.code)
  }
}

If you don’t need the result, you can call it like this.

AdropBanner.preload({ unitId: 'YOUR_UNIT_ID', adSize: { width: 320, height: 50 } }).catch(() => {})

To use the preloaded ad, set numeric width and height values in the style of <AdropBanner> that match preload’s adSize.

<AdropBanner
  unitId="YOUR_UNIT_ID"
  style={{ width: 320, height: 50 }} // Size passed to preload
/>

When a Preloaded Ad Is Used

Same unit ID and same size: The numeric width and height in the style of <AdropBanner> must match preload’s adSize. For a banner that uses a non-numeric size such as width: '100%', the preloaded ad may not be used because the size doesn’t match. If the size differs, the preloaded ad is kept as is, and the banner requests a backfill ad as usual.
Used only once: A preloaded ad is gone once a single banner load uses it. To preload again, call preload again.
Lifetime and count: An ad that isn’t used within 30 minutes is discarded. Only 1 ad is kept per unit and size, and banners keep up to 5 different unit/size combinations. When there are more than 5, ads are discarded starting with the one received first.
Calling again: Calling preload again with the same unit and size doesn’t make a new request. If an ad has already been preloaded, the call resolves without a new request; if one is still being fetched, the call gets that load’s result (success or failure). You can’t use preload to refresh an ad. However, if the user consent status has changed in the meantime, the existing ad is discarded and a new one is fetched.
Consent status changes: If the user consent status changes after an ad is preloaded, that ad isn’t used to load a banner.
What resolve means: When preload() resolves, it means preloading has finished. A banner that was waiting for that result may have already used the ad.

Failure Codes

Error Code	Value	Description
`AdropErrorCode.preloadSkipped`	`ERROR_CODE_AD_PRELOAD_SKIPPED`	No backfill ad was requested because direct ads may be shown, or because that hasn’t been confirmed yet. This is a normal result, so call preload again right before you open the next screen.
`AdropErrorCode.adNoFill`	`ERROR_CODE_AD_NO_FILL`	The backfill dependency (1.17.0 or later) is missing, backfill isn’t configured for the unit, or the SDK hasn’t received that configuration yet. Call preload again a little later. If the backfill dependency is missing, preload keeps ending with this code. On iOS, preload also ends with this code when the device isn’t in the target countries.
`AdropErrorCode.backfillNoFill`	`ERROR_CODE_AD_BACKFILL_NO_FILL`	No backfill ad is available.
`AdropErrorCode.internal`	`ERROR_CODE_INTERNAL`	The request was interrupted (for example, on Android, the Activity finished while the ad was being fetched) or an internal error occurred. Call preload again later.
`AdropErrorCode.initialize`	`ERROR_CODE_INITIALIZE`	The SDK isn’t initialized. On Android, preload also ends with this code when the device isn’t in the target countries.
`AdropErrorCode.invalidUnit`	`ERROR_CODE_INVALID_UNIT`	The unit ID is empty.

Don’t call preload again right away inside catch. If the result doesn’t change — for example, when the backfill dependency is missing — the calls repeat endlessly. Call it again later, such as before you open the next screen.

Next Steps

Native Ads

Implement customizable native ads for your UI

Interstitial Ads

Implement full-screen interstitial ads

Popup Ads

Implement ads displayed in popup format

Reference

Reference types, methods, and error codes

​Overview

​Key Features

​AdropBanner Component

​Props

​Basic Usage

​Auto Load (Recommended)

​Manual Load Using Ref

​Callback Functions

​onAdReceived

​onAdClicked

​onAdImpression

​onAdFailedToReceive

​onAdVideoStart

​onAdVideoEnd

​AdropBannerMetadata

​Ad Sizes

​Common Banner Sizes

​Using Fixed Size

​Fitting to Screen Width

​Using Responsive Size

​Test Unit IDs

​Usage Example

​Error Handling

​Managing Error State

​Best Practices

​1. Screen Visibility

​2. Loading Indicator

​3. Managing Multiple Banners

​4. Custom Click Handling

​Complete Example

​TypeScript Example

​JavaScript Example

​Backfill Ads

​Preloading Backfill Ads (preload)

​Requirements

​Usage

​When a Preloaded Ad Is Used

​Failure Codes

​Next Steps

Native Ads

Interstitial Ads

Popup Ads

Reference

Overview

Key Features

AdropBanner Component

Props

Basic Usage

Auto Load (Recommended)

Manual Load Using Ref

Callback Functions

onAdReceived

onAdClicked

onAdImpression

onAdFailedToReceive

onAdVideoStart

onAdVideoEnd

AdropBannerMetadata

Ad Sizes

Common Banner Sizes

Using Fixed Size

Fitting to Screen Width

Using Responsive Size

Test Unit IDs

Usage Example

Error Handling

Managing Error State

Best Practices

1. Screen Visibility

2. Loading Indicator

3. Managing Multiple Banners

4. Custom Click Handling

Complete Example

TypeScript Example

JavaScript Example

Backfill Ads

Preloading Backfill Ads (preload)

Requirements

Usage

When a Preloaded Ad Is Used

Failure Codes

Next Steps