---
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: 12 February 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
---

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

1. ## Add Autocapture Plugin React Native Bridge

   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:

   ```javascript
   module.exports = {
     presets: ['module:@react-native/babel-preset'],
     plugins: ['@contentsquare/react-native-bridge/babel'],
   };
   ```

   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, we recommend including @babel/plugin-transform-react-display-name alongside @contentsquare/react-native-bridge/babel in your plugins section.

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

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


   useEffect(() => {
     CSQ.configureProductAnalytics("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/).

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

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


   useEffect(() => {
     CSQ.configureProductAnalytics("YOUR_ENVIRONMENT_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`.

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


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

5. Add the `resumePreviousSession: true` and `disablePageviewAutocapture: true` options to the configuration.

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


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