SDKs
Help centerCommunityDevelopersAcademyStatus

Connect React Native SDK public API reference

Suggest Edits

You can instrument the Connect React Native SDK to capture and log custom data for your application such as screen view names, custom events, and layouts. The custom instrumentation is done by calling the specific Connect APIs. Follow the examples provided here to enable custom instrumentation.

Log screen view name (Type 2)

Add the following syntax to log loading a new screen view name or unloading a screen view name. These logs are captured as a Connect type 2 message object.

logScreenViewContextLoad(logicalPageName, referrer)
logScreenViewContextUnload(logicalPageName, referrer)

Where

  • logicalPageName is the page name or title, for example, Login. The value cannot be empty.
  • referrer is the page name or title that loads the logicalPageName. The value can be empty.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

try {
  var result1 = await Connect.logScreenViewContextLoad("TestPage", null);
  console.log("logScreenViewContextLoad", result1);
  var result2 = await Connect.logScreenViewContextUnload("TestPage", null);
  console.log("logScreenViewContextUnload", result2);
  var result3 = await Connect.logScreenViewContextLoad("TestPage2", "TestPage");
  console.log("logScreenViewContextLoad", result3);
  var result4 = await Connect.logScreenViewContextUnload("TestPage2", "TestPage");
  console.log("logScreenViewContextUnload", result4);
} catch (e) {
  console.error(e);
}

Set current screen name (Type 2)

Add the following syntax to update the current application page name.

setCurrentScreenName:(NSString*)logicalPageName resolver

Where

  • logicalPageName is the page name or title, for example, Login View Controller. The value cannot be empty.

A boolean value is returned to denote if the screenname was saved or not.

Example:

import React, { Component } from "react";
import { Container, Header, Title, Content, Button, Left, Right, Body, Text } from "native-base";
import styles from "./styles";

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

class Header1 extends Component {
 render() {
   Connect.setCurrentScreenName("HomePage");
   return (
     <Container style={styles.container}>
       <Header>
         <Left />
         <Body>
           <Title>Header</Title>
         </Body>
         <Right />
       </Header>

       <Content padder>
         <Button onPress={() => this.props.navigation.goBack()}>
           <Text>Back</Text>
         </Button>
       </Content>
     </Container>
   );
 }
}
export default Header1;

Capture event listener actions & IDs (Type 4)

iOS & Android automatically capture click events. Check the configuration steps and update your config files accordingly. These logs are captured as a Connect type 4 message object.

📘

Note:

Automatic click ID capture is only supported on iOS.

With how react-native renders dom elements to native components, users often click event bubbles up from the text inside the button or the view directly outside. Therefore, you can add an accessibilityLabel property to the surrounding elements and use it as the ID in the Connect dashboard.

<View accessibilityLabel={"lets_go"} style={{ marginBottom: 80 }}>
  <Button
    accessibilityLabel={"lets_go"}
    style={{ backgroundColor: "#6FAF98", alignSelf: "center" }}
    onPress={() => this.props.navigation.openDrawer()}
  >
    <Text accessibilityLabel={"lets_go"}>Lets Go!</Text>
  </Button>
</View>

Log event (Type 4)

Add the following syntax to log an event listener. The event is captured as a Connect type 4 message object.

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

logClickEvent(nodeHandler)

Where

  • nodeHandler Native node handle for a component from React Native.

Example:

<ListItem button onPress={(evt) => {Connect.logClickEvent(findNodeHandle(evt.target)); this.toggleSwitch2();}}>
  <CheckBox
    color="red"
    checked={this.state.checkbox2}
    onPress={(evt) => {Connect.logClickEvent(findNodeHandle(evt.target)); this.toggleSwitch2();}}
  />
  <Body>
    <Text>Daily Stand Up</Text>
  </Body>
</ListItem>

Log custom event (Type 5)

Add the following syntax to log a custom event. The custom event is captured as a Connect type 5 message object.

logCustomEvent(eventName, values, level)

Where

  • eventName is the name of the event to be logged. This event name appears in the posted json.
  • values are the additional key-value pairs to be logged with the message.
  • level is the set log level for that event.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

try {
  var dict = { shopping: "done" };
  var result = await Connect.logCustomEvent("ShopClick", dict, 3);
  console.log("logCustomEvent", result);
} catch (e) {
  console.error(e);
}

Log exception event (Type 6)

All UI and event errors are captured and logged automatically. But for try catches you need to add the following syntax to log an exception event. The message of the error/ exception to be logged appears in the posted JSON. 

logExceptionEvent(message, stackInfo, unhandled)

Where

  • message message of the error/exception to be logged; this will appear in the posted json.
  • stackInfo is the stack trace to be logged with the message.
  • unhandled whether exception is unhandled.
  • Boolean is the value returned whether it was able to log the exception event.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

try {
  var z =20/0; 
} catch (e) {
  var result = await Connect.logExceptionEvent(e.message, JSON.stringify(e), true);
  console.log("logExceptionEvent", result);
  console.error(e);
}

Capture layout (Type 10)

Add the following syntax to capture the layout of the page. The layout is captured as a Connect type 10 message object.

logScreenLayout(screenViewName)

