SDK Integration
This document provides steps for integrating your application with Hackle React Native SDK. SDK Integration is a must in order to use the functions we provide.
Follow these steps to quickly integrate the SDK:
- Add Dependencies
- Initialize the SDK
- User Configuration
- Event Tracking
- A/B Testing
- Feature Flags
1. Add Dependencies
Think of this step as importing and installing our SDK into your codebase. To use our Hackle services add the following dependency code and import our SDK.
npm install --save @hackler/react-native-sdk
react-native link
cd ios
pod install
yarn add @hackler/react-native-sdk
react-native link
cd ios
pod install
Rebuild your app after Step 1
React Native SDK includes Android and iOS SDKs.
The app that is being tested has to be newly built in order to complete the Step 1.
2. Initialize the SDK
Once you have imported the dependencies, in order to start using the Hackle SDK you must initialize the SDK. During this step, we get the information needed for SDK integration from the Hackle Server and store it in the SDK.
You need to pass the SDK key to createInstance()
to create a HackleReactNativeSDKClient
and pass it on to the HackleProvider
that wraps the React application.
- The SDK key can be found in the SDK integration in the dashboard of Hackle service.
- Communication for data synchronization with the Hackle server is carried out during the application initialization stage. Typically, this only takes a few milliseconds. Rendering begins immediately after synchronization is complete.
import { createInstance, HackleProvider } from "@hackler/react-native-sdk";
// Enter the SDK Key in the YOUR_APP_SDK_KEY.
const hackleClient = createInstance("YOUR_APP_SDK_KEY");
const App: () => React$Node = () => {
return (
<HackleProvider hackleClient={hackleClient}>
<YourApp />
</HackleProvider>
);
};
Add Settings
You can add additional settings in SDK initialization
import { createInstance, HackleProvider } from "@hackler/react-native-sdk";
// intialize with configs
const config = {
debug: true
};
const hackleClient = createInstance("YOUR_APP_SDK_KEY", config);
const App = () => {
return (
<HackleProvider hackleClient={hackleClient}>
<YourApp />
</HackleProvider>
);
};
key | function | default value | supported version |
---|---|---|---|
exposureEventDedupIntervalMillis | Removes consecutive exposure events for the same A/B test, feature flag from the same user Min value: 1000 (1s) Max value: 3600000 (1h) | -1 (Do not deduplication) | 3.3.1+ |
debug | Debug logs for all functions can be viewed from the the console, and send events immediately | false | 3.4.1+ |
pollingIntervalMillis | You can periodically update the information you set in the dashboard. Min value : 60000 (60s) | -1 (Do not update periodically) | 3.6.0+ |
3. User Configuration
You can configure user information in the SDK.
Setting User ID
If the user logs in, you can call setUserId
to set the ID of the logged-in user.
- You only need to set it once when the user logs in.
- For users who are already logged in, you can call it when retrieving their login information.
const userId = ... // ID of the logged-in user (e.g., member number, user ID)
hackleClient.setUserId(userId);
Setting User Properties
You can use user properties such as email address, location, age, and membership level. You can use the setUserProperty and setUserProperties methods to set user properties.
import { PropertyOperationsBuilder } from "@hackler/react-native-sdk"
const operations = new PropertyOperationsBuilder()
.set("age", 42)
.set("grade", "GOLD")
.build();
hackleClient.updateUserProperties(operations);
Resetting User Configuration on Logout
If the user logs out, you can call resetUser
to reset the previously set user information. The following information will be reset:
- User ID
- User properties
hackleClient.resetUser();
4. Event Tracking
You can send user actions as events. The sent events are used for A/B test analysis, data analysis, etc. For example, if a user performs a purchase action, you can send an event as follows:
// Collecting an event
const track = useTrack()
const event = { key: "purchase" }
<Button onClick={() => track(event)}>๊ตฌ๋งค</Button>
// Collecting an event with properties
const track = useTrack()
const event = {
key: "purchase",
properties: {
amount: 4200,
pay_method: "CARD",
is_discount: false
}
}
<Button onClick={() => track(event)}>purchase</Button>
Viewing Sent Events
You can view the sent events in the Event Management menu on the dashboard. It typically takes around 60 seconds for the events to appear on the dashboard after being sent.
5. A/B Testing
To implement A/B testing, you can distribute users into test groups and write logic based on the assigned group. You can achieve this by using the HackleExperiment
component or the useVariation
hook, where you pass the experiment key to retrieve the distribution result.
Experiment Key: A unique identifier for each A/B test. It is automatically assigned when creating an A/B test.
function App() {
return (
// Determines the test group to be exposed to the user in an A/B test with variation key 42.
// If unable to determine, it returns test group A.
<HackleExperiment experimentKey={42}>
<HackleVariation variation={"A"}> // logic for assigned group
<AwesomeFeature />
</HackleVariation>
<HackleVariation variation={"B"}>
<SuperAwesomeFeature />
</HackleVariation>
</HackleExperiment>
)
}
function App() {
// Determines the test group to be exposed to the user in an A/B test with variation key 42.
// If unable to determine, it returns test group A.
const variation = useVariation(42)
// logic for assigned group
if (variation === "A") return <AwesomeFeature />
if (variation === "B") return <SuperAwesomeFeature />
return <AwesomeFeature />
}
Viewing Distribution Results
You can check the distribution results in the Real-Time Status tab on the A/B test's details page. It typically takes around 60 seconds for the distribution results to appear on the dashboard after being distributed.
6. Feature Flags
To implement feature flags where you can write different logic based on the on/off state, you can use the HackleFeature
component or the useFeature
hook. By passing the feature flag key, you can retrieve the on/off status.
Feature Flag Key: A unique identifier for each feature flag. It is automatically assigned when creating a feature flag.
function App() {
return (
// Determines the user's status in a feature flag with key 42.
// If unable to determine, it returns false (off state).
<Feature featureKey={42}>
{(featureOn) =>
featureOn ? (
<SuperAwesomeFeature /> // On state logic
) : (
<AwesomeFeature /> // Off state logic
)
}
</Feature>
)
}
function App() {
// Determines the user's status in a feature flag with key 42.
// If unable to determine, it returns false (off state).
const featureOn = useFeature(42)
return (
<>
{
featureOn ? (
<SuperAwesomeFeature /> // On state logic
) : (
<AwesomeFeature /> // Off state logic
)
}
</>
)
}
Updated 6 months ago