React Native Integraiton document

React Native Integraiton document

deYieldlove SDK for React Native

Starting from Version 3, all libraries will share the same version number to prevent mismatches and reduce confusion.

Additionally, the SDK configuration has been updated. Please verify that all configurations are correctly set in your project.

Ensure you are using the correct version for all dependencies.

Release Note (v3.1.1)

  • Fixed the issue that the landscape mode may break the ad layout on iOS.

  • react-native version is updated to 0.76.4

Installation

Using npm

$ npm install react-native-yieldlove --save

Using yarn

$ yarn add react-native-yieldlove

 

Set-Up

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 { maven { url 'https://slabs-yieldlove-ad-integration.s3.eu-central-1.amazonaws.com/android' content { includeGroup("com.yieldlove.adIntegration") } } } }

iOS

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

$ cd ios && pod install

 

Gravite Set-Up (Optional)

Please reach out to your Ströer Publisher Account Manager to enable the Gravite plugin.

The Stroeer SDK only references the Gravite Core Library. To use the ad networks provided by Gravite, you must include the ad networks for Gravite Library. For more details, refer to the Gravite setup page.

You can upgrade the Gravite SDK version to utilize additional features. The officially supported version is 3.12.5 for Android and 3.12.0 for iOS

Android https://aatkit.gitbook.io/android-integration/start/setup/maven

  • Repository settings

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

dependencies { implementation ('com.yieldlove.adIntegration:gravite:7.1.0') implementation ('com.intentsoftware.addapptr:AATKit:3.12.5') { transitive = true } }

iOS https://aatkit.gitbook.io/ios-integration/start/setup/cocoapods

pod 'YieldloveAdIntegration/Gravite', '10.1.0' pod 'AATKit', '3.12.0'

 

 

Confiant Set-Up (Optional)

Please contact your Ströer Publisher Account Manager to enable the Confiant plugin.

Android

  • Repository settings

