Integrating DFINERY (Adbrix) [React Native]
Follow
Note
[[인용:보통:위험]]
System Requirements
DFINERY React Native SDK works with the following versions:
1. react-native: 0.60 or higher
Quick Start
The SDK version applied to React Native has been upgraded. If you would like to check the guide prior to version 3.0.0, please send an inquiry to the email address below.
support: support-tracker@adbrixsupport.zendesk.com
Download SDK
AdbrixRM SDK for React Native is downloaded through npm.
npm install react-native-adbrix-remaster --save
SDK updates
You can update AdBrixRM SDK for React Native to the latest version via npm. (currently latest version: 3.2.1)
npm update react-native-adbrix-remaster --save
[[Quote: Risk: Moderate]]* In version 3.0.0, Android and iOS native settings have been significantly modified and are not backward compatible. Users updating from a previous version must check the guide.
* The javascript code at the react-native level has been modified in a more explicit way using TypeScript, but is backward compatible except for deep link-related code.
Android Settings
[[Quote:Guide:Normal]] It is recommended that Android-related work be performed in Android Stuido.
1.Please add the code below to app/proguard-rule.pro so that SDK operation and analysis can proceed smoothly.
class="brush:java"># Add any project specific keep options here: -keep class com.google.android.gms.common.ConnectionResult { int SUCCESS; } -keep class com.google.android.gms.ads.identifier.AdvertisingIdClient { com.google.android.gms.ads.identifier.AdvertisingIdClient$Info getAdvertisingIdInfo(android.content.Context); } -keep class com.google.android.gms.ads.identifier.AdvertisingIdClient$Info { java.lang.String getId(); boolean isLimitAdTrackingEnabled(); } -keep public class com.android.installreferrer.** { *; }
2. Add the SDK initialize code to the Android Application class.
import io.adbrix.reactnative.ReactAdbrix;
public class MyApplicationClass extends Application implements ReactApplication { ...
...
@Override public void onCreate() { super.onCreate(); ReactAdbrix.sdkInit(this, "APPKEY", "SECRET_KEY"); ...
... } }
[[Quote:Guide:General]] Modifying the existing build.gradle and AndroidManifest.xml files is no longer necessary.
iOS settings
1.Go to the iOS folder in the React Native project and install the SDK through Cocoapods by entering the pod install command in the terminal as shown below.
$ cd ios
$ pod install
2. Please open AppDelegate.m and add the SDK initialize code.
#import <AdSupport/AdSupport.h> #import <react-native-adbrix-remaster/ReactAdbrix.h> @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ...
... ReactAdbrix *adBrix = [ReactAdbrix sharedInstance];
[adbrix initAdBrixWithAppKey:@"APPKEY" secretKey:@"SECRET_KEY" launchOptions:launchOptions];
...
... return YES; }
3. If IDFA use approval is required through the ATT pop-up, please add the code for approval and rejection of use as shown below.
#import <AdSupport/AdSupport.h> #import <react-native-adbrix-remaster/ReactAdbrix.h> #import <AppTrackingTransparency/AppTrackingTransparency.h> @interface AppDelegate () @end @implementation AppDelegate . . . - (void)applicationDidBecomeActive:(UIApplication *)application { ReactAdbrix *adBrix = [ReactAdbrix sharedInstance]; if (@available(iOS 14, *)) { [ATTrackingManager requestTrackingAuthorizationWithCompletionHandler:^(ATTrackingManagerAuthorizationStatus status) { switch (status) { case ATTrackingManagerAuthorizationStatusAuthorized: [adBrix startGettingIDFA]; break; case ATTrackingManagerAuthorizationStatusDenied: [adBrix stopGettingIDFA]; break; case ATTrackingManagerAuthorizationStatusRestricted: [adBrix stopGettingIDFA]; break; case ATTrackingManagerAuthorizationStatusNotDetermined: [adBrix stopGettingIDFA]; break; default: [adBrix stopGettingIDFA]; break; } }]; } }
Alternatively, please call the API using javascript code at the desired timing as follows.
//return Promise<ATTStatusType>
const status = await AdbrixRm.requestATTPermission()
console.log(status)
//ATTStatusType = unavailable | denied | authorized | restricted | notDetermined
react-native settings
Please import the sdk as follows:
import AdbrixRm from "react-native-adbrix-remaster"
[[Quote: Guide: Normal]]
App key & Secret key???
This is an identification value to distinguish each app in Adbrix Remastered.
This is a required value for SDK integration, and can be checked after registering the app in
the DFINERY (Adbrix) console
.
[[Quote:Guide:Normal]]
Congratulations!!!
Basic integration to use DFINERY (Adbrix) has been completed.
The available features are as follows:
1. Reporting to check indicators such as DAU, MAU, and daily retention
2. App introduction campaigns such as NCPI
If you want to analyze events such as purchases that occur within the app, you can continue linking by referring to the guide below.
Additional SDK settings
Based on cumulative event count
Set to transmit event data to the DFINERY (Adbrix) server according to the accumulated number of events.
You can set the number of events with the values below.
- AdbrixRm.UploadCountInterval.MIN: 10
- AdbrixRm.UploadCountInterval.NORMAL: 30
- AdbrixRm.UploadCountInterval.MAX: 60
import AdbrixRm from 'react-native-adbrix-remaster'
useEffect(() => {
AdbrixRm.setEventUploadCountInterval(30)
}, [])
based on time
Event information is transmitted to the DFINERY (Adbrix) server according to the set time.
You can set the upload cycle with the values below.
- AdbrixRm.UploadTimeInterval.MIN: 30 seconds
- AdbrixRm.UploadTimeInterval.NORMAL: 60 seconds
- AdbrixRm.UploadTimeInterval.MAX: 120 seconds
import AdbrixRm from 'react-native-adbrix-remaster'
useEffect(() => {
AdbrixRm.setEventUploadTimeInterval(60)
}, [])
Deep link/deferred deep link event analysis
You can analyze deep link performance by adding code to React-Native and Android / iOS platforms respectively.
Deep link settings
To use deep linking in React-Native, additional settings are required for each Android / iOS platform.
Android
For Android, add the code below to the activity set to MAIN/LAUNCHER in Androidmanifest.xml . The activity's launchMode must be set to singleTask.
<intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <!--Add your deeplink scheme and host --> <data android:scheme="your_scheme" android:host="your_host" /> </intent-filter>
Add the following content to the corresponding Activity.
import android.content.Intent; import android.os.Bundle; import io.adbrix.reactnative.ReactAdbrix;
public class MainActivity extends Activity { ...
...
@Override
protected void onResume() {
super.onResume();
ReactAdbrix.deeplinkEvent(this);
}
@Override protected void onNewIntent(Intent intent) { super.onNewIntent(intent); setIntent(intent); } }
iOS
Open the project in Xcode and add the URL Schemes value to [ General > Target > Info > URL Types ].
Add the DeeplinkDelegate code to AppDelegate.m as shown below.
#import <react-native-adbrix-remaster/ReactAdbrix.h>
// AppDelegate.m - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary <UIApplicationOpenURLOptionsKey,id > *)options { return [[ReactAdbrix sharedInstance] deeplinkOpenWith:application openURL:url options:options];
} // If Universial Link is available - (BOOL)application:(UIApplication *)application
continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{ return [[ReactAdbrix sharedInstance] deeplinkOpenWith:application continueUserActivity:userActivity restorationHandler:restorationHandler];
}
React-Native
Set “setDeeplinkListener” to retrieve deep link information set in the tracking link.
// App.js import AdbrixRm from 'react-native-adbrix-remaster'
useEffect(() => { const deeplinkListener = AdbrixRm.deeplinkListener((e) => {
console.log(e.deeplink)
})
return () => {
deeplinkListener.remove()
} }, [])
Deferred deep linking
A deferred deep link is responsible for delivering the relevant information from the server so that it can land on a specific screen after installing the app.
[[Quote:Guide:General]] The value transmitted from a deferred deep link is transmitted as a string type as follows.
yes; myscheme://host?key=value
React-Native
Set "setDeferredDeeplinkListener" to retrieve deep link information set in the tracking link.
useEffect(()=>{ AdbrixRm.deferredDeeplinkListener((e) => { console.log(e.deeplink) })
return () => {
deferredDeeplinkListener.remove()
} }, [])
Event Analysis
By analyzing events that occur in the app, you can construct reports and send postback.
To analyze an event, you must insert an event analysis code at the time an event occurs and deliver appropriate event information.
DFINERY (Adbrix) provides four major types of event analysis.
-
User analysis
- Login/logout events
- User information~
- Custom event analysis
-
Common (general) event analysis
- join the membership
- app updates
- user invitation
- credit usage
- purchase
-
Commerce event analysis
- Enter the home (main) screen
- Enter category (special exhibition)
- View product details
- Put in a shopping cart
- Add product of interest
- Confirm your order
- Cancel order
- Search for product
- Share product
- View product list
- View shopping cart list
- Payment information
-
Game event analysis
- Tutorial completed
- character generation
- Stage completed
- Level achieved
User analysis
Login/logout events
Analyze app users’ login/logout events.
When the login is successful, the identifying value (user id) that distinguishes the user is provided as follows.
[[인용:보통:위험]]
Login Precautions
The user ID used for login is used for matching between users and devices when using the growth action function. If login is called again without logging out after logging in, correct matching may not occur.
Please be careful not to include personal information in your user ID. If the user ID includes personal information such as email or phone number, we recommend encrypting it.
onPress={() => { // LogIn AdbrixRm.login("your_user_id"); }}
User information
You can analyze the users age, gender, and other information.
onPress={() => { // Age AdbrixRm.setAge(30); // Gender AdbrixRm.setGender(AdBrixRm.Gender.FEMALE); // Other user properties var userProperties = new AdbrixRm.UserProperties(); userProperties.setProperty("user_nick", "peterPark"); userProperties.setProperty("place","Seoul"); userProperties.setProperty("height",180); userProperties.setProperty("married",false); AdbrixRm.saveUserProperties(userProperties); }}
[[Citation:Danger:Moderate]]
Precautions when setting UserProperty and AttrModel
1.More than 100 pieces of information will not be processed.
2. The data type of the key value is string and cannot exceed 256 characters, and characters other than lowercase English letters and numbers cannot be used.
3. The data length of the Value value cannot exceed 1024 bytes.
Custom event analysis
Analyzes general user events within the app. (excluding purchase-related events)
You can freely analyze events within the app.
onPress={() => { // Addtional event parameter var eventAttr = new AdbrixRm.AttrModel(); eventAttr.setAttrs("address","New York"); eventAttr.setAttrs("firsttime",true) AdbrixRm.event("custom_event", eventAttr);
//AttrModel 없이 사용할 수 있습니다.
AdbrixRm.event("custom_event"); }}
※ caution
As in the example below, do not set naturally increasing values as event names.
Too many events actually interfere with analysis.
AdbrixRm.event("custom:count36 ,time:00:00:39.2343535");
Therefore, in this case, please set additional event information (AdbrixRm.AttrModel) and set custom parameters to call the event.
// Addtional event parameter api var eventAttr = new AdbrixRm.AttrModel(); eventAttr.setAttrs("count",37); eventAttr.setAttrs("time", 39238); // set custom event with addtional event parameter AdbrixRm.event("custom", eventAttr);
Common (general) event analysis
Among the events that occur in the app, we analyze the commonly occurring event (payment).
Common event types provided by DFINERY (Adbrix) are as follows.
- join the membership
- app updates
- user invitation
- credit usage
- Make payment
* If you want to view sales by advertising channel in DFINERY (Adbrix), you must link 'Payment'.
join the membership
Analyze membership registration events that occurred in the app.
onPress={() => { // (Optional) Addtional event parameter var eventAttr = new AdbrixRm.AttrModel(); eventAttr.setAttrs("address","New York"); eventAttr.setAttrs("is_first",true); AdbrixRm.commonSignUp(AdbrixRm.SignUpChannel.KAKAO, eventAttr);
// or AdbrixRm.commonSignUp(AdbrixRm.SignUpChannel.KAKAO); }}
app updates
Analyze app update events that occurred in the app.
onPress={() => { // (Optional) Addtional event parameter var eventAttr = new AdbrixRm.AttrModel(); eventAttr.setAttrs("address","New York"); eventAttr.setAttrs("firsttime",true); AdbrixRm.commonAppUpdate("1.0.0","1.0.1",eventAttr);
// or AdbrixRm.commonAppUpdate("1.0.0","1.0.1"); }}
user invitation
Analyze app invitation events that occurred in the app.
onPress={() => { // (Optional) Addtional event parameter var eventAttr = new AdbrixRm.AttrModel(); eventAttr.setAttrs("address","New York"); eventAttr.setAttrs("firsttime",true);
AdbrixRm.commonInvite(AdbrixRm.InviteChannel.FACEBOOK, eventAttr);
// or AdbrixRm.commonInvite(AdbrixRm.InviteChannel.FACEBOOK); }}
credit usage
Analyze events related to the use of cash currency within the app.
onPress={() => { // (Optional) Addtional event parameter var eventAttr = new AdbrixRm.AttrModel(); eventAttr.setAttrs("address","New York"); eventAttr.setAttrs("firsttime",true); eventAttr.setAttrs("credit", 10000);
AdbrixRm.commonUseCredit(eventAttr);
/or AdbrixRm.commonUseCredit(); }}
Make payment
Analyze payment (purchase) events that occurred in the app.
ProductModel is implemented with the following items:
- {string} productId: Product number
- {string} productName: Product name
- {number} price: price
- {number} quantity: Purchase quantity
- {?AdbrixRm.Currency}: (Optional) Purchase currency information
- {?AdbrixRm.CategoryModel}: (Optional) Category information
- {?AdbrixRm.AttrModel}: (Optional) Product detail options
The commonPurchase API next inputs the following parameters:
- {string} orderId: order number
- {AdbrixRm.ProductModelList}: List of ProductModels
- {number} orderSales: Total order amount
- {number} discount: Discount amount
- {number} deliveryCharge: purchase quantity
- {AdbrixRm.PaymentMethodType} paymentMethod: Payment Method
- {?AdbrixRm.AttrModel} attr: (Optional) Product detail options
onPress={() => { // The category of categoryModel is required up to one, and a maximum of five can be entered var category1 = new AdbrixRm.CategoryModel(); category1.setCategory("cloth"); category1.setCategory("panth"); category1.setCategory("short"); category1.setCategory("summer"); category1.setCategory("Nike"); var product1 = new AdbrixRm.ProductModel(); product1.setProductId("3029102"); product1.setProductName("Gray top"); product1.setPrice(50000);
product1.setQuantity(1); product1.setDiscount(10000); product1.setCurreny(AdbrixRm.Currency.KRW); product1.setCategory(category1); var category2 = new AdbrixRm.CategoryModel();
category2.setCategories("electronic", "small", "samsung", "phone", "galaxy")
var attr = new AdbrixRm.AttrModel();
attr.setAttrs("is_promoted",false);
var product2 = new AdbrixRm.ProductModel();
product2.setModel("1234", "galaxy", 2000, 4, 0, 'CNY', category2, attr) var productList = new AdbrixRm.ProductModelList(); productList.setProduct(product1); productList.setProduct(product2); var eventAttr = new AdbrixRm.AttrModel(); eventAttr.setAttrs("address", "New York"); eventAttr.setAttrs("firsttime", true); AdbrixRm.commonPurchase("orderId_12341", productList, 48000, 0, AdbrixRm.PaymentMethod.BANK_TRANSFER, eventAttr); }}
Commerce event analysis
We analyze purchase-related events (viewing product details, adding to shopping cart, etc.) that occur in the app.
The types of commerce events provided by DFINERY (Adbrix) are as follows.
- Enter the home (main) screen
- Enter category (special exhibition)
- View product details
- Put in a shopping cart
- Add wishlist (product of interest)
- Confirm your order
- Cancel order
- Search for product
- Share product
- View product list
- View shopping cart
- Enter payment information
Enter the home (main) screen
Analyzes events in which the user enters the apps home (main) screen.
onPress={() => { // (Optional) Addtional event parameter var eventAttr = new AdbrixRm.AttrModel(); eventAttr.setAttrs("address","New York"); eventAttr.setAttrs("firsttime",true) AdbrixRm.commerceViewHome(eventAttr);
// or
AdbrixRm.commerceViewHome() }}
Enter category (special exhibition)
Analyze events in which users enter the category (special exhibition) screen.
- {AdbrixRm.CategoryModel} category: Category information the user entered (maximum 5)
- {AdbrixRm.ProductModelList} productList : List of ProductModels
- {AdbrixRm.AttrModel} attr: (Optional) Product detail options
onPress={() => { var category = new AdbrixRm.CategoryModel(); category.setCategory("cloth"); var product1 = new AdbrixRm.ProductModel(); product1.setProductId("3029102"); product1.setProductName("Gray top"); product1.setPrice(50000);
product1.setQuantity(1); product1.setDiscount(10000); var productList = new AdbrixRm.ProductModelList(); productList.setProduct(product1); // (Optioanl) Addtional event parameter var eventAttr = new AdbrixRm.AttrModel(); eventAttr.setAttrs("address","New York"); eventAttr.setAttrs("firsttime",true); AdbrixRm.commerceCategoryView(category, productList, eventAttr);
// or
AdbrixRm.commerceCategoryView(category, productList); }}
View product details
We analyze events where users view products in detail.
- {AdbrixRm.ProductModel} productInfo: View product details
- {AdbrixRm.AttrModel} attr: (Optional) Product detail options
onPress={() => { // product and category setup (can be set maximum 5 categories) var category1 = new AdbrixRm.CategoryModel(); category1.setCategory("cloth"); category1.setCategory("panth");
category1.setCategory("short"); category1.setCategory("summer"); category1.setCategory("Nike"); var product = new AdbrixRm.ProductModel(); product.setProductId("3029102"); product.setProductName("Gray top"); product.setPrice(50000);
product.setQuantity(1); product.setDiscount(10000); // (Optioanal) Addtional event parameter var eventAttr = new AdbrixRm.AttrModel(); eventAttr.setAttrs("address","New York"); eventAttr.setAttrs("firsttime",true); AdbrixRm.commerceProductView(product, eventAttr);
// or
AdbrixRm.commerceProductView(product); }}
Put in a shopping cart
We analyze events in which users add products to their shopping carts.
- {AdbrixRm.ProductModelList} productList: List of products in the shopping cart
- {AdbrixRm.AttrModel} attr: (Optional) Product detail options
onPress={() => { ...
...
AdbrixRm.commerceAddToCart(productList, eventAttr);
// or
AdbrixRm.commerceAddToCart(productList); }}
Add product of interest (wish list)
Analyze events in which a user adds a product to a product of interest (wishlist).
- {AdbrixRm.ProductModel} productInfo: Product added to wishlist
- {AdbrixRm.AttrModel} attr: (Optional) Product detail options
onPress={() => { AdbrixRm.commerceAddToWishList(product, eventAttr); // or
AdbrixRm.commerceAddToWishList(product); }}
Confirm your order
We analyze the final confirmation event that a user confirms before paying for a product.
We convey the following order and product information:
- {string} orderId: order number
- {AdbrixRm.ProductModelList} productList : List of ProductModels
- {number} discount: Discount amount
- {number} deliveryCharge : Delivery charge
- {AdbrixRm.AttrModel} attr: (Optional) Product detail options
onPress={() => { ...
...
AdbrixRm.commerceReviewOrder("orderId_12341", productList, 0, 3500.00, eventAttr); // or
AdbrixRm.commerceReviewOrder("orderId_12341", productList, 0, 3500.00); }}
Cancel order (refund)
Analyze events in which a user canceled an order or issued a refund.
We convey the following product and order information:
- {string} orderId: order number
- {AdbrixRm.ProductModelList} productList : List of ProductModels
- {number} penaltyCharge: Cancellation (refund) fee
- {AdbrixRm.AttrModel} attr: (Optional) Product detail options
onPress={() => { ...
... AdbrixRm.commerceRefund("orderId_12341", productList, 2500.00, eventAttr);
// or
AdbrixRm.commerceRefund("orderId_12341", productList, 2500.00); }}
Search for products
Analyze events in which users search for products.
We deliver product information included in the following search results.
- {string} keyword: Word used in search
- {AdbrixRm.ProductModelList} productList : List of ProductModels
- {AdbrixRm.AttrModel} attr: (Optional) Product detail options
onPress={() => { ...
... AdbrixRm.commerceSearch("your_key_word", productList, eventAttr);
// or
AdbrixRm.commerceSearch("your_key_word", productList); }}
Share product
Analyze events in which users share product information.
We communicate shared product information such as:
- {AdbrixRm.SharingChannel} channel : Sharing Channel
- {AdbrixRm.ProductMoodel} : Shared product
- {AdbrixRm.AttrModel} attr: (Optional) Product detail options
onPress={() => { ...
... AdbrixRm.commerceShare(AdbrixRm.SharingChannel.KAKAOTALK, product, eventAttr); // or
AdbrixRm.commerceShare(AdbrixRm.SharingChannel.KAKAOTALK, product); }}
View product list
Analyze events in which users view product lists.
We deliver the following product information you have viewed.
- {AdbrixRm.ProductModelList} productList: (Required) Products included in the searched list
- {AdbrixRm.AttrModel} attr: (Optional) Detailed options in the list
onPress={() => { ...
... AdbrixRm.commerceListView(productList, eventAttr); // or
AdbrixRm.commerceListView(productList); }}
View shopping cart
Analyze events in which users view their shopping carts.
We deliver the following product information you have viewed.
- {AdbrixRm.ProductModelList} productList: (Required) Products in the viewed shopping cart
- {AdbrixRm.AttrModel} attr: (Optional) Detailed options in the list
onPress={() => { ...
... AdbrixRm.commerceCartView(productList, eventAttr); // or
AdbrixRm.commerceCartView(productList); }}
Enter payment information
Analyze events where users enter payment information.
onPress={() => {
...
...
AdbrixRm.commercePaymentInfoAdded(eventAttr); // or
AdbrixRm.commercePaymentInfoAdded(); }}
Game event analysis
Analyze game-related events (tutorials, stages, etc.) that occur in the app.
The types of game events provided by DFINERY (Adbrix) are as follows.
- Tutorial completed
- character generation
- Stage completed
- Level achieved
Tutorial completed
Analyze tutorial completion events that occur in the app.
- {boolean} isSkip: Whether completion is through skipping.
- {AdbrixRm.AttrModel} attr: (Optional) Detailed options
onPress={() => { ...
... AdbrixRm.gameTutorialCompleted(true, eventAttr);
// or
AdbrixRm.gameTutorialCompleted(true); }}
character generation
Analyze character creation events that occurred in the app.
onPress={() => { ...
... AdbrixRm.gameCharacterCreated(eventAttr); // or
AdbrixRm.gameCharacterCreated(); }}
Stage completed
Analyze stage completion events that occur in the app.
- {string} stageName: Completed stage name
- {AdbrixRm.AttrModel} attr: (Optional) Detailed options
onPress={() => { ...
... AdbrixRm.gameStageCleared("stage1-1", eventAttr); AdbrixRm.gameStageCleared("stage1-1"); }}
Level achieved
Analyze level achievement events that occurred in the app.
- {number} level: Achieved level (1~10000)
onPress={() => { ...
... AdbrixRm.gameLevelAchieved(25, eventAttr);
// or AdbrixRm.gameLevelAchieved(25, eventAttr); }}