Getting Started with Product Analytics

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

Use the Contentsquare wizard or skills to set up, update, and configure React Native with your AI coding assistant.

npx @contentsquare/wizard install

Use this path when you prefer to configure your AI coding assistant yourself.

Choose how to install the Contentsquare skill.

copilot plugin marketplace add ContentSquare/agents
copilot plugin install contentsquare-reactnative@contentsquare

/plugin marketplace add ContentSquare/agents
/plugin install contentsquare-reactnative@contentsquare

npx skills add contentsquare/agents

After installing the skill, paste this prompt into your AI coding assistant:

Install Contentsquare for React Native.

Prefer to set things up manually? Continue with the steps below.

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().

   • Product Analytics
   • CSQ Experience Platform (Early Access)

     Get Early Access to CSQ Experience Platform, our latest, all-in-one offering.

     Reach out to your Customer Success Manager to join the Early Access Program.

   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.

   • Product Analytics
   • CSQ Experience Platform (Early Access)

     Get Early Access to CSQ Experience Platform, our latest, all-in-one offering.

     Reach out to your Customer Success Manager to join the Early Access Program.

   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.

   • Product Analytics
   • CSQ Experience Platform (Early Access)

     Get Early Access to CSQ Experience Platform, our latest, all-in-one offering.

     Reach out to your Customer Success Manager to join the Early Access Program.

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