React Native Document for Gravite

Yieldlove SDK for React Native (2.4.2)

If you wish to enable Gravite, please contact the Stroeer team for assistance.

Note: This feature is only available in version 2.4.2.

Change log

[2.4.2] (12.September.2024)

Fixed the issue causing the initial advertisement loading to fail.

[2.4.1] (6.September.2024)

Added privacy manifest file for IOS (If you don't want to update library check the appendix part)

[2.4.0] (4.September.2024)

Added Gravite.
Java version is updated (17)

Installation

Using `npm`

$ npm install react-native-yieldlove@2.4.2 --save

Using `yarn`

$ yarn add react-native-yieldlove@2.4.2

Configuring

Prerequisites

Ensure your project is using react-native >= 0.73.0.

iOS

The package is automatically linked when building the app. All you need to do is:

$ cd ios && pod install

If you don't want use Cocoapods, you can always link the library manually.

Android

Add our ad-integration SDK into your app's build.gradle file:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://android-sdk.aatkit.com/maven' }
        maven { url "https://s3.amazonaws.com/smaato-sdk-releases" } // Smaato repository
        maven { url 'https://packagecloud.io/smartadserver/android/maven2' } // SmartAdServer repository
        maven { url 'https://verve.jfrog.io/artifactory/verve-gradle-release' } // PubNative repository
        maven { url 'https://android-sdk.is.com' } // ironSource repository
        maven { url 'https://maven.ogury.co' } // Ogury repository
        maven { url 'https://android-sdk-rtb.gravite.net/maven' } // GraviteRTB repository
        maven { url "https://dl-maven-android.mintegral.com/repository/mbridge_android_sdk_oversea" } // Mintegral repository
        maven { url 'https://slabs-yieldlove-ad-integration.s3.eu-central-1.amazonaws.com/android' }
    }
}

Usage

Contact to your account manager to obtain your application name (APPLICATION_NAME) and call strings (INTERSTITIAL_CALL_STRING and BANNER_CALL_STRING). Each call string represents a single slot.

!!!Note!!!
The method "setCustomTargeting" parameters are updated for multiple values.

With Gravite

import React, { Component } from 'react';
import { AppState, StyleSheet, View, Button, Text } from 'react-native';
import {
  Yieldlove,
  YieldloveBannerAd,
  BackFillSettingEnum,
} from 'react-native-yieldlove';

const APPLICATION_NAME = 'appDfpTest';
const CALL_STRING_BANNER = 'banner';
const CALL_STRING_INTERSTITIAL = 'interstitial';

// Yieldlove.setApplicationName(APPLICATION_NAME);
Yieldlove.setup(APPLICATION_NAME, BackFillSettingEnum.enabled);
Yieldlove.setDebug(true);
// Yieldlove.setForceToRunBackFill(true);
// global targeting
Yieldlove.setCustomTargeting({ fruit: ['apple', 'orange'], colour: ['pink'] });
Yieldlove.setContentUrl('https://www.example.com/content/global.html');

export default class App extends Component {
  state = {
    appState: AppState.currentState,
    // banner size
    width: undefined,
    height: undefined,
    // helper variable used for reloading banner
    isLoading: false,
  };

  componentDidMount() {
    // This is because of activity status was not updated.
    // Force to update Activity.
    Yieldlove.onPause();
    Yieldlove.onResume();
  }

  presentInterstitial = () => {
    return Yieldlove.loadInterstitial({
      callString: CALL_STRING_INTERSTITIAL,
      options: {
        contentUrl: 'https://www.example.com/content/interstitial.html',
        customTargeting: {
          fruit: 'banana',
          day: 'saturday',
        },
      },
      onAdLoaded: () => {
        console.log('interstitial onAdLoaded');
        this.showInterstitial();
      },
      onAdFailedToLoad: (event) => {
        console.log('interstitial onAdFailedToLoad', event);
        this.setState((prevState) => ({
          ...prevState,
          isInterstitialReady: false,
        }));
      },
    });
  };

  showInterstitial = () => {
    Yieldlove.showInterstitial().then(
      () => {
        console.log('showInterstitial success');
      },
      (err) => {
        console.log('showInterstitial failure', err);
      }
    );
  };
  reloadBannerAd = () => {
    this.setState({ isLoading: true });
    setTimeout(() => this.setState({ isLoading: false }), 0);
  };

