Smartech

Product Experience

Install Smartech React Native Nudges plugin using the npm package manager.

npm install --save [email protected]

For Android SDK

  1. Complete Basic Setup
  2. Follow the Android Product Experience integration steps to setup the product experience.
  3. Demarcating Screens
    If multiple screens in your app use a common Activity, you may choose to separate screens by Views/Fragments by following the steps

📘

Support for react-navigation

Please note that Product Experience SDK currently supports demarcating screens only when you use react-navigation dependency. Please reach out to us if you face issues, using other dependencies.

You can mark a screen by using the following methods present in HanselRn module:

  • onSetScreen(screenName) - You can use this method to set a screen. Please note that when you explicitly set a screen, Product Experience SDK looks for this screen name to show any nudges created on this screen.

  • onUnsetScreen() - You can use this method to unset a screen. Please note that when you unset a screen, Product Experience SDK does not consider the rest of the screens in the Activity to be part of the previous screen name, which may have been set using onSetScreen() method.

👍

Unsetting a screen post setting a screen

Please ensure that you call onUnsetScreen() in conjunction with onSetScreen()

  • onBackButtonPressed() - Please ensure that you implement this method, on handling the back button, to ensure that all nudges work seamlessly when back button is pressed.
    You will need to call onUnsetScreen() when onBackButtonPressed() returns false along with your code. Do nothing when this return true.

Integration steps

Step 1: Please add "HanselBaseComponent.js" class in your react code.

class HanselBaseComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hanselScreenName: ''
    };
    this.setHanselScreenName = this.setHanselScreenName.bind(this);
  }
  componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener('didFocus', () => {
      NativeModules.HanselRn.onSetScreen(this.state.hanselScreenName);
    });
    this.blurListener = navigation.addListener('didBlur', () => {
      NativeModules.HanselRn.onUnsetScreen();
    });
  }
  componentWillUnmount() {
     this.focusListener.remove();
     this.blurListener.remove();
     NativeModules.HanselRn.onUnsetScreen();
     //Your code here
  }
  setHanselScreenName(screenName) {
    this.setState({
      hanselScreenName: screenName
    });
  }
}

Step 2: Modify the components on which you are planning to add the Product Experience by following the below mentioned steps:

  • Make your component class extend from HanselBaseComponent class
  • Add the following line in your componentWillMount method:
    this.setHanselScreenName('');
  • In case you have implemented componentDidMount method in your component class, add a call to super.componentDidMount()
  • In case you have implemented componentWillUnmount method in your component class, add a call to super.componentWillUnmount()

So, your final class will look something like this:

class MyComponent extends HanselBaseComponent {
        //Other methods here
        componentWillMount(){
            //Your code here
        this.setHanselScreenName('<Your screen name here>');    
        }

class, add a call to super.componentDidMount()
        componentDidMount(){
            super.componentDidMount();
            //Your code here
        }

class, add a call to super.componentWillUnmount()
        componentWillUnmount(){
            super.componentWillUnmount();
            //Your code here
        }
}

For iOS SDK

  1. Complete Basic Setup
  2. Follow the iOS Product Experience integration steps to setup the product experience.
  3. Demarcating Screens
    If multiple screens in your app you may choose to separate screens by following the below steps.

📘

Support for react-navigation

Please note that Product Experience SDK currently supports demarcating screens only when you use react-navigation dependency. Please reach out to us if you face issues, using other dependencies

You can mark a screen by using the following methods present in HanselRn module:

onSetScreen(screenName) - You can use this method to set a screen. Please note that when you explicitly set a screen, Product Experience SDK looks for this screen name to show any nudges created on this screen.

onUnsetScreen() - You can use this method to unset a screen. Please note that when you unset a screen, Product Experience SDK does not consider the rest of the screens in the Activity to be part of the previous screen name, which may have been set using onSetScreen() method.

👍

Unsetting a screen post setting a screen

Please ensure that you call onUnsetScreen() in conjunction with onSetScreen()

Integration steps
Step 1: Please add "HanselBaseComponent.js" class in your react code.

class HanselBaseComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hanselScreenName: ''
    };
    this.setHanselScreenName = this.setHanselScreenName.bind(this);
  }
  componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener('didFocus', () => {
      NativeModules.HanselRn.onSetScreen(this.state.hanselScreenName);
    });
    this.blurListener = navigation.addListener('didBlur', () => {
      NativeModules.HanselRn.onUnsetScreen();
    });
  }
  componentWillUnmount() {
     this.focusListener.remove();
     this.blurListener.remove();
  }
  setHanselScreenName(screenName) {
    this.setState({
      hanselScreenName: screenName
    });
  }
}

Step 2: Modify the components on which you are planning to add the Product Experience by following the below mentioned steps:

  • Make your component class extend from HanselBaseComponent class
  • Add the following line in your componentWillMount method:
    this.setHanselScreenName('');
  • In case you have implemented componentDidMount method in your component class, add a call to super.componentDidMount()
  • In case you have implemented componentWillUnmount method in your component class, add a call to super.componentWillUnmount()

So, your final class will look something like this:

class MyComponent extends HanselBaseComponent {
        //Other methods here
        componentWillMount(){
            //Your code here
        this.setHanselScreenName('<Your screen name here>');    
        }

class, add a call to super.componentDidMount()
        componentDidMount(){
            super.componentDidMount();
            //Your code here
        }

class, add a call to super.componentWillUnmount()
        componentWillUnmount(){
            super.componentWillUnmount();
            //Your code here
        }
}

Updated 26 days ago


Product Experience


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.