mobile-sdk-react-native

An SDK to implement Symplify conversion

Installation

To minimze the impact on the user experience we are using background task to check for new tests and consume the outcome of tests. We are expecting that expo-background-task is installed to do this, if not, install it in your project.

Expo

npx expo install @symplify-conversion/mobile-sdk-react-native
# if not already using expo-background-task install it explicitly
npx expo install expo-background-task

Bare react native

npx install @symplify-conversion/mobile-sdk-react-native
# if not already using expo-background-task install it explicitly, example is with help from expo
npx expo install-expo-modules@latest
npx expo install expo-background-task

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.

Options:

| Option | Default | Description | |----------|----------|----------| | siteId | undefined | Enter website id of the website in the Symplify UI dashboard | | logLevel | info | Accepted values: "debug", "info", "warn", "error", "disabled" | | trackingEnabled | true | Useful if consent is needed before starting to track the test. Set to true after consent. | | clearStorage | false | Set to true to get a brand new session of tracking. Useful for testing different variations and triggering goals on new userid | | foregroundConfigIntervalSeconds | undefined | Fetch new config at interval when app is in foreground, useful for debugging | | foregroundConsumeIntervalSeconds | 5 | Submit pending interactions when app is in foreground at interval. Useful when app is not paused or closed by users. | | debugBackgroundFetchURL | undefined | This URL will be called with fetch in the background together with regular config update and submit of interaction, useful for debugging. Setup with a webhook recieving site. | | userCountry | undefined | Set the current users country to be able to filter on country in the dashboard. Maximum 20 characters. | | userCountryCode | undefined | Set the current users country code to be able to filter on country code in the dashboard. Maximum 2 characters. |

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. The name on the SymVariation needs to exactly match the name in the Symplify UI dashboard.

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, see the goals for the A/B test and use the provided ID).
• 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.

License

MIT

Made with create-react-native-library

Release notes

1.0.1

• Added "disabled" option for logLevel
• Allow for trackingEnabled to be toggled without recreating the component
• Added information to readme