Set up Product Analytics data capture

This page instructs how to set up Product Analytics data capture in combination with Experience Analytics.

Add the React Native Babel Autocapture Plugin to instrument your app code:

In your babel.config.js file, add @contentsquare/react-native-bridge/babel to the plugins array:
babel.config.js
```
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['@contentsquare/react-native-bridge/babel'],
};
```
Make sure to add the plugin to all relevant babel.config.js files in your project, including those in any packages that contain React Native code.

Autocapture babel plugin depends on the @babel/plugin-transform-react-display-name to include component names in interaction events.
This is typically provided by module:metro-react-native-babel-preset, babel-preset-expo, or @react-native/babel-preset. If you aren't including any of these, you should include @babel/plugin-transform-react-display-name alongside @contentsquare/react-native-bridge/babel in your plugins section.
Add your Product Analytics Environment ID using start().
- Standalone
- Unified CSQ
App.js
import { CSQ, StartConfig } from "@contentsquare/react-native-bridge"; useEffect(() => { CSQ.start(StartConfig.withEnvironmentId("YOUR_ENVIRONMENT_ID")); }, []);
YOUR_ENVIRONMENT_ID is either provided to you by Contentsquare or you can find it in Account > Manage > Projects > [Select your project] > Environments within the Product Analytics web app ↗.
App.js
import { CSQ, StartConfig } from "@contentsquare/react-native-bridge"; useEffect(() => { CSQ.start(StartConfig.withDataSourceId("YOUR_DATASOURCE_ID")); }, []);
YOUR_DATASOURCE_ID is either provided to you by Contentsquare or you can find it in Definitions > Data sources > [Expand your mobile data source] > [Copy the App ID in step 1] within the Unified CSQ web app ↗.

To capture interactions and screenviews automatically, enable autocapture by setting enableRNAutocapture to true.

Standalone
Unified CSQ

import { CSQ, StartConfig } from "@contentsquare/react-native-bridge";

useEffect(() => {
  CSQ.start(StartConfig.withEnvironmentId("YOUR_ENVIRONMENT_ID", {
    enableRNAutocapture: true,
  }));
}, []);

import { CSQ, StartConfig } from "@contentsquare/react-native-bridge";

useEffect(() => {
  CSQ.start(StartConfig.withDataSourceId("YOUR_DATASOURCE_ID", {
    enableRNAutocapture: true,
  }));
}, []);

(Optional) If your Product Analytics environment is hosted in the EU, set the baseUrl option to https://mh.ba.contentsquare.net.

Standalone
Unified CSQ

import { CSQ, StartConfig } from "@contentsquare/react-native-bridge";

useEffect(() => {
  CSQ.start(StartConfig.withEnvironmentId("YOUR_ENVIRONMENT_ID", {
    enableRNAutocapture: true,
    baseUrl: "https://mh.ba.contentsquare.net",
  }));
}, []);

import { CSQ, StartConfig } from "@contentsquare/react-native-bridge";

useEffect(() => {
  CSQ.start(StartConfig.withDataSourceId("YOUR_DATASOURCE_ID", {
    enableRNAutocapture: true,
    baseUrl: "https://mh.ba.contentsquare.net",
  }));
}, []);

Add the disablePageviewAutocapture: true option to the configuration.
- Standalone
- Unified CSQ
App.js
import { CSQ, StartConfig } from "@contentsquare/react-native-bridge"; useEffect(() => { CSQ.start(StartConfig.withEnvironmentId("YOUR_ENVIRONMENT_ID", { enableRNAutocapture: true, disablePageviewAutocapture: true, })); }, []);
App.js
import { CSQ, StartConfig } from "@contentsquare/react-native-bridge"; useEffect(() => { CSQ.start(StartConfig.withDataSourceId("YOUR_DATASOURCE_ID", { enableRNAutocapture: true, disablePageviewAutocapture: true, })); }, []);