Adster React Native SDK

adster-react-native-client is a powerful, easy-to-integrate advertising SDK for React Native applications. It supports a wide range of ad formats, including Banner Ads, Interstitial Ads, Native Ads, Rewarded Ads, and Unified Ads, providing you with a flexible solution to monetize your mobile app efficiently.

Installation

To install the package, run:

npm install adster-react-native-client

or using yarn:

yarn add adster-react-native-client

Features

• Banner Ads: Display small banner ads at the top or bottom of the screen.
• Interstitial Ads: Full-screen ads that appear at natural transition points in your app.
• Native Ads: Ads that match the look and feel of your app for a seamless user experience.
• Rewarded Ads: Reward users for engaging with full-screen ads, perfect for gaming apps.
• Unified Ads: Combine multiple ad formats in a single view.

Getting Started

📱 AdSter SDK Integration Guide

This guide provides a comprehensive step-by-step process for integrating the AdSter SDK into your Android application. Follow each section carefully for a successful implementation.

App Prerequisites

• Minimum SDK Version: 21 or higher
• Compile SDK Version: 33 or higher

Adding the Dependency

1. Open the build.gradle file for your app module (Module: app).

2. Find the dependencies block and add the following SDK dependency:

   dependencies {
       implementation 'com.adstertech:orchestrationsdk:2.1.4'
   }

1. Import and Initialize the SDK

First, import the SDK and initialize it in your app’s entry point (e.g., App.js):

import Adster from 'adster-react-native-client';

Adster.initializeSDK()
  .then(() => {
    console.log('SDK initialized successfully');
  })
  .catch((error) => {
    console.error('SDK initialization failed:', error);
  });

2. Example Usage

Here's how you can integrate various ad types using adster-react-native-client.

Ad Configuration and Usage

This SDK supports multiple ad types, and you can configure them using specific placement names. Below are methods and examples for configuring each ad type in your React Native application.

Supported Ad Types

1. Adster_Unified_Test: Can respond with either banner or native ads.
2. Adster_Native_Test: Responds with native ads only.
3. Adster_Banner_Test: Responds with banner ads only.
4. Adster_Appopen_Test: Responds with app open ads only.
5. Adster_Interstitial_Test: Responds with interstitial ads only.
6. Adster_FS_Native_Test: Responds with native ads only for full-screen opportunities (e.g., swipe actions).
7. Adster_FS_Unified_Test: Responds with native or banner-like ads (320x480) for full-screen opportunities (e.g., swipe actions).

Example Ad Configuration Methods

You can use these methods to set up and load different ad types based on the placement names.

1. Banner Ad (Adster_Banner_Test)

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { BannerAdView, BannerAdEvent } from 'adster-react-native-client';
import Toast from 'react-native-toast-message';

interface BannerAdProps {
  placementName: string;
  bannerContainerStyle?: any;
  onLoadingChange?: (loading: boolean) => void;
}

