Getting Started with Product Analytics

This quick start guide shows you how to get Contentsquare Product Analytics set up in a React Native application.

Once you've completed the setup process, the Contentsquare SDK will capture a wide variety of user interactions in your application with no additional code required.

The CSQ React Native SDK is available as an NPM package ↗, which includes the bridge and the necessary dependencies for specific versions of the SDKs.

To install the CSQ React Native SDK, open a terminal and run the following commands from your application's root directory:

yarn add @contentsquare/react-native-bridge
cd ios && pod install

npm install @contentsquare/react-native-bridge
cd ios && pod install

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'],
};

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.

1. Configure and start the SDK with start().

   • Standalone
   • Unified CSQ

     Onboard to Unified CSQ, our latest, all-in-one platform offering.

     Reach out to your Customer Success Manager for more information.

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

2. To capture interactions and screenviews automatically, enable autocapture by setting enableRNAutocapture to true. Review supported navigation libraries in the compatibility section.

   • Standalone
   • Unified CSQ

     Onboard to Unified CSQ, our latest, all-in-one platform offering.

     Reach out to your Customer Success Manager for more information.

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

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

   • Standalone
   • Unified CSQ

     Onboard to Unified CSQ, our latest, all-in-one platform offering.

     Reach out to your Customer Success Manager for more information.

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

4. Implement the optIn() API to forward user consent to the SDK, generate a user ID, and initiate tracking.

   import React, { useState } from "react";
   import { View, Text, Button } from "react-native";
   import { CSQ } from "@contentsquare/react-native-bridge";
   
   const PolicyConsentScreen = () => {
     const [isTrackingAccepted, setIsTrackingAccepted] = useState(false);
   
     const handleAcceptPolicy = () => {
       setIsTrackingAccepted(true);
       CSQ.optIn();
     };
   
     return (
       <View>
         <Text>Please accept our privacy policy to proceed.</Text>
         <Button title="Accept Policy" onPress={handleAcceptPolicy} />
       </View>
     );
   };
   
   export default PolicyConsentScreen;

   Once tracking has started, you're able to take full advantage of the CSQ SDK API to identify users, track custom events, and more.

   Contentsquare's Product Analytics module will also automatically start tracking a wide range of user interactions, view controller changes, and app version changes without any additional code.

5. Start your application, and check logs for this output:

   [INFO] CSQ 6.3.0 for Product Analytics is attempting to start.

Our SDK offers a wide range of features to enhance your implementation, including extended tracking capabilities, and personal data masking.

Session Replay and Error Monitoring are both available with the Experience Analytics Extension, which you can purchase separately.