repositories { maven{ url 'https://cdn.confiant-integrations.net/backend-integrations/in-app/releases/android/maven' content { includeGroup("com.confiant.android") } maven { url 'https://slabs-yieldlove-ad-integration.s3.eu-central-1.amazonaws.com/android' content { includeGroup("com.yieldlove.adIntegration") } } // Yieldlove } }
  • Dependency setting

dependencies { implementation 'com.confiant.android:sdk:6.1.1-2' implementation 'com.yieldlove.adIntegration:confiant:7.1.0' }

iOS

  • CocoaPod

# This should be decleared before "Target" source 'https://cdn.cocoapods.org/' source 'https://cdn.confiant-integrations.net/backend-integrations/in-app/releases/ios/podspecs.git' # This should be decleared in "Target" pod 'ConfiantSDK', '6.1.0' pod 'YieldloveAdIntegration', :podspec => 'https://slabs-yieldlove-ad-integration.s3.eu-central-1.amazonaws.com/ios/YieldloveAdIntegration-10.1.1.podspec', subspecs: ['Confiant']
  • CocoaPod for Gravite & Confiant
    If you want to use both Confiant and Gravite, use the following settings. (Android doesn’t require the different settings)

# This should be decleared before "Target" source 'https://cdn.cocoapods.org/' source 'https://cdn.confiant-integrations.net/backend-integrations/in-app/releases/ios/podspecs.git' # This should be decleared in "Target" pod 'AATKit', '3.12.0' pod 'ConfiantSDK', '6.1.0' pod 'YieldloveAdIntegration', :podspec => 'https://slabs-yieldlove-ad-integration.s3.eu-central-1.amazonaws.com/ios/YieldloveAdIntegration-10.1.1.podspec', subspecs: ['Confiant', 'Gravite']

Example Code

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.

import { Yieldlove, YieldloveBannerAd } from 'react-native-yieldlove'; // before using any other method from Yieldlove and/or rendering YieldloveBannerAd you have to set the application name Yieldlove.setApplicationName(APPLICATION_NAME); // optional global custom targeting Yieldlove.setCustomTargeting({fruit: 'apple', colour: 'pink'}); // optional global content url Yieldlove.setContentUrl("<https://www.example.com/content/global.html>") // loading & showing interstitial ad Yieldlove.loadInterstitial({ callString: INTERSTITIAL_CALL_STRING, options: { contentUrl: '<https://www.example.com/content/interstitial.html',> customTargeting: { fruit: 'banana', day: 'saturday' } }, onAdLoaded: (event) => { console.log('interstitial onAdLoaded', event); Yieldlove.showInterstitial().catch(error => console.log(error)); }, onAdFailedToLoad: (event) => { console.log('interstitial onAdFailedToLoad', event); } }); // rendering banner ad // ... <YieldloveBannerAd callString={BANNER_CALL_STRING} options={{ customTargeting: { fruit: 'orange', day: 'monday' }, contentUrl: '<https://www.example.com/content/banner.html'> }} onAdLoaded={({ nativeEvent }) => { const {width, height, source, version, placement} = nativeEvent; console.log(`banner width: ${width}, height: ${height}, source: ${source}, version: ${version}, placement: ${placement}`); this.setState({ width, height }); }} />

 

Example Code for Gravite (Optional)

import { Yieldlove, YieldloveBannerAd } from 'react-native-yieldlove'; import { Gravite } from 'react-native-yieldlove'; // For Gravite // before using any other method from Yieldlove and/or rendering YieldloveBannerAd you have to set the application name Yieldlove.setApplicationName(APPLICATION_NAME); // optional global custom targeting Yieldlove.setCustomTargeting({fruit: 'apple', colour: 'pink'}); // optional global content url Yieldlove.setContentUrl("<https://www.example.com/content/global.html>") // Initializing Gravite Gravite.enableDebugMode(); // Gravite.enableTestMode("", 0, true); Gravite.setCacheSize(2); const stroeerToGravite = { "b1": "gb1", "b2": "gb2" }; Gravite.setPlacementMapTable(stroeerToGravite); Gravite.initialize((isInitialized: boolean) => { console.log('Gravite Initialized', isInitialized ? 'Success' : 'Failure'); }); // The same as the loading code.

To ensure proper functionality, please preload an interstitial ad before use—ideally when the application starts. Since GraviteSDK requires 3 to 10 seconds to load an interstitial, StroeerSDK cannot effectively manage interstitial results from Gravite in real time. If not preloaded, the SDK will return a 'No Interstitial' error, and the initial interstitial will fail to display.

EnableDebugMode Method. The Debug Mode provides detailed logs to assist with troubleshooting and debugging

Debug Mode must not be enabled in production environments. This mode is intended only for testing and development.

EnableTestMode Method

public void enableTestMode(String bundleId, Integer accountId, boolean forceToExecute)

Parameters:

  • bundleId
    Gravite identifies your app using its bundle ID. If you need to use a different bundle ID for publishing, testing, or other purposes, you can override the default bundle ID by specifying an "alternative bundle ID" here.

    • To use the app’s default bundle ID, pass “"empty string.

  • accountId
    AATKit’s test mode allows ad testing even before your app is fully set up with Gravite. Use your accountId to activate test mode.

    • If not needed, pass 0.

  • forceToExecute
    If set to true, the SDK will bypass normal ad rendering and always call Gravite Ads. This ensures that your application integrates properly with Gravite.

Test Mode must not be enabled in production environments. This modes is intended only for testing and development.

Gravite includes a preloading feature to ensure seamless display of banner and interstitial ads. By default, the cache size is set to 1. However, if Gravite is accessed frequently, the cache may empty too quickly, causing delays or empty ads while new ads load. To mitigate this, consider increasing the cache size

StroeerSDK provides to call Gravite directly bypassing the Stroeer Ad request. Please contact the Stroeer administrator to discuss this feature.
To enable Gravite Direct Call, use the the code

StroeerSDK features a placement mapping capability that automatically translates Stroeer placement names to their corresponding Gravite placements. This eliminates the need to create identical placement names for each provider, streamlining the integration process.
Create a mapping table and send it via setPlacementMapTable.

const stroeerToGravite = { "b1": "gb1", "b2": "gb2" }; Gravite.setPlacementMapTable(stroeerToGravite);

This configuration ensures that when Gravite processes placements:

  • Stroeer placement b1 will be mapped to Gravite placement gb1.

  • Stroeer placement b2 will be mapped to Gravite placement gb2.

The Gravite.initialize function is responsible for initializing the Gravite SDK. This setup process ensures that the necessary configurations and resources are properly loaded before the application starts displaying ads.

isInitialized indicates whether the Gravite SDK was initialized successfully (true) or failed (false).

 

Transferring Resume / Pause events.

Gravite requires page resume and pause events for efficient resource management. Call Gravite.onResume(); and Gravite.onPause(); whenever the page state changes.

These methods must be invoked on every page; otherwise, ads may not render properly. Refer to the following code for implementation.

class App extends Component { constructor(props) { super(props); this.state = { appState: AppState.currentState }; } componentDidMount() { this.appStateListener = AppState.addEventListener('change', this.handleAppStateChange); } componentWillUnmount() { this.appStateListener.remove(); // Cleanup event listener } handleAppStateChange = (nextAppState) => { if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') { Gravite.onResume(); } else if (nextAppState === 'background') { Gravite.onPause(); } this.setState({ appState: nextAppState }); }; render() { return ( <View> <Text>Current App State: {this.state.appState}</Text> </View> ); } }

Example Code for Confiant (Optional)

import { Yieldlove, YieldloveBannerAd } from 'react-native-yieldlove'; import { Confiant } from 'react-native-yieldlove'; // For Gravite // before using any other method from Yieldlove and/or rendering YieldloveBannerAd you have to set the application name Yieldlove.setApplicationName(APPLICATION_NAME); // optional global custom targeting Yieldlove.setCustomTargeting({fruit: 'apple', colour: 'pink'}); // optional global content url Yieldlove.setContentUrl("<https://www.example.com/content/global.html>") // Initializing Confiant // Confiant.enableTestMode(); Confiant.initialize( '', true, (isInitialized: boolean) => { console.log('Confiant Initialized', isInitialized ? 'Success' : 'Failure'); } ); // The same as the loading code.

This is to test if Confiant works. If this method is called, all the ads will be blocked.

Test Mode must not be enabled in production environments. This modes is intended only for testing and development.

Parameters:

  • confiantPropertyID: To obtain the confiantPropertyID, please contact your Ströer Publisher Account Manager.

  • enableReload: This setting determines whether Confiant should reload advertisements when they are blocked.

    • If set to true, Confiant will attempt to reload the advertisement up to two times.

    • If set to false, the invalid advertisement will simply be blocked without a reload attempt.


isInitialized indicates whether the Confiant SDK was initialized successfully (true) or failed (false).

 

Enable ID5

Starting from Version 3, the SDK supports ID5. This feature is disabled by default. To enable it, please contact your Ströer account manager.

You don’t need to make any code changes to use ID5. However, for improved identification, you can provide additional user information to ID5. Please refer to the ID5 website for details.

This information can be added at any time. StroeerSDK automatically checks the provided variables and updates the ID from ID5. However, for optimal identification, we recommend setting this information before SDK initialization, if possible.

To use ID5, the user must provide consent as required by the publisher. Additionally, if the user opts out of ID5 in their privacy settings, the SDK will not use ID5.

Identity.setEmail('test@test.com'); //User Email Identity.setPhone('12345656'); //User Phonenumber Identity.setPuid('115352342'); //Publisher User ID Identity.setRegionCode('CA'); //Region Code Identity.setCityCode('MTL'); //City Code Identity.apply(); //Call to apply the updates

Custom Information

  • CustomInfo is optional, and you are not required to provide all the information.

  • For RegionalCode, use the ISO-3166-2 standard. If the location is in the USA, specify the 2-letter state code(reference).

  • For CityCode, use the United Nations Code for Trade & Transport Locations (UN/LOCODE) format (reference).

 

Troubleshooting

Error: Multiple dependencies with different sources with CocoaPod

This is because you may want to use Gravite and Confiant together and use both settings in the Podfile.
Use the following settings in the Podfilehttps://stroeerdigitalgroup.atlassian.net/wiki/spaces/SDGPUBLIC/pages/5024874499/React+Native+Integraiton+document#iOS.1

# This should be decleared before "Target" source 'https://cdn.cocoapods.org/' source 'https://cdn.confiant-integrations.net/backend-integrations/in-app/releases/ios/podspecs.git' # This should be decleared in "Target" pod 'AATKit', '3.12.0' pod 'ConfiantSDK', '6.1.0' pod 'YieldloveAdIntegration', :podspec => 'https://slabs-yieldlove-ad-integration.s3.eu-central-1.amazonaws.com/ios/YieldloveAdIntegration-10.1.1.podspec', subspecs: ['Confiant', 'Gravite']

Error: Confiant could not block Gravite Banner.

Unfortunately, Confiant doesn’t block the Gravite Banner very well. We are investigating with the Confiant team.

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