Reliable Targets (iOS only)

The identifier associated with each view in your app is the concatenation of the list of its ancestors in the React Native tree view.

This means that if you have the following component:

const basicComponent = () => {
  return (
    <View>
      <Text>Hello world!</Text>
      <TextInput placeholder="Enter your name" />
    </View>
  );
};

You may always want to use the same id for this component, even if you publish a new version of the app in which it has been moved in the tree view.

Having a reliable target for a view or a container of views enables the analysis of data across various Snapshots from different dates and versions, including layouts or different A/B testing variations.

Here are examples of how the reliable targets feature can be used:

• Tracking elements that can dynamically move on a page (e.g., Customizable profile page).
• Tracking elements that you want to monitor from one version to another, even if their position changes (e.g., Moving carousel position from top to bottom).
• Tracking elements during A/B testing (e.g., Testing new and old Product page on the same version).
• Tracking elements that can be used on multiple pages (e.g., Search bar).
• Ensuring that a call to action has a unique identifier wherever it appears on a screen (e.g., AddtoCart button).

The Contentsquare React Native SDK provides a CSReliableTarget component that can be used to wrap the component you want to track reliably.

CSReliableTarget accepts a mandatory name prop that allows the identification of the component to track.

const componentWithReliableTarget = () => {
  return (
    <CSReliableTarget name="MyComponentTracked">
      <View>
        <Text>Hello world!</Text>
        <TextInput placeholder="Enter your name" />
      </View>
    <CSReliableTarget>
  );
};