react-native-yieldlove
v2.5.0
Published
Yieldlove SDK bridge for React Native
Downloads
391
Readme
react-native-yieldlove
Yieldlove SDK for React Native (2.5.0)
Change log
[2.5.0] (01.October.2024)
- Backfill feature is not supported.
[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 a BackFill feature.
- Java version is updated (17)
Installation
Using npm
$ npm install react-native-yieldlove --save
Using yarn
$ yarn add react-native-yieldlove
Configuring
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 {
...
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.
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: () => {
Yieldlove.showInterstitial().catch(error => console.log(error));
}
});
// rendering banner ad
// ...
<YieldloveBannerAd
callString={BANNER_CALL_STRING}
options={{
customTargeting: {
fruit: 'orange',
day: 'monday'
},
contentUrl: 'https://www.example.com/content/banner.html'
}}
onAdLoaded={({nativeEvent}) => {
// can use to change the style
const { width, height } = nativeEvent;
this.setState({ width, height });
}}
/>
API
YieldloveBannerAd
| 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
setApplicationName: (applicationName: string) => void
Set this at the start of your app to initialize Yieldlove
SDK.
setDebug: (isDebugModeEnabled: boolean) => void
Enable debug logs from native libraries.
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 |
|------------------------|------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 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 |
|-------------------|-----------|------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 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 |
|-----------|----------------------|-----------------------------------------------------|
| code
| ErrorCode
(number) | Platform independent code that classifies the error |
| message
| string
| Message describing the error |
ErrorCode
enum
| 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. |
Enabling BackFill (only available in v2.4.2)
To enable the BackFill feature, install the react-native-yieldlove library using one of the following commands:
Using npm
$ npm install [email protected] --save
Using yarn
$ yarn add [email protected]
For more detailed information, refer to the Development Document Link
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