@symplify-conversion/mobile-sdk-react-native NPM

mobile-sdk-react-native

An SDK to implement Symplify conversion

Installation

npm install @symplify-conversion/mobile-sdk-react-native

Usage

Add the base component SymplifyProvider to your app. This will provide the context for the SDK and you will be able to use the Symplify components. Here's how you can use it:

import {SymplifyProvider} from "@symplify-conversion/mobile-sdk-react-native";

function AppWrapper() {
  return (
    <SymplifyProvider
      siteId="5620620">
      <App />
    </SymplifyProvider>
  );
}

The siteId is required and needs to match the website ID in the Symplify UI.

Components

<SymProject name="Symplify DEMO sst" screen={route?.name}>
    <SymVariation name="Original">
      /* 
        Your Control/Original code.
        Example;
        <Text>Original header text</Text>
      */
    </SymVariation>

    <SymVariation name="Variation 1">
      /* 
        Your variation code.
        Example;
        <Text>New possilby better header text</Text>
      */
    </SymVariation>
    
    <SymVariation name="Default">
      /* 
        Fallback code. This should most likely be the same as for the Original.
        The difference is that users who get the Default won't be part of the statistics for the test.
        Example;
        <Text>Original header text</Text>
      */
    </SymVariation>
</SymProject>

Here we use a SymProject component, which means if we have more then one project we'll specify which project to use. We place two variations and a fallback (Default) in the project. Which variation that will be used/shown is randomized for each user.

If the project has less than 100% (total) allocation and the user is randomized to not be part of the project the Default is used/shown. Place your fallback code in the Default.

A visit will automatically be registered for a user that has been allocated a variation for a project. For all other views you will need to add a SymAppView component to register a visit (app view event).

View event

This should be implemented on all screen views. The property 'screen' is optional but populating that will enable filtering the statistics on that.

<SymAppView screen={route.name}/>

Goal event

To register a goal you need to populate the SymAppView with eventId and trigger properties. The property 'screen' is optional but populating that will enable filtering the statistics on that.

<SymAppView eventId={59442} trigger={Trigger.PRESS} screen={route.name}>
  <Text>I will send a app goal event with id 59442 on press</Text>
</SymAppView>

eventId = The event id (Configured in your project in the Symplify UI)
trigger = The trigger that will send the event. This can be either Trigger.PRESS (runs on press) or Trigger.VIEW (runs on render). Default is Trigger.VIEW so if you want to trigger on render there is no need to set this property.

In this case the SymAppView will send an event with eventId 59442 when the text is pressed. Please note - if you add a Pressable component inside the SymAppView, then this component might stop the events from the SymAppView to be sent.