This document provides steps for integrating your React Native App via the Hackle React Native SDK. SDK Integration is a must in order to use the functions we provide.

• Step 1: Add Dependencies
• Step 2: Initialize the SDK
• Step3 : A/B test, Feature Flag
• Step4 : Send customer event

Step 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.

Step 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_BROWSER_SDK_KEY.
const hackleClient = createInstance("YOUR_APP_SDK_KEY");

const App: () => React$Node = () => {
  return (
        <HackleProvider hackleClient={hackleClient}>
          <YourApp />
        </HackleProvider>
    );
};

Find SDK Key

The SDK key can be found in the SDK integration in the dashboard of Hackle. Copy and use the App SDK Key.

Step3. A/B test, Feature Flag

A/B test

Before running an A/B test, you must distribute users to the test group and create the logic corresponding to each test group.
User distribution can then be carried out through the hackle SDK.

📘

Test Group

The test group refers to the existing one (control group) and improvement one (treatment group) to be tested, and there may be more than one treatment group. You can configure in the dashboard and for information on how to manage test groups, visit see the document A/B setting.

useVariation or useLoadableVariation

You can use the components provided by Hackle or use the Hooks API to distribute users to specific test and receive distribution results. The distribution must pass the test key.

Input Experiment key and user identifier to distribute users and receive results. You can implement logic by test group afterwards.

The experiment key is a unique number for each A/B test and can be found on the dashboard within the Hackle service.

The example code below inputs the experiment key 42.

function App() {
  return (
        // Determine which test group to expose to the user in the A/B test with the test key of 42.
        // Returns test group A if the test group can not be decided.
    <HackleExperiment experimentKey={42}> 
      <HackleVariation variation={"A"}> // Logic for Assigned Group
        <AwesomeFeature />
      </HackleVariation>
      <HackleVariation variation={"B"}>
        <SuperAwesomeFeature />
      </HackleVariation>
    </HackleExperiment>
  )
}

function App() {
  return (
// Determine which test group to expose to the user in the A/B test with the test key of 42.
// Returns test group A if the test group can not be decided.
    <HackleExperiment experimentKey={42}>
      {(variation) => {
        switch (variation) { // Logic for Assigned Group
          case "A":
            return <AwesomeFeature />
          case "B":
            return <SuperAwesomeFeature />
          default:
            return <AwesomeFeature />
        }
      }}
    </HackleExperiment>
  )
}

function App() {
// Determine which test group to expose to the user in the A/B test with the test key of 42.
// Returns test group A if the test group can not be decided.
  const variation = useVariation(42)
  
  // Logic for Assigned Group
  if (variation === "A") return <AwesomeFeature />
  if (variation === "B") return <SuperAwesomeFeature />
  return <AwesomeFeature />
}

Feature Flag

📘

Feature Flag is supported for SDK version 2.0.0+

If you are using Feature Flag, please apply SDK version 2.0.0 or higher when adding dependencies.y

The feature flags are in the ON state and the OFF state. Different features will be set for each state.
When a user accesses a function with a feature flag applied, the user must be able to receive an on or off state. This status determination can be made via the hackle SDK.

useFeature

You can use the Hooks API provided by Hackle to receive status results for users. The Feature key must be passed and implement logic according to the subsequent state

The Feature key is a unique number for each Feature Flag and can be found on the dashboard within the Hackle service.

The example code below input the Feature key 42.

function App() {
  return (
// Determine which status to expose to the user in the flag with the flag key of 42.
// Returns off state if the state can not be decided. 
    <Feature featureKey={42}>
      {(featureOn) =>
        featureOn ? (
          <SuperAwesomeFeature /> // logic for ON
        ) : (
          <AwesomeFeature /> // logic for OFF
        )
      }
    </Feature>
  )
}

function App() {
// Determine which status to expose to the user in the flag with the flag key of 42.
// Returns off state if the state can not be decided. 
  const featureOn = useFeature(42)
  return (
    <>
    {
      featureOn ? (
        <SuperAwesomeFeature /> // logic for ON
      ) : (
        <AwesomeFeature /> // logic for OFF
      )
    }
    </>
  )
}

Check the exposure results

On the [Dashboard Left Menu Bar] - [A/B Test] or [Feature Flag] page, browse to the detail page for the list of exposed A/B tests or feature flags, and click the Real-Time Exposure tab in the middle of the page to view the distribution results from integrated SDK.

Step 4. Send User Events

The Hackle SDK provides the ability to send user events to the hackle.
At each point where changes in user behavior occur, this feature provides meaningful data about user behavior and allows you to analyze user behavior from those collected data.

track

User events can be sent by passing event keys and user identifiers to the 'track()' method. If necessary, when sending user events, numeric values can be put in 'value' to be sent together.

• You can only put the number type for 'value'

Example

Suppose you have defined an event key called 'purchase' to collect events when the user presses the buy button. At this time, you may want to collect the purchase price together. In this case, you can also receive the purchase amount in 'value'.

/* Example 1: Send event key only */
const track = useTrack()
const event = { key: "purchase" }

<Button onClick={() => track(event)}>purchase</Button>

/* Example 2: Send event keys and numeric values together */
const track = useTrack()
const event = {
  key: "purchase",
  value: 13200
}

<Button onClick={() => track(event)}>purchase</Button>

Example 1 only sends event keys; Example 2 shows a case of putting the purchase amount in 'value' to collect the purchase amount together.

Validate the sending of user events

Verify that user events sent by SDK are being collected successfully.
You can check the real-time event collection status by finding events sent to the SDK in the [left menu bar of dashboards] - [Event Management].