-jio-start-block-type-2
¶ React Native Support
-jio-style-title
¶ Introduction
Follow the below steps for integrating Jio Ads SDK for React Native Apps
Complete GETTING STARTED section and INITIALIZE SDK section before starting this section
-jio-end-block-type-2
-jio-start-block-type-2
¶ Setup React Native Environment
-jio-style-title
¶ Install Node JS
Reference Link : https://habiletechnologies.com/blog/getting-started-react-native-complete-setup-guide/
a. Download the node.js
b. Run the downloaded .msi file and follow the prompts to install
c. Node.js The installer should set the C:/Program Files/nodejs/ directory in windows PATH environment variable by default if is not you have to set the PATH. Restart any open command prompts for the change to take effect.
d. Make sure node and npm are installed by typing the below commands node -v npm -v e. After installing the node in your system, you can install react native by typing the following command in the terminal npm install -g react-native-cli
e. Create the React Native Project We will create our project by running the below command in the terminal from the folder where we want to create the app. react-native init MySampleApp
f. Add “local.properties” file containing the path of Android SDK at project level in Android Module.
g. Run the project
Go to that folder, cd MySampleApp run the command to start package react-native start react-native run-android
-jio-style-title
¶ Integrate Ads
Following steps explains you how to integrate Ads in react native. For details steps to cache and show ads is explained here
-jio-style-title
¶ 1.Include JioAds SDK Library
Include ‘jioads.aar’ in the libs section of Android Module and add the following dependency in Android app level build.gradle dependencies
{ compile(name:'jioads', ext:'aar') } -jio-style-title
¶ 2.Add Folder Reference in Gradle
Add libs folder reference in the Android project level build.gradle
flatDir { dirs 'libs' } For Banner/Billboard/Native Infeed/Native Content Stream/Native Custom
-jio-style-title
¶ 3.Create Custom View
Create Custom view in js (JioAdView.js) and expose the view and string property
import React from 'react';
import { requireNativeComponent, View } from 'react-native';
import PropTypes from 'prop-types';
const propTypes = {
adType: PropTypes.number,
adspotKey: PropTypes.string,
adWidth: PropTypes.number,
adHeight: PropTypes.number,
...View.propTypes,
};
const JioAdView = ({ adType, adspotKey}) => ( <RCTNativeView style={{ width : 540, height: 250, justifyContent: 'center'}} adType={adType} adspotKey={adspotKey} adWidth = {540} adHeight = {250} /> );
JioAdView.propTypes = propTypes; const RCTNativeView = requireNativeComponent('RCTNativeView', JioAdView);
export default JioAdView;-jio-style-title
¶ 4.Use Custom View for Display
Custom view will be used to display View in App.js
render() { return (
<View style={styles.sectionContainer}>
<Button title="Native Infeed" onPress={() => {setShouldShow(!shouldShow); setAdType(1); setAdspotId('<ADSPOT_KEY_GOES_HERE>');}} />
</View>
<View style={styles.sectionContainer}>
<Button title="Native ContentStream" onPress={() => {setShouldShow(!shouldShow); setAdType(2); setAdspotId('<ADSPOT_KEY_GOES_HERE>'); }} />
</View> );
} -jio-style-title
¶ 5.Create JioAdViewGroup
Create Custom class (JioAdViewGroup.java) which extends ReactViewGroup and implements LifecycleEventListener
public class JioAdViewGroup extends ReactViewGroup implements LifecycleEventListener{}-jio-bullet-type-1
- Create an instance of JioAdView with required parameters
-jio-bullet-type-1
- Set Adlistener to mJioAdView object.
-jio-bullet-type-1
- And then call mJioAdView.cacheAd(); on mJioAdView object.
-jio-bullet-type-1
- Once onAdPrepared callback is received then inside that you need to call mJioAdView.loadAd();
Below is the Sample reference code for above steps:
mJioAdView = new JioAdView(context.getCurrentActivity(), "gmpb10s3", JioAdView.AD_TYPE.DYNAMIC_DISPLAY);
mJioAdView.setAdListener(new JioAdListener() {
@Override public void onAdMediaEnd(JioAdView jioAdView) {
Log.d("Test", "onAdMediaEnd callback");
Toast.makeText(context, "onAdMediaEnd", Toast.LENGTH_SHORT).show();
}
@Override public void onAdClosed(JioAdView jioAdView, boolean isVideoCompleted, boolean isEligibleForReward) {
Log.d("Test", "onAdClosed callback=> " + "isVideoCompleted: " + isVideoCompleted + " isEligibleForReward: " + isEligibleForReward);
Toast.makeText(context, "onAdClosed", Toast.LENGTH_SHORT).show();
}
@Override public void onAdFailedToLoad(JioAdView adview, JioAdError jioAdError) {
Log.d("Test", "onAdFailedToLoad callback." + jioAdError.getErrorDescription());
Toast.makeText(context, "" + jioAdError.getErrorDescription(), Toast.LENGTH_SHORT).show();
}
@Override public void onAdPrepared(JioAdView adView) {
Log.d("Test", "onAdPrepared callback");
Toast.makeText(context, "onAdPrepared", Toast.LENGTH_SHORT).show();
drawView();
mJioAdView.loadAd();
}
@Override public void onAdReceived(JioAdView jioAdView) {
Log.d("Test", "onAdReceived callback");
Toast.makeText(context, "onAdReceived", Toast.LENGTH_SHORT).show();
}
@Override public void onAdClicked(JioAdView adview) {
Log.d("Test", "onAdClicked callback");
Toast.makeText(context, "onAdClicked", Toast.LENGTH_SHORT).show();
}
@Override public void onAdRender(JioAdView adview) {
Log.d("Test", "onAdRender callback");
Toast.makeText(context, "onAdRender", Toast.LENGTH_SHORT).show();
drawView();
}
@Override public void onAdMediaStart(JioAdView adview) {
Log.d("Test", "onAdMediaStart callback");
Toast.makeText(context, "onAdMediaStart", Toast.LENGTH_SHORT).show();
}
@Override public void onAdRefresh(JioAdView adview) {
Log.d("Test", "onAdRefresh callback");
Toast.makeText(context, "onAdRefresh", Toast.LENGTH_SHORT).show();
drawView();
}
@Override public void onAdMediaExpand(JioAdView adview) {
Log.d("Test", "onAdMediaExpand callback");
Toast.makeText(context, "onAdMediaExpand", Toast.LENGTH_SHORT).show();
}
@Override public void onAdMediaCollapse(JioAdView adview) {
Log.d("Test", "onAdMediaCollapse callback");
Toast.makeText(context, "onAdMediaCollapse", Toast.LENGTH_SHORT).show();
}
@Override public void onAdSkippable(JioAdView jioAdView) {
Log.d("Test", "onAdSkippable callback");
Toast.makeText(context, "onAdSkippable", Toast.LENGTH_SHORT).show();
}
});
mJioAdView.cacheAd();
For Dynamic Display Ads, Follow below steps.
-jio-bullet-type-1
- Create an instance of JioAdView with required parameters
-jio-bullet-type-1
- Set Adlistener to mJioAdView object.
-jio-bullet-type-1
- Set the display size to mJioAdView object. ArrayList arrayList = new ArrayList<>(); arrayList.add(Constants.DynamicDisplaySize.SIZE_320x50); mJioAdView.setDisplayAdSize(arrayList);
-jio-bullet-type-1
- And then call mJioAdView.cacheAd(); on mJioAdView object.
-jio-bullet-type-1
- Once onAdPrepared callback is received then inside that you need to call mJioAdView.loadAd();
@Override public void onAdPrepared(JioAdView adView) {
Log.d("Test", "onAdPrepared callback");
Toast.makeText(context, "onAdPrepared", Toast.LENGTH_SHORT).show();
drawView();
mJioAdView.loadAd();
}
For Native ads, Follow below steps.
-jio-bullet-type-1
- Create an instance of JioAdView class with required parameters
-jio-bullet-type-1
- Set Adlistener to mJioAdView object.
-jio-bullet-type-1
- Set the custom container to mJioAdView object.
mJioAdView.setCustomNativeAdContainer(R.layout.jio_custom_native_layout);
mJioAdView.setCustomImageSize(992, 640);-jio-bullet-type-1
- And then call mJioAdView.cacheAd(); on mJioAdView object.
-jio-bullet-type-1
- Once onAdPrepared callback is received, then inside that you need to call
mJioAdView.loadAd();
@Override public void onAdPrepared(JioAdView adView) {
Log.d("Test", "onAdPrepared callback");
Toast.makeText(context, "onAdPrepared", Toast.LENGTH_SHORT).show();
drawView();
mJioAdView.loadAd();
}
Below is the important step which needs to be added. We have to calculate the display metrics according to the required width and height and set that metrics to mJioAdView object.
Then, Add it to the root Frame layout of the view.
private void drawView(){
DisplayMetrics dm = context.getResources().getDisplayMetrics();
pxW = dp2px(mWidth, dm);
pxH = dp2px(mHeight, dm);
Log.e("Test", "pxW: " + pxW);
Log.e("Test", "pxH: " + pxH);
mJioAdView.measure(pxW, pxH);
mJioAdView.layout(0, 0, pxW, pxH);
removeAllViews();
addView(mJioAdView, new FrameLayout.LayoutParams(pxW, pxH));
}
private int dp2px(int dp, DisplayMetrics dm) {
return Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, dm));
}-jio-bullet-type-1
- Views need to be measured for the first time the Ad is rendered and when every time the Ad refreshes.
-jio-bullet-type-1
- So
drawView()method should be called inside onAdRender() and onAdRefresh()
-jio-style-title
¶ 6.Create JioAdViewManager
Create a class (JioAdViewManager.java) which extends SimpleViewManager<JioViewGroup> and return the JioViewGroup instance from createViewInstance(ThemedReactContext)
public class JioAdViewManager extends SimpleViewManager < JioAdViewGroup > {
@Override public String getName() {
return "RCTNativeView";
}
@ReactProp(name = "adType") public void setAdspotKey(JioAdViewGroup view, @Nullable int adType) {
view.setAdType(adType);
}
@ReactProp(name = "adspotKey") public void setAdspotKey(JioAdViewGroup view, @Nullable String adspot) {
view.setAdspotId(adspot);
}
@ReactProp(name = "adHeight") public void setHeight(JioAdViewGroup view, @Nullable int adHeight) {
view.setHeight(adHeight);
}
@ReactProp(name = "adWidth") public void setWidth(JioAdViewGroup view, @Nullable int adWidth) {
view.setWidth(adWidth);
}
@Override protected JioAdViewGroup createViewInstance(ThemedReactContext reactContext) {
return new JioAdViewGroup(reactContext);
}
}-jio-style-title
¶ 7.Create JioAdViewPackage
Create a class (JioAdViewPackage.java) which implements ReactPackage to register the JioAdViewManager
class JioAdViewPackage implements ReactPackage {
@Override public List < NativeModule > createNativeModules(ReactApplicationContext reactContext) {
return new ArrayList < > ();
}
@Override public List < ViewManager > createViewManagers(ReactApplicationContext reactContext) {
return Arrays. < ViewManager > asList(new JioAdViewManager());
}
}-jio-style-title
¶ 8.Register JioAdViewPackage
Register the JioAdViewPackage in MainApplication
public class MainApplication extends Application implements ReactApplication {
@Override protected List < ReactPackage > getPackages() {
return Arrays. < ReactPackage > asList(new MainReactPackage(), new JioAdViewPackage());
}
}-jio-end-block-type-2
-jio-start-block-type-2
¶ Adview Settings
-jio-style-title
¶ Enable Media Caching
SDK provides a below API to cache ad in persistent storage and show it later.
mJioAdView.enableMediaCaching(JioAds.MediaType.ALL);-jio-style-title
¶ Targeting
1. Passing Custom Data to ad request
HashMap<String,String> customData=new HashMap<>();
customData.put("key1","value1");
customData.put("key2","value2");
mJioAdView.setMetaData(customData);
2. Targeting for specifics
If you want to target ads in particular sections of your app, ads to render as per language of your app content, for specific users of your app. Below API’S allows you to do so.
//for complete list of categories refer link
https://www.iab.com/guidelines/iab-quality-assurance-guidelines-qag-taxonomy/
mJioAdView.setSectionCategory(Section.SectionCategory.CAREERS); // eg. For CAREERS section
mJioAdView.setPageCategory(Section.BUSINESS.CONSTRUCTION);
mJioAdView.setLanguageOfArticle("<ISO_CODE_OF_DESIRED_LANGUAGE>"); // For eg. ISO 639-1 code for English is en
3. Keywords
You can pass on keyword information during ad request to have keyword targeted ads.
mJioAdView.setKeywords("<KEYWORD>");-jio-style-title
¶ Customize ad appearance
Use the below code to customize adview background color. Default color for interstitial ads is black and transparent for banner ads.
mJioAdView.setBackgroundColor("<COLOR_CODE>");-jio-style-title
¶ Setting Child Application package name
Below API can be used to set Child application package name. This API will only work for trusted parent apps. If null string is passed it will be considered as reset.
mJioAdView.setPackageName(“PACKAE_NAME_HERE”);-jio-end-block-type-2
-jio-start-block-type-2
¶ Global Ad Settings
-jio-style-title
¶ SDK Initialization
JioAds.getInstance().setEnvironment(JioAds.Environment.PROD)
JioAds.getInstance().setLogLevel(JioAds.LogLevel.DEBUG)
JioAds.getInstance().init(this)
¶ Targeting
1. Passing Custom Data to all ad requests
HashMap<String,String> customData=new HashMap<>();
customData.put("key1","value1");
customData.put("key2","value2");
JioAds.getInstance().setMetaData(customData);
1. The above api would apply on all JioAdView objects used in the project
2. To pass custom data at adView level(on JioAdView object) you can refer Ad view Settings
3.In the case where keys of the Hashmap passed to jioAdView.setMetaData() and JioAds.getInstance().setMetaData()
2. Targeting for specifics
The JioAds SDK allows you to pass extra data to identify users for serving targeted campaign ads. For example, if your app users sign in using an email address, you can send this information to the server and create a campaign to target only specific user email addresses with ads.
JioAds.getInstance().setUserCity("<USER_CITY>");
//possible values
//AGE_18to24,AGE_25to34,AGE_35to44,AGE_45to54,AGE_55to64,AGE_ABOVE65
JioAds.getInstance().setUserAge(JioAds.UserAge.AGE_25to34);
//possible values
// GENDER_MALE,GENDER_FEMALE
JioAds.getInstance().setUserGender(JioAds.Gender.GENDER_MALE);
If invalid data is passed in any of the above parameters the SDK would ignore the data.
-jio-style-title
¶ Disabling Google Play Service Lookup
Use the below api to disable google play service lookups . By default it’s not disabled i.e. false. Note that when google play service is disabled Ad SDK will generate custom advertising identifier.
JioAds.getInstance().disableGooglePlayService(true);
-jio-style-title
¶ Disabling BPID Service
Use the below api to disable BPID service. By default it’s not disabled(false).
JioAds.getInstance().disableUidService(true);
-jio-style-title
¶ Set Chromium Input
Use the below api to notify SDK if app is using Chromium Android. SDK will disable usage of system WebView if input is set to true.
JioAds.getInstance().isChromiumDependencyPresent = true;
-jio-style-title
¶ Releasing global app resources
In order for SDK to understand the app exit(session end) and release app level resources, publisher app can call below API on app exit.
JioAds.getInstance().release();-jio-end-block-type-2