  clearConfigCache = () => {
    Yieldlove.clearConfigurationCache();
  };
  renderBanner(callString: string) {
    const loadedBannerStyle = !!this.state.width &&
      !!this.state.height && {
        width: this.state.width,
        height: this.state.height,
      };
    return (
      <YieldloveBannerAd
        // @ts-ignore
        style={[styles.banner, loadedBannerStyle]}
        callString={callString}
        options={{
          customTargeting: {
            fruit: 'orange',
            day: 'monday',
          },
          contentUrl: 'https://www.example.com/content/banner.html',
        }}
        onAdLoaded={({ nativeEvent }) => {
          console.log('banner onAdLoaded', nativeEvent);
          const { width, height } = nativeEvent;
          this.setState({ width, height });
        }}
        onAdFailedToLoad={({ nativeEvent }) => {
          console.log(
            `banner onAdFailedToLoad. code: ${nativeEvent.code}, message: ${nativeEvent.message}`
          );
        }}
        onAdOpened={() => {
          console.log('banner onAdOpened');
        }}
        onAdClosed={() => {
          console.log('banner onAdClosed');
        }}
        onAdClicked={() => {
          console.log('banner onAdClicked');
        }}
        onAdImpression={() => {
          console.log('banner onAdImpression');
        }}
      />
    );
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>My text here!</Text>
        <View style={styles.separator} />
        {!this.state.isLoading && this.renderBanner(CALL_STRING_BANNER)}
        <Button
          title={'Load & show interstitial'.toUpperCase()}
          onPress={this.presentInterstitial}
        />
        <View style={styles.separator} />
        <Button
          title={'Reload banner ad'.toUpperCase()}
          onPress={this.reloadBannerAd}
        />
        <View style={styles.separator} />
        <Button
          title={'Clear config cache'.toUpperCase()}
          onPress={this.clearConfigCache}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  banner: {
    alignSelf: 'center',
    width: '100%',
    height: 100,
    marginBottom: 10,
  },
  separator: {
    height: 10,
  },
});

API

`YieldloveBannerAd`

Prop	Mandatory	Description

Prop	Mandatory	Description
`callString`	`true`	Valid call string.
`options`	`false`	See `AdOptions` API below
`onAdLoaded`	`false`	Event handler function for `"onAdLoaded"` event. `nativeEvent` contains `width: number` and `height: number` of the loaded ad.
`onAdFailedToLoad`	`false`	Event handler function for `"onAdFailedToLoad"` event.
`onAdOpened`	`false`	Event handler function for `"onAdOpened"` event. Not supported on iOS.
`onAdClosed`	`false`	Event handler function for `"onAdClosed"` event. Not supported on iOS.
`onAdClicked`	`false`	Callback function for `"onAdClicked"` event.
`onAdImpression`	`false`	Callback function for `"onAdImpression"` event.
`style`	`false`	Style attributes for the view, as expected in a standard `View`.

`Yieldlove`

`setup(applicationName: String, userBackFillSetting: String)=> void`

Set this at the start of your app to initialize Yieldlove SDK.
userBackFillSetting can be.

BackFillSettingEnum.serverSetting: Use the setting provided by the server. (Note: This is not yet configured.)
BackFillSettingEnum.none: Override the server setting and disable backfill (Gravite).
BackFillSettingEnum.enabled: Override the server setting and force-enable backfill(Gravite). Use this option if you want to activate Gravite.

`setDebug: (isDebugModeEnabled: boolean) => void`

Enable debug logs from native libraries.

`setForceToRunBackFill(isEnabled: boolean)=> void`

Force Gravite Execution
Gravite is designed to provide creatives when the original bidding request (from Prebid or Google) fails.
This method forces the execution of Gravite by bypassing the original bidding request, ensuring that Gravite ads are served regardless of the bidding outcome.
Important: This method is intended solely for testing purposes. It should not be used in a production environment.

`setCustomTargeting: (customTargeting: { [key: string]: string[] }) => void`

Set global (default) custom targeting.

`setContentUrl: (contentUrl: string) => void`

Set global (default) content URL for targeting purposes.

`clearConfigurationCache: () => void`

For each application name, extended configuration is downloaded and cached on the user's device for a period of time.
This function clears the cache. As a result, the next call to setApplicationName will always download a new copy of the configuration.

`loadInterstitial: (options: LoadInterstitialParams, ) => void`

Load interstitial ad. Available options:

Prop	Mandatory	Description

Prop	Mandatory	Description
`callString`	`true`	Valid call string.
`options`	`false`	See `AdOptions` below
`onAdLoaded`	`false`	Callback function for `"onAdLoaded"` event.
`onAdFailedToLoad`	`false`	Callback function for `"onAdFailedToLoad"` event. Expects single argument object which contains `code: string` and `message: string` describing the error.

`showInterstitial: () => Promise<void>`

Present loaded interstitial ad. Can reject with an error if the ad could not be presented (e.g. when trying to call showInterstitial before ad was actually loaded).

`AdOptions`

Prop	Mandatory	Type	Description

Prop	Mandatory	Type	Description
`contentUrl`	`false`	`string`	Content URL for targeting purposes. Will override the global content URL.
`customTargeting`	`false`	`{ [key: string]: string }`	An object containing key-value pairs used for custom targeting. Will merge with global custom targeting. A key redefined here take precedence over the globally defined one.

Error Events

The nativeEvent for the onAdFailedToLoad event handler contains code: number and message: string describing the error. Any error means no ad was delivered and rendered.

