---
title: Set up Product Analytics data capture - React Native
description: Access to acquisition analysis and lifetime metrics by implementing the Product Analytics data capture using the CSQ SDK
lastUpdated: 02 June 2026
source_url:
  html: https://docs.contentsquare.com/en/csq-sdk-react-native/experience-analytics/set-up-product-analytics-data-capture/
  md: https://docs.contentsquare.com/en/csq-sdk-react-native/experience-analytics/set-up-product-analytics-data-capture/index.md
---

> Documentation index: https://docs.contentsquare.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

1. 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**

   ```javascript
   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 Plugin Note

   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.

2. Add your Product Analytics Environment ID using `start()`.

   * Standalone

     **App.js**

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


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

     Find 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 ↗](https://heapanalytics.com/app/).

   * CSQ Experience Platform

     **App.js**

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


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

     Find your data source 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 [CSQ Experience Platform web app ↗](https://app.contentsquare.com/).

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

   * Standalone

     **App.js**

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


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

   * CSQ Experience Platform

     **App.js**

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


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

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

   * Standalone

     **App.js**

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


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

   * CSQ Experience Platform

     **App.js**

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


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

5. Add the `disablePageviewAutocapture: true` option to the configuration.

   * Standalone

     **App.js**

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


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

   * CSQ Experience Platform

     **App.js**

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


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