const BannerAdComponent: React.FC<BannerAdProps> = ({
  placementName,
  bannerContainerStyle,
  onLoadingChange,
}) => {
  const [loadBannerAdError, setLoadBannerAdError] = useState<boolean>(false);
  const [loadingBannerAd, setLoadingBannerAd] = useState<boolean>(true);
  const [toastMessages, setToastMessages] = useState<string[]>([]);

  const showToastMessage = (message: string) => {
    Toast.show({
      type: loadBannerAdError ? 'error' : 'success',
      text1: 'Ad Status',
      text2: message,
      position: 'bottom',
      visibilityTime: 3000,
    });
  };

  const handleAdLoadFailure = (event: BannerAdEvent) => {
    const error = event.nativeEvent.error;
    console.error('Ad failed to load:', error);
    showToastMessage('Banner Ad failed to load');
    setLoadBannerAdError(true);
    setToastMessages(prev => [
      ...prev,
      'Banner Ad failed to load: ' + error,
    ]);
    setLoadingBannerAd(false);
    onLoadingChange?.(false);
  };

  const handleAdLoaded = (event: BannerAdEvent) => {
    const message = event.nativeEvent.message;
    console.log('Ad loaded successfully:', message);
    showToastMessage('Banner Ad loaded successfully');
    setLoadBannerAdError(false);
    setToastMessages(prev => [...prev, message]);
    setLoadingBannerAd(false);
    onLoadingChange?.(false);
  };

  const handleAdClicked = (event: BannerAdEvent) => {
    const message = event.nativeEvent.message;
    console.log('Ad Clicked:', message);
    showToastMessage('Banner Ad clicked');
    setToastMessages(prev => [...prev, message]);
  };

  const handleAdImpression = (event: BannerAdEvent) => {
    const message = event.nativeEvent.message;
    console.log('Ad Impression:', message);
    showToastMessage('Banner Ad impression');
    setToastMessages(prev => [...prev, message]);
  };

  return (
    <View style={[styles.container, bannerContainerStyle]}>
      <BannerAdView
        placementName={placementName}
        style={styles.banner}
        onAdLoadFailure={handleAdLoadFailure}
        onAdLoaded={handleAdLoaded}
        onAdClicked={handleAdClicked}
        onAdImpression={handleAdImpression}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  banner: {
    width: '100%',
    height: 50, // Default height
  },
});

export default BannerAdComponent;

2. Native Ad (Adster_Native_Test)

The positioning and placements of Native Ads can also be modified by using a NativeAdContext and then making use of icon key in nativeObject for an ImageView

import { NativeAdView, NativeAdEvent } from 'adster-react-native-client';

const renderNativeAd = () => (
  <NativeAdView
    placementName="Adster_Native_Test"
    style={{ width: '100%', height: 300 }}
    onNativeAdLoaded={(event) =>
      console.log('Native Ad Loaded:', event.nativeEvent.message)
    }
    onAdFailedToLoad={(event) =>
      console.error('Native Ad Load Failed:', event.nativeEvent.error)
    }
    onAdClicked={(event) =>
      console.log('Native Ad Clicked:', event.nativeEvent.message)
    }
    onAdImpression={(event) =>
      console.log('Native Ad Impression:', event.nativeEvent.message)
    }
  />
);

3. Unified Ad (Adster_Unified_Test)

import { UnifiedAdView, UnifiedAdEvent } from 'adster-react-native-client';

const renderUnifiedAd = () => (
  <UnifiedAdView
    placementName="Adster_Unified_Test"
    style={{ width: '100%', height: 320 }}
    nativeContainerStyle={{ backgroundColor: '#E2F2FF', padding: 10 }}
    onBannerAdLoaded={(event) =>
      console.log('Unified Banner Ad Loaded:', event.nativeEvent.message)
    }
    onNativeAdLoaded={(event) =>
      console.log('Unified Native Ad Loaded:', event.nativeEvent.message)
    }
    onFailure={(event) =>
      console.error('Unified Ad Load Failed:', event.nativeEvent.error)
    }
    onAdClicked={(event) =>
      console.log('Unified Ad Clicked:', event.nativeEvent.message)
    }
    onAdImpression={(event) =>
      console.log('Unified Ad Impression:', event.nativeEvent.message)
    }
  />
);

4. App Open Ad (Adster_Appopen_Test)

To load and show an App Open Ad:

import Adster from 'adster-react-native-client';

const loadAndShowAppOpenAd = async () => {
  try {
    await Adster.loadAppOpenAd('Adster_Appopen_Test');
    console.log('App Open Ad Loaded');
    await Adster.showAppOpenAd();
  } catch (error) {
    console.error('App Open Ad failed:', error);
  }
};

5. Interstitial Ad (Adster_Interstitial_Test)

import Adster, {
  EAdEvent,
  EInterstitialAdEventType,
} from 'adster-react-native-client';
import { DeviceEventEmitter } from 'react-native';

