React Native SDK
Survey library to monetize your mobile app, provided by inBrain.ai
Requirements
- React Native >= 0.69.0
iOS specific requirenments:
- Xcode 14+
- iOS 12.0+ / Catalyst(macOS 10.15.1+), iOS 13.1+
- Swift 5.0+
Android specific requirenments:
- System WebView >= 51.0.2704.90 (default for Android 7.0).
Installation
Install and link the module: $ npm install inbrain-surveys --save
Extra steps Android
Add jitpack repository to your gradle configuration android/build.gradle > allprojects > repositories
maven {
url 'https://jitpack.io'
}
Extra steps iOS
Open the Terminal and go to the iOS project folder, then run
pod install
Usage
To start using the package - please, add the corresponding import statement in your code:
import inbrain from 'inbrain-surveys';
For a fully functional example, please refer to this demo app using the SDK.
Get Started
Initialize the SDK
inbrain.setInBrain(apiClientId: string, apiSecret: string, userId?: string);
apiClientId
: The client ID obtained from your Publisher DashboardapiSecret
: The client secret obtained from your Publisher DashboarduserId
: [Optional] The string value that uniquely identifies each user within your application (Example: an email, a username). The value may be provided later using inbrain.setUserID(userID: string | undefined) function. This value is provided via S2S Callbacks asPanelistId
. See more here: S2S Docs.
Note: This method must be called prior calling all the other methods.
Initialization Example
import inbrain from 'inbrain-surveys';
inbrain.setInBrain(apiClientId, apiSecret, userId);
User identifier
Set uniq identifier of the user within your application. If value not set (or empty) - deviceId
will be used instead. This value is provided via S2S Callbacks as PanelistId
. See more here: S2S Docs.
inbrain.setUserID(userID: string | undefined)
userId
: The string value that uniquely identifies each user within your application (Example: an email, a username).
Example
import inbrain from 'inbrain-surveys';
inbrain.setUserID(userId)
Option #1: Use The Survey Wall
Simply show the survey wall and let the inBrain system handle everything else! Be sure to Setup your S2S Callbacks and fully configure your application here: Publisher Dashboard
inbrain.showSurveys() : Promise<void>
Survey Wall Example
import inbrain from 'inbrain-surveys';
inbrain.showSurveys()
.then(() => {
console.log('success');
})
.catch((err: Error) => {
console.log(err);
});
Option #2: Use Native Surveys
Native Surveys is similar to an API that can be used within our SDK. Fetch "Surveys" and receive a list of the top surveys for a single user based on their profiler data. inBrain handles collecting profiler data and matching users with the ideal surveys. When fetching surveys, we return a list with details about each survey opportunity such as Reward, Length of Interview, Rating, etc. You are responsible for displaying a representation (button, tile, etc.) for each survey natively within your app.
getNativeSurveys: (filter?: InBrainSurveyFilter) => Promise<InBrainNativeSurveys[]>
filter
: Optional parameter for filter surveys. Possible options:placementId (string)
: an optional placement identifier. These can be setup in your Publisher DashboardcategoryIds (number[])
: an optional list of categories. Providing one or more category Ids will limit surveys to those categories.excludedCategoryIds (number[])
: an optional list of EXCLUDED categories. Providing one or more excluded category Ids will only return surveys that do NOT belong to these categories.
Usage
import inbrain, {InBrainNativeSurvey, InBrainSurveyFilter, InBrainSurveyCategory} from 'inbrain-surveys';
let filter: InBrainSurveyFilter = {
placementId: placementId,
categoryIds: [InBrainSurveyCategory.Automotive],
excludedCategoryIds: [InBrainSurveyCategory.BeveragesAlcoholic],
};
inbrain
.getNativeSurveys(filter)
.then((nativeSurveys: InBrainNativeSurvey[]) => {
console.log(InBrainNativeSurvey);
})
.catch((err: Error) => {
console.log(err);
});
Open A Native Survey
When a user within your app selects a survey, you will then need to call showNativeSurvey
along with the following survey data points. This will open the survey within a webview over your app.
inbrain.showNativeSurvey(surveyId: string, searchId: string) : Promise<void>
surveyId
: id of the surveys to be shown;searchId
: survey'ssearchId
.
Example
import inbrain from 'inbrain-surveys';
inbrain
.showNativeSurvey(surveyId, searchId)
.then(() => {
console.log('success');
})
.catch((err: Error) => {
console.log(err);
});
Understanding Native Surveys
As mentioned in the previous sections, fetching surveys via getNativeSurveys
returns an array of survey objects. Below are details related to the properties available with each survey:
Property | Description |
---|---|
id | Id of the survey and the value that should be used when passing parameter to showNativeSurvey() |
rank | A normalized value of 1-N where 1 is highest ranked survey and N is the lowest ranked survey |
time | An estimation of how many minutes will be required for the user to complete the survey |
value | Reward the user will earn by completing the survey. This value is in the currency type (points, coins, cents) you specified within the publisher dashboard and already takes into consideration the revenue share you've allocated to share with the user for a survey completion. |
isProfilerSurvey | Boolean value indicating whether the survey represents an inBrain Profiler survey |
currencySale | Boolean value indicating if the value of the survey is adjusted based on an active currency sale |
multiplier | The currency sale multiplier value applied to the survey value |
conversionLevel | Value that indicates the approximate conversion rate of the survey. See possible values here |
categories | Array of values indicating what categories this survey belongs to. See possible values here |
searchId | This value should be used when opening a native survey. It includes important encoded information related to placement and category filters |
Additional Functionality
Add custom tracking data
Set the value to track each user session. This value is provided via S2S Callbacks as SessionId
. See more here: S2S Docs
inbrain.setSessionID(sessionId: string)
sessionId
: Identifier of the session
Example
import inbrain from 'inbrain-surveys';
inbrain.setSessionID(`session_identifier`)
Customize Navigation Bar
Setup Navigation Bar to match your application style
inbrain.setNavigationBarConfig(config: NavigationBarConfig)
config
: the Navigation Bar configuration
Example
import inbrain, { NavigationBarConfig } from 'inbrain-surveys';
const navigationBarConfig: NavigationBarConfig = {
title: 'inBrain.ai Surveys',
backgroundColor: '#00A5ED',
titleColor: '#FFFFFF',
buttonsColor: '#FFFFFF',
hasShadow: false,
};
inbrain.setNavigationBarConfig(navigationBarConfig);
Customize Status Bar
Setup Status Bar to match your application style
inbrain.setStatusBarConfig(config: StatusBarConfig)
config
: the Status Bar configuration
Example
import inbrain, { StatusBarConfig } from 'inbrain-surveys';
const statusBarConfig: StatusBarConfig = {
lightStatusBar: true,
statusBarColor: '#EAAAAA', // Android only option, have no effect at iOS.
};
inbrain.setStatusBarConfig(statusBarConfig);
Check if Surveys are available (Survey Wall Only)
A method to check if the user has surveys available. This is useful to check prior to giving the user an option to open the inBrain Survey Wall. DO NOT use this method when working with Native Surveys, as that does not take into account placement and categories filter options.
inbrain.checkSurveysAvailable() : Promise<boolean>
Example
import inbrain from 'inbrain-surveys';
inbrain
.checkSurveysAvailable()
.then((available: boolean) => {
console.log(available);
})
.catch((err: Error) => {
console.log(err);
});
Callbacks
On webview dismissed. If you are using Native Surveys - please, ensure the surveys reloaded each time the webview closed.
inbrain.setOnSurveysCloseLister(callback: (OnCloseSurveysData) => void)
callback
: called after WebView closed by the user. AvailableOnCloseSurveysData
fields:byWebView (boolean)
: true - webview closed by command from WebPage; false - webview closed by user;rewards? (InBrainSurveyReward[])
- optional list of completed surveys and earned rewards:NOTE: At the moment only first Native Survey reward is delivered. That means if the user complete a Native Survey, proceed to Survey Wall and complete one more survey - only first reward will be delivered. In case of Survey Wall usage only - no rewards will be delivered.* `surveyId (string)` - identifier of completed survey;
* `userReward (number)` - amount of IAC, earned by the user;
* `outcomeType (SurveyOutcomeType)` - type of survey completion (completed or terminated);
* `placementId (string)` - an optional placement identifier of the survey;
* `categories (Category)` - an optional list of the survey's categories.
Usage
import inbrain from 'inbrain-surveys';
inbrain.setOnSurveysCloseLister((data) => {
// Do something with the data
})
Note: Calling this method multiple times will override the previous listener.
TS available types and interfaces:
InBrainReward
: response from .getRewards();InBrainNativeSurvey
: response from .getNativeSurveys();Category
: InBrainNativeSurvey's field, describes survey's category;ConversionLevel
: InBrainNativeSurvey's field, describes the estimated conversion performance range;
InBrainSurveyFilter
: type for filtering data used with .getNativeSurveys();InBrainSurveyCategory
: a full list of available categories;OnCloseSurveysData
: parameter of OnSurveysClose callback;InBrainSurveyReward
: information about completed survey and earned reward;SurveyOutcomeType
: type of survey completion (completed or terminated);
NavigationBarConfig
: Navigation Bar configuration options;StatusBarConfig
: Status Bar configuration options.
Full list of categories:
- Automotive
- Beverages Alcoholic
- Beverages Non Alcoholic
- Business
- Children & Parenting
- Coalition Loyalty Programs
- Destinations & Tourism
- Education
- Electronics, Computer Software
- Entertainment And Leisure
- Finance, Banking, Investing & Insurance
- Food
- Gambling, Lottery
- Government & Politics
- HealthCare
- Home
- Media & Publishing
- Personal Care
- Restaurants
- Sensitive & Explicit Content
- Smoking & Tobacco
- Social Research
- Sports Recreation Fitness
- Telecommunications
- Transportation
- Travel - Airlines
- Travel - Hotels
- Travel - Services, Agency, Booking
- Credit Cards
- Video Games
- Fashion & Clothing - Other
- Fashion & Clothing - Department Store
List of available "Conversion Level" values:
Note: The Conversion Level buckets indicate how the survey has been performing platform-wide at inBrain, not necessarily how well the survey will perform for the user its shown to. Its recommended to use these tags only to portray a unique UI.
- New Survey;
- Very Poor Conversion
- Poor Conversion;
- Fair Conversion;
- Good Conversion;
- Very Good Conversion;
- Excellent Conversion.
Troubleshoots
[BUILD TIME]
Several errors similar to Bad receiver 'int *'
, Unkown type name 'InBrain'
...
First check that the framework target membership is correctly set. If the problem still occurs, and you are trying to create a release build with a simulator as target, please add arm64
to the Excluded Architecture of your project and 'inbrain-surveys' pods (see this post for detailed information)
[RUNTIME]
Library not loaded: @rpath/libswiftCore.dylib
This problem can happen if your project doesn't have the Swift standard libraries included. Set the 'Always Embed Swift Standard Libraries' to yes in your target to fix it. Clean and build the project after changes.
[RUNTIME - Release scheme]
dependent dylib '@rpath/InBrainSurveys.framework/InBrainSurveys' not found
This problem happen with some versions of Cocoapods and Xcode. Updating Cocoapods and Xcode to the latest versions should fix the trouble.
[DEVELOPMENT]
When running 'pod install' in APP: "Specs satisfying the inbrain-surveys (from
../node_modules/inbrain-surveys)
dependency were found, but they required a higher minimum deployment target."
=> Increase the platform version in 'APP/ios/Podfile'
When building in Xcode: problem with not finding switch libraries
https://github.com/facebook/react-native/issues/31733#issuecomment-931824830