> ## Documentation Index
> Fetch the complete documentation index at: https://docs.contentignite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Banner Ads

> Setting up Banner ads

The SDK supports Banner Ads via the `CIBannerView` component. It accepts all standard React Native
[`ViewProps`](https://reactnative.dev/docs/view#props) (so you control the ad size through `style`)
plus the following parameters:

### Required

* `placementId: string`: Unique ID for this Ad Placement provided by Content Ignite.
* `pageUrl: string`: URL used for targeting, for example if the ad is displayed inline within an article or section of the app which has an equivalent URL on the web.
* `targeting: Record<string, string[]>`: Pass custom key-value pairs to ad requests.

### Optional

* `style`: Standard React Native style used to size the banner (e.g. `{ width: 300, height: 250 }`).
* `onBannerLoaded: () => void`: Called when the ad has loaded successfully.
* `onBannerLoadFailed: (event) => void`: Called when the ad fails to load. The reason is available on `event.nativeEvent.error`.
* `onBannerClicked: () => void`: Called when the user taps the ad.
* `onBannerImpression: () => void`: Called when an impression is recorded.

```tsx theme={null}
import { CIBannerView } from '@content-ignite/mobile-sdk-react-native';
import { View, StyleSheet } from 'react-native';

function BannerScreen({ isSDKInitialised }: { isSDKInitialised: boolean }) {
  if (!isSDKInitialised) {
    return <View style={styles.container} />;
  }

  return (
    <View style={styles.container}>
      <CIBannerView
        placementId="<PLACEMENT-ID>"
        pageUrl="https://example.com/home"
        targeting={{ segment: ['health', 'fitness'], region: ['ie'] }}
        onBannerLoaded={() => console.log('Banner loaded')}
        onBannerLoadFailed={(e) => console.warn('Banner failed:', e.nativeEvent.error)}
        onBannerClicked={() => console.log('Banner clicked')}
        onBannerImpression={() => console.log('Banner impression')}
        style={styles.banner}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  banner: {
    width: 300,
    height: 250,
  },
});
```

<Note>
  The banner is rendered natively, so make sure the SDK has been initialised
  (see the [Introduction](/app/react_native/react_native_intro)) before mounting `CIBannerView`.
</Note>

## Handling ad events

To listen and respond to events from a Banner ad, pass the `onBanner*` callbacks:

```tsx theme={null}
<CIBannerView
  placementId="<PLACEMENT-ID>"
  pageUrl="https://example.com/home"
  targeting={{ segment: ['health', 'fitness'] }}
  onBannerLoaded={() => console.log('Banner ad loaded.')}
  onBannerLoadFailed={(e) => console.warn('Banner ad failed to load:', e.nativeEvent.error)}
  onBannerClicked={() => console.log('Banner ad clicked.')}
  onBannerImpression={() => console.log('Banner ad impression.')}
  style={{ width: 300, height: 250 }}
/>
```

See the full example: [Banner sample app](https://gitlab.com/content-ignite/content-ignite-mobile-sdk-react-native/-/tree/main/examples/example).