Skip to main content

​
Installation

Install using the npm package manager: 
npm install @content-ignite/mobile-sdk-react-native

​
Android Prerequisites

​
Targeting

  • Minimum SDK version of 24 or higher
  • Compile SDK version of 36 or higher

​
iOS Prerequisites

​
Targeting

  • Use Xcode 16.0 or higher.
  • Target iOS 17.2 or higher.

​
Updating your Info.plist

  1. Before installing, update the application Info.plist to A GADApplicationIdentifier key with a string value of your Ad Manager app ID found in the Ad Manager UI and of the form ca-app-pub-################~##########. If you do not have this ID, please contact the Content Ignite team.
  2. Next add a SKAdNetworkItems key to your Info.plist with SKAdNetworkIdentifier values for Google (cstr6suwn9.skadnetwork) and select third-party buyers who have provided these values to Google.

​
Initialisation

import ContentIgniteSDK, { CIBannerView } from '@content-ignite/mobile-sdk-react-native';

export default function App() {
  const [isSDKInitialised, setIsSDKInitialized] = useState(false);

  useEffect(() => {
    initializeSDK();
  }, []);

  const initializeSDK = async () => {
    try {
      await ContentIgniteSDK.initialise({
        publisherId: '<PUBLISHER-ID>',
        googleId: "ca-app-pub-3940256099942544~3347511713",
        debugFeature: true,
      }).then(() => {
        console.log('SDK initialized');
      setIsSDKInitialized(true);
      });
    } catch (error) {
      console.error('Failed to initialize SDK:', error);
      setIsSDKInitialized(false);
    }
  }
  ...

​
Setting up a Banner Ad Placement

...
if (!isSDKInitialised) {
    return <View style = { styles.container} />
  } else {
    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
  }
});

​
Using the Debug features

The SDK gives developers the option of enabling the debugging features when running the application by setting the debugFeature property of ContentIgniteConfig to true as seen in the Initialising the SDK section. Debug Gesture When enabled and the user performs the gesture. This will open a debug menu, which gives the following options:

​
Clear ads configs cache

When updating configs in the Fusion platform, these are stored by the SDK and refreshed periodically. Pressing this button will force the SDK to download the new configs from the server.

​
Clear floors cache

When updating floors data within fusion, this data is stored by the SDK and refreshed periodically. Pressing this button will force the SDK to download the new floors data from the server.

​
Start a new debug session

Opens a dialog where the user is required to enter a PIN which is provided within the Fusion dashboard. When this PIN is entered correctly, the SDK will start sending detailed logs for a fixed period of time to the Content Ignite team to allow them to diagnose issues more effectively.

​
Enabling / Disabling Test ads

During development to prevent invalid traffic in Google Ad Manager, we recommend you enable test ads. This guarantees an ad will always be served, either from GAM or Prebid depending on your setup, helping for use during demos.