Where screenViewName is the screen view name used for the page in the replay.

📘

Note:

Add this during the componentDidMount lifecycle event which is triggered when everything is displayed on the page.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

class Home extends Component {
  componentDidMount() {
    Connect.logScreenLayout("Home");
  }

Capture gestures (Type 11)

Gestures are captured automatically as a Connect type 11 message object.

Log geolocation (Type 13)

Add the following syntax to capture geolocation. Geolocation is captured as a Connect type 13 message object.

logLocation()
logLocationWithLatitudeLongitude(latitude, longitude, level)

Where

  • latitude is the geographic latitude of the user.
  • longitude is the geographic longitude of the user.
  • level is the monitoring level of the event.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

try {
  var result1 = await Connect.logLocation();
  console.log("logLocation", result1);
  var result2 = await Connect.logLocationWithLatitudeLongitude(37.7749, 122.4194, 2);
  console.log("logLocationWithLatitudeLongitude", result2);
} catch (e) {
  console.error(e);
}

Log signal (Type 21)

Add the following syntax to log a signal event. The signal event is captured as a Connect type 21 message object.

logSignal(values, level)

Where

  • values are the additional key-value pairs to be logged with the message.
  • level is the set log level for that event.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

try {
  const signalObj = {
    "behaviorType": "orderConfirmation",
    "orderId": "145667",
    "orderSubtotal": 10,
    "orderShip": 10,
    "orderTax": "5.99",
    "orderDiscount": "10%",
    "currency": "USD",
  };
  var result = await Connect.logSignal(signalObj, 1);
  console.log("logSignal", result);
} catch (e) {
  console.error(e);
}

Dynamically configure key values for Library

Set boolean value for a key

Add the following syntax to update the Boolean value setting for a key in the EOCore or Tealeaf modules.

setBooleanConfigItemForKey(key, value, moduleName)

Where

  • key is the key for which you need to update the value in configuration settings.
  • value is the value you need to provide for the key.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

📘

Note:

Set this value before you start the library.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const ConnectTealeaf = NativeModules.RNCxa;

var moduleNameEOCore = 'EOCore';
var moduleNameTealeaf = 'Tealeaf';
// This will update the GetImageDataOnScreenLayout config.
Connect.setBooleanConfigItemForKey("GetImageDataOnScreenLayout", true, moduleNameTealeaf);

Get boolean value for a key

Add the following syntax to get the boolean value from a key in a certain module.

getBooleanConfigItemForKey(key, moduleName)

Where

  • key is the key required to get the value in configuration settings.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties, or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

try {
  var result = await Connect.getBooleanConfigItemForKey("DoPostAppComesFromBackground", true, 'EOCore');
  console.log("getBooleanConfigItemForKey", result);
} catch (e) {
  console.error(e);
}

Set string value

Add the following syntax to update the String value setting for a key in the EOCore or Tealeaf modules.

setStringItemForKey(key, value, moduleName)

Where key

  • key is the key for which you need to update the value in configuration settings.
  • value is the value you need to provide for the key.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

📘

Note:

Set this value before you start the library.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

var moduleNameEOCore = 'EOCore';
var moduleNameTealeaf = 'Tealeaf';
// This will update the appkey for payload to use.
Connect.setStringItemForKey("PostMessageUrl", "http://collector.com/collector/collectorPost", moduleNameTealeaf);

Get string value for a key

Add the following syntax to get the string value from a key in a certain module.

getStringItemForKey(key, moduleName)
  • key is the key required to get the value in configuration settings.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties, or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

try {
  var result = await Connect.getStringItemForKey("MessageVersion", 'EOCore');
  console.log("getStringItemForKey", result);
} catch (e) {
  console.error(e);
}

Set Number value for a key

Add the following to update the number value setting in the EOCore or Tealeaf modules.

setNumberItemForKey(key, value, moduleName)
  • key is the key for which you need to update the value in configuration settings.
  • value is the value you need to provide for the key.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

📘

Note:

Set this value before you start the library.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;
 
var moduleNameEOCore = 'EOCore';
var moduleNameTealeaf = 'Tealeaf';
// This will update the appkey for payload to use.
Connect.setNumberItemForKey("PostMessageUrl", "http://collector.com/collector/collectorPost", moduleNameTealeaf);

Get number value for a key

Add the following syntax to get the number value from a key in a certain module.

getNumberItemForKey(key, moduleName)

Where

  • key is the key required to get the value in the configuration settings.
  • moduleName is the name of the module to be updated. For EOCore settings, use 'EOCore,' which can be found in EOCoreBasicConfig.plist, EOCoreBasicConfig.properties, or EOCoreAdvancedConfig.json files and 'Tealeaf' for Tealeaf, which can be found in the TealeafBasicConfig.plist, TealeafBasicConfig.properties, or TealeafAdvancedConfig.json files.

Example:

// Add import
import {NativeModules, findNodeHandle} from 'react-native';
const Connect = NativeModules.RNCxa;

try {
  var result = await Connect.getNumberItemForKey("PostMessageLevelCellular", 'EOCore');
  console.log("getNumberItemForKey", result);
} catch (e) {
  console.error(e);
}

Updated 7 months ago