Set up Product Analytics data capture

This page instructs how to set up data capture in the context of the User Lifecycle Extension for Experience Analytics.

1. Add Autocapture Plugin React Native Bridge

   Section titled 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:

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

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

   import { CSQ } from "@contentsquare/react-native-bridge";
   
   useEffect(() => {
     CSQ.configureProductAnalytics({
       envId: "YOUR_ENVIRONMENT_ID",
     });
   }, []);

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

   import { CSQ } from "@contentsquare/react-native-bridge";
   
   useEffect(() => {
     CSQ.configureProductAnalytics({
       envId: "YOUR_ENVIRONMENT_ID",
       enableRNAutocapture: true,
     });
   }, []);

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

   import { CSQ } from "@contentsquare/react-native-bridge";
   
   useEffect(() => {
     CSQ.configureProductAnalytics({
       envId: "YOUR_ENVIRONMENT_ID",
       enableRNAutocapture: true,
       baseUrl: "https://mh.ba.contentsquare.net",
     });
   }, []);

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

   import { CSQ } from "@contentsquare/react-native-bridge";
   
   useEffect(() => {
     CSQ.configureProductAnalytics({
       envId: "YOUR_ENVIRONMENT_ID",
       enableRNAutocapture: true,
       resumePreviousSession: true,
       disablePageviewAutocapture: true,
     });
   }, []);