Set up the extension

This page will guide you to set up Mobile Experience Analytics Extension for Contentsquare Product Analytics.

This will supercharge the Product Analytics platform with:

• Powerful Session Replay
• Analysis capabilities of Mobile API Errors and Crashes

This guide assumes that you have already implemented the CSQ SDK for Product Analytics.

1. In Product Analytics, navigate to Account > Manage > Replays & Heatmaps.

1. If this is your first time setting up Session Replay, select the checkbox to accept the terms and conditions.
2. Click Add web or mobile app to launch the setup wizard. There is one configuration per app.
3. Select Mobile as platform.
4. Give your app a name and choose a storage location (US or EU).

1. Set a sampling rate for how many sessions to record.
2. Configure replay settings:
   • App ID: enter the bundle ID of your app (for example, com.companyname.appname).
   • Quality Settings: choose the recording fidelity for Wi-Fi and Cellular connections. The default for both is Medium; keep Cellular equal to or lower than Wi-Fi.
   • User Consent: enable this if your app requires explicit opt-in before recording. See Privacy docs for the opt-in API.

1. Click Save and Continue to finish the wizard.

Error and crash collection is managed separately from the setup wizard. Navigate to Account > Manage > Replays & Heatmaps, click Edit next to your app configuration, then scroll to the relevant section under General Settings:

• Error Capture: toggles for API Errors and Custom Errors.
• Crashes Capture: toggle for Crashes.

Click Save when finished.

The Session Replay feature replays every interaction of your users with your app. To respect the user's right to privacy, the CSQ SDK:

• Masks everything by default
• Allows you to control which part of the user interface is collected via our Masking rules

Although the implementation is done once for both iOS and Android on React Native, the visual appearance of the masking itself will be different for each platform:

Masking rules can be applied in two ways:

1. Through remote masking configuration in the CSQ Console (for admin users): These configurations are managed directly in the Console and take effect for all sessions as soon as the app is restarted or brought to the foreground See How to customize masking rules from the Data Masking tab ↗ in the Help Center.
2. Using public masking APIs in the SDK (for mobile application developers): These configurations require developer implementation and will be applied only after the mobile app has gone through its release cycle.

Masking rules set via the CSQ Console or the public APIs are applied according to different priorities, as described below. The SDK determines whether a view is masked by evaluating the rules in the order specified below. Once a rule is triggered, the state is set, and subsequent rules are not applied:

All components are initially masked by default. To modify this default masking state, use the setDefaultMasking API, preferably within a useEffect in the root file (such as App.js). This ensures proper initialization and handling when the component mounts.

If you choose to unmask the entire app using the setDefaultMasking API, be aware that you will need to individually mask all personal data within the app. Additionally, ensure that you consistently mask personal data on new screens in the future, if necessary.

import { CSQ } from '@contentsquare/react-native-bridge';

useEffect(() => {
  CSQ.setDefaultMasking(false); // Unmask all content
}, []);

Use <CSQMask isSessionReplayMasked={true}> (default) to mask or {false} to unmask all children components.

In this example below, all children views inside <CSQMask> will follow the rule of the closest parent prop isSessionReplayMasked.

import { CSQMask } from '@contentsquare/react-native-bridge';

// Masks all child components
<CSQMask isSessionReplayMasked={true}>
  <View>
    <Text style={styles.title}>Buy my amazing merch!</Text>
    <Text>
      Hurry up! This offer won't be available tomorrow. Only $99.98 to get your hands on a
      wonderful, brand-new, life-changing item.
    </Text>
  </View>
</CSQMask>

The masking state of a parent view propagates to all nested views unless explicitly overridden by a nested <CSQMask> component. This enables flexible masking and unmasking behaviors within complex component structures.

import { CSQMask } from '@contentsquare/react-native-bridge';

// Masks or unmasks all child components based on isSessionReplayMasked prop
<CSQMask isSessionReplayMasked={true}>
  <View>
    <Text>This content is masked.</Text>

    <CSQMask isSessionReplayMasked={false}>
      <Text>This specific content is unmasked, despite the parent mask.</Text>
    </CSQMask>
  </View>
</CSQMask>

In this example, the inner <CSQMask> explicitly overrides the parent view's masking behavior.

<CSQMask> should not wrap the Root Navigator it could cause unwanted results. If you want to set the default masking behavior for the whole application you should use CSQ.setDefaultMasking(boolean masked). <CSQMask> should be used at component level.

While <CSQMask> supports toggling masking at the instance level, we do not recommend changing the isSessionReplayMasked prop dynamically based on conditions like this:

<CSQMask isSessionReplayMasked={someCondition ? true : false}>...</CSQMask>

This approach may lead to unexpected behavior, such as personal data leaks. Instead, structure your layout in a way that ensures predictable masking behavior without frequently modifying the isSessionReplayMasked prop dynamically.

The SDK doesn't provide a list of what is currently masked. If you need to keep track of it, you probably will have to write your specific wrapper.