---
title: 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
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
> Fetch the complete documentation index at: 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's 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.

   Compatibility Notes

   Autocapture's Babel plugin instruments the built-in React Native components. Instrumentation of similarly named components exported by third-party libraries (for example, `react-native-gesture-handler`'s `Pressable` or `TouchableWithoutFeedback`) is not guaranteed and depends on the library's implementation. As a result, interactions with these components may not be captured automatically.

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

   * Product Analytics

     **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 (Early Access)

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

   * Product Analytics

     **App.js**

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


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

   * CSQ Experience Platform (Early Access)

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

   * Product Analytics

     **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 (Early Access)

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

   * Product Analytics

     **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 (Early Access)

     **App.js**

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


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


```json
{"@context":"https://schema.org","@type":"TechArticle","headline":"Product Analytics data capture","description":"Access to acquisition analysis and lifetime metrics by implementing the Product Analytics data capture using the CSQ SDK","url":"https://docs.contentsquare.com/en/csq-sdk-react-native/experience-analytics/set-up-product-analytics-data-capture/","inLanguage":"en","dateModified":"2026-07-08T20:51:53+02:00","publisher":{"@type":"Organization","name":"Contentsquare","url":"https://www.contentsquare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://docs.contentsquare.com/#website","name":"Contentsquare Technical Documentation","url":"https://docs.contentsquare.com/"}}
```