@thealteroffice/react-native-adgeist

Integrating Adgeist Mobile Ads SDK into an app is the first step toward displaying ads and earning revenue. Once you've integrated the SDK, you can choose an ad format (such as banner or display) and follow the steps to implement it.

Before you begin

To prepare your app, complete the steps in the following sections.

App prerequisites

Make sure that your app's build file uses the following values:

• Minimum SDK version of 23 or higher
• Compile SDK version of 35 or higher

Configure your app

STEP 1: Initiate the Installation Process for the SDK

Install the Adgeist SDK in your React Native project using npm or yarn. This step sets up the necessary package for ad integration.

npm install @thealteroffice/react-native-adgeist
# or
yarn add @thealteroffice/react-native-adgeist

STEP 2: Update Configuration for Android and iOS

Android Configuration

Add your Adgeist publisher ID as identified in the Adgeist web interface, to your app's AndroidManifest.xml file. To do so, add a <meta-data> tag with android:name="com.adgeistkit.ads.ADGEIST_APP_ID"

You can find your app ID in the Adgeist web interface. For android:value, insert your own Adgeist publisher ID, surrounded by quotation marks.

<manifest>
  <application>
    <!-- Sample Adgeist app ID: 69326f9fbb280f9241cabc94 -->

    <meta-data
        android:name="com.adgeistkit.ads.ADGEIST_APP_ID"
        android:value="YOUR_ADGEIST_APP_ID"/>
  </application>
</manifest>

Replace YOUR_ADGEIST_APP_ID with your Adgeist Publisher ID. The android:name attribute must stay as is.

iOS Configuration

CocoaPods

Before you continue, review Using CocoaPods for information on creating and using Podfiles.

To use CocoaPods, follow these steps:

In a terminal, run:

cd ios && pod install --repo-update

Update your Info.plist

Add your Adgeist publisher ID, as identified in the Adgeist web interface, to your app's Info.plist file. To do so, add an ADGEIST_APP_ID key with a string value of your Adgeist publisher ID.

<!-- Sample Adgeist app ID: 69326f9fbb280f9241cabc94 -->

<key>ADGEIST_APP_ID</key>
<string>YOUR_ADGEIST_APP_ID</string>

Replace YOUR_ADGEIST_APP_ID with your Adgeist Publisher ID. The ADGEIST_APP_ID key name must stay as is.

STEP 3: React Native Configuration and Ad Placement

Configure AdgeistProvider

Add an AdgeistProvider at the root level of your app.

import { AdgeistProvider } from '@thealteroffice/react-native-adgeist';

export default function App() {
  return (
    <AdgeistProvider isTestEnvironment={false}>
      {/* Your app content */}
    </AdgeistProvider>
  );
}

Implement Ad Placement

Use the HTML5AdView component to display banner ads anywhere in your app. Place this component where you want the ads to appear and the SDK will automatically load and render the ad content.

import { HTML5AdView, AdTypes } from '@thealteroffice/react-native-adgeist';

<HTML5AdView
  adUnitID="6932a4c022f6786424ce3b84"
  adSize={{ width: 320, height: 480 }}
  onAdLoaded={}
  onAdFailedToLoad={}
  onAdOpened={}
  onAdClosed={}
  onAdClicked={}
  adType={AdTypes.DISPLAY}
/>;

Ad Types:

• AdTypes.BANNER - Small rectangular banner ads
• AdTypes.DISPLAY - Standard display ads
• AdTypes.COMPANION - Companion ads (requires minimum 320x320 dimensions)

Support

If you run into any difficulties while integrating or using the Adgeist Mobile Ads SDK, reach out to [email protected] and we'll help you get it sorted out.