const loadInterstitialAd = async () => {
  try {
    await Adster.loadInterstitialAd('Adster_Interstitial_Test');
    console.log('Interstitial Ad Loaded');
  } catch (error) {
    console.error('Interstitial Ad Load Failed:', error);
  }
};

DeviceEventEmitter.addListener(EAdEvent.InterstitialAdEvent, (event) => {
  const { event: eventType, message } = event;
  switch (eventType) {
    case EInterstitialAdEventType.onAdClicked:
      console.log('Interstitial Ad Clicked:', message);
      break;
    case EInterstitialAdEventType.onAdClosed:
      console.log('Interstitial Ad Closed:', message);
      break;
    // Other cases as needed...
  }
});

6. Full-Screen Native Ad (Adster_FS_Native_Test)

import { NativeAdView, NativeAdEvent } from 'adster-react-native-client';

const renderFullScreenNativeAd = () => (
  <NativeAdView
    placementName="Adster_FS_Native_Test"
    style={{ width: '100%', height: '100%' }}
    onNativeAdLoaded={(event) =>
      console.log('Full-Screen Native Ad Loaded:', event.nativeEvent.message)
    }
    onAdFailedToLoad={(event) =>
      console.error(
        'Full-Screen Native Ad Load Failed:',
        event.nativeEvent.error
      )
    }
    onAdClicked={(event) =>
      console.log('Full-Screen Native Ad Clicked:', event.nativeEvent.message)
    }
    onAdImpression={(event) =>
      console.log(
        'Full-Screen Native Ad Impression:',
        event.nativeEvent.message
      )
    }
  />
);

7. Full-Screen Unified Ad (Adster_FS_Unified_Test)

import { UnifiedAdView } from 'adster-react-native-client';

const renderFullScreenUnifiedAd = () => (
  <UnifiedAdView
    placementName="Adster_FS_Unified_Test"
    style={{ width: 320, height: 480 }}
    nativeContainerStyle={{ backgroundColor: '#E2F2FF', padding: 10 }}
    onBannerAdLoaded={(event) =>
      console.log(
        'Full-Screen Unified Banner Ad Loaded:',
        event.nativeEvent.message
      )
    }
    onNativeAdLoaded={(event) =>
      console.log(
        'Full-Screen Unified Native Ad Loaded:',
        event.nativeEvent.message
      )
    }
    onFailure={(event) =>
      console.error(
        'Full-Screen Unified Ad Load Failed:',
        event.nativeEvent.error
      )
    }
    onAdClicked={(event) =>
      console.log('Full-Screen Unified Ad Clicked:', event.nativeEvent.message)
    }
    onAdImpression={(event) =>
      console.log(
        'Full-Screen Unified Ad Impression:',
        event.nativeEvent.message
      )
    }
  />
);

Add project specific ProGuard rules here in android/app by creating a proguard-rules.pro file.

-keep,allowobfuscation,allowshrinking class kotlin.coroutines.*_ { _; }

-keep,allowobfuscation,allowshrinking interface retrofit2.*_ { _; }

-keep,allowobfuscation,allowshrinking class retrofit2.*_ { _; }

Notes:

• We will replace testPlacementNames with the appropriate placement names during integration.
• Ensure that the SDK is properly initialized before calling these methods, as shown in the earlier examples.
• You can handle different ad events like loading, click, impression, and failures using event handlers provided by adster-react-native-client.

Handling Ad Events

Each ad type provides various event handlers to manage lifecycle events, such as loading, click, impression, and errors. Ensure to set up appropriate handlers for a smooth user experience and to track ad performance.

Testing and Debugging

Use the provided testPlacementNames during development to verify ad behavior without serving real ads. We will replace testPlacementNames with the appropriate placement names during integration

Troubleshooting

If you encounter issues:

1. Ensure your SDK initialization is successful before trying to load ads.
2. Check your console for any error messages related to ad loading or displaying.
3. Verify your ad placement names are correctly configured.

This README gives an overview of how to use the adster-react-native-client, including installation, setup, usage examples for various ad types, and troubleshooting tips.