See ErrorCode enum to see the current list of supported codes. More may be added in future releases.

`ErrorEvent`

The nativeEvent implements the following interface:

Name	Type	Description

Name	Type	Description
`code`	`ErrorCode` (number)	Platform independent code that classifies the error
`message`	`string`	Message describing the error

`ErrorCode` enum

Name	Value (number)	Description

Name	Value (number)	Description
`UNKNOWN`	1	The error is unknown or unclassified
`AD_SERVER_INTERNAL_REQUEST`	2	Something happened internally; for instance, an invalid response was received from the ad server.
`AD_SERVER_INVALID_REQUEST`	3	The ad request was invalid; for instance, the ad unit ID was incorrect.
`AD_SERVER_NETWORK_ERROR`	4	The ad request was unsuccessful due to network connectivity.
`AD_SERVER_NO_FILL`	5	The ad request was successful, but no ad was returned due to lack of ad inventory.

Testing ads

Please contact your account manager to get your test configuration.

Troubleshooting

My application crashes on start

The Google Mobile Ads SDK may be initialized without an application ID.

Ad Manager

iOS: Update your Info.plist.
Android: Get Started

AdMob

iOS: Update your Info.plist.
Android: Get Started

Appendix: Privacy Manifest for IOS

You may need the privacy manifest for ios. (https://developer.apple.com/documentation/bundleresources/privacy_manifest_files)

@@ -0,0 +1,67 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "<http://www.apple.com/DTDs/PropertyList-1.0.dtd>">
<plist version="1.0">
<dict>
    <key>NSPrivacyCollectedDataTypes</key>
    <array>
        <dict>
            <key>NSPrivacyCollectedDataType</key>
            <string>NSPrivacyCollectedDataTypeDeviceID</string>
            <key>NSPrivacyCollectedDataTypeLinked</key>
            <true/>
            <key>NSPrivacyCollectedDataTypeTracking</key>
            <true/>
            <key>NSPrivacyCollectedDataTypePurposes</key>
            <array>
                <string>NSPrivacyCollectedDataTypePurposeThirdPartyAdvertising</string>
                <string>NSPrivacyCollectedDataTypePurposeDeveloperAdvertising</string>
            </array>
        </dict>
        <dict>
            <key>NSPrivacyCollectedDataType</key>
            <string>NSPrivacyCollectedDataTypeProductInteraction</string>
            <key>NSPrivacyCollectedDataTypeLinked</key>
            <true/>
            <key>NSPrivacyCollectedDataTypeTracking</key>
            <true/>
            <key>NSPrivacyCollectedDataTypePurposes</key>
            <array>
                <string>NSPrivacyCollectedDataTypePurposeThirdPartyAdvertising</string>
                <string>NSPrivacyCollectedDataTypePurposeDeveloperAdvertising</string>
            </array>
        </dict>
        <dict>
            <key>NSPrivacyCollectedDataType</key>
            <string>NSPrivacyCollectedDataTypeAdvertisingData</string>
            <key>NSPrivacyCollectedDataTypeLinked</key>
            <true/>
            <key>NSPrivacyCollectedDataTypeTracking</key>
            <true/>
            <key>NSPrivacyCollectedDataTypePurposes</key>
            <array>
                <string>NSPrivacyCollectedDataTypePurposeThirdPartyAdvertising</string>
                <string>NSPrivacyCollectedDataTypePurposeDeveloperAdvertising</string>
            </array>
        </dict>
    </array>
    <key>NSPrivacyAccessedAPITypes</key>
    <array>
        <dict>
            <key>NSPrivacyAccessedAPIType</key>
            <string>NSPrivacyAccessedAPICategoryUserDefaults</string>
            <key>NSPrivacyAccessedAPITypeReasons</key>
            <array>
                <string>CA92.1</string>
            </array>
        </dict>
    </array>
    <key>NSPrivacyTrackingDomains</key>
    <array>
        <string>www.stroeer.de</string>
        <string>mhb.adscale.de</string>
        <string>ih.adscale.de</string>
    </array>
    <key>NSPrivacyTracking</key>
    <true/>
</dict>
</plist>

React Native Document for Gravite

Change log

[2.4.2] (12.September.2024)

[2.4.1] (6.September.2024)

[2.4.0] (4.September.2024)

Installation

Using npm

Using yarn

Configuring

Prerequisites

iOS

Android

Usage

With Gravite

API

YieldloveBannerAd

Yieldlove

setup(applicationName: String, userBackFillSetting: String)=> void

setDebug: (isDebugModeEnabled: boolean) => void

setForceToRunBackFill(isEnabled: boolean)=> void

setCustomTargeting: (customTargeting: { [key: string]: string[] }) => void

setContentUrl: (contentUrl: string) => void

clearConfigurationCache: () => void

loadInterstitial: (options: LoadInterstitialParams, ) => void

showInterstitial: () => Promise<void>

AdOptions