vwo-insights-react-native-sdk/README.md

VWO Insights helps you analyze user behavior in your application based on interactions such as application launch, taps, scrolls, and flings. By attributing these actions to critical business events like purchases and sign-ups (which are considered conver

# VWO Insights React Native SDK
## Deeply understand user experiences on React Native apps

VWO Insights helps you analyze user behavior in your application based on interactions such as application launch, taps, scrolls, and flings. By attributing these actions to critical business events like purchases and sign-ups (which are considered conversions), VWO Insights enables you to identify why users might not be converting. This tool is essential in the research stage of experience optimization, providing insights into what users are (or are not) doing in your application and helping to determine why.

Understanding user behavior through VWO Insights is the foundation of an effective optimization program, guiding you towards data-backed ideation and testing without relying on assumptions.

## How it benefits you?
- **Rapid Issue Identification:** Use session replays to quickly discover and resolve issues, reducing the time between problem identification and solution implementation.
- **Analyzing User Drop-Offs:** Understand at which points users are leaving your app and the possible reasons behind their decisions, helping refine the user journey.
- **Enhancing Feature Adoption:** Track how new features are used by actual users, and use insights to improve feature integration and user interface design.
- **Detecting UX Friction:** Identify friction points in critical user journeys like onboarding or purchasing processes to streamline actions and reduce user frustration.
- **Generating A/B Testing Ideas:** Analyze user behavior to come up with informed hypotheses for A/B testing, ensuring that tests are focused on areas with maximum impact potential.

## Features
- **Session Recordings:** Capture every user interaction within your React Native app to visually identify where users succeed or struggle, providing the context needed for precise enhancements.
- **Heatmaps:** Gain visual insights into where users are most engaged on your app screens, helping identify popular areas and elements that don't receive intended interactions.
- **Conversion Funnels:** Track the user journey from entry to conversion, pinpointing where potential customers drop off and understanding what drives conversions.

## How to use

### Android
After installing the SDK, initialize it within the onCreate() function of the MainApplication.java class. Copy the code below and replace the "ACCOUNT_ID" and "SDK_KEY" with the appropriate values from the dashboard.
```Java
import com.vwo.insights.VWOInsights;
import com.vwo.insights.events.VWOLog;
import com.vwo.insights.exposed.Integrations;
import com.vwo.insights.exposed.models.ClientConfiguration;
import com.vwo.insights.exposed.IVwoInitCallback;
import com.vwoinsightsreactnativesdk.VwoInsightsReactNativeSdkModule;


public class MainApplication extends Application implements ReactApplication {
    //..other code
    
    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this,  false);

        VWOLog.INSTANCE.setLogLevel(VWOLog.ALL);

        VwoInsightsReactNativeSdkModule.init(this, ACCOUNT_ID, SDK_KEY, "");

        //..other code    
    }
    //..other code
}
```

### React native implementation
In App.tsx file please add code below. Please replace the "ACCOUNT_ID" and "SDK_KEY" with the appropriate values from the dashboard.
```javascript
import {config} from 'vwo-insights-react-native-sdk';

React.useEffect(() => {
    config(ACCOUNT_ID, SDK_KEY, '')
}, []);

```
#### Set Navigator Observer
```javascript
import { NavigationContainer } from '@react-navigation/native';
import { setScreenName } from 'vwo-insights-react-native-sdk';

<NavigationContainer
          onStateChange={(state) => {
            setScreenName(state)}}>										
	<Stack.Navigator>
	//.. screens
	</Stack.Navigator>
</NavigationContainer>

```
#### Start Recording

If you want to start recording as soon as the application launches, start the session recording during the SDK initialization in App.tsx file.

```javascript
import { config, startRecording } from 'vwo-insights-react-native-sdk';

React.useEffect(() => {
    // initialization in ios
    config(ACCOUNT_ID, SDK_KEY, '')

    // Auto start after lunch in both platform Android & ios.
    startRecording()
}, []);
```
If you want to start recording on press of a button.

```javascript
import { startRecording } from 'vwo-insights-react-native-sdk';
// on button Click Event
onPress =() => {
    startRecording()
}
```
For more detailed usage instructions, please refer to our [Developer Documentation](https://developers.vwo.com/reference/mobile-insights-introduction).

## Support
For any support queries or technical assistance, please contact our support team at [support@vwo.com](mailto:support@vwo.com)

## License
[Apache License, Version 2.0](https://github.com/wingify/insights-react-native/blob/master/LICENSE) Copyright 2024 Wingify Software Pvt. Ltd.