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:

1. 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. Once the dependencies and plugins have been added, run your application.

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

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

2. 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,
     });
   }, []);

3. Recommended To capture user interactions automatically, add the option disableInteractionAutocapture: false :

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

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,
       disableInteractionAutocapture: false,
       baseUrl: "https://mh.ba.contentsquare.net",
     });
   }, []);

5. Add a call to CSQ.start() after CSQ.configureProductAnalytics().

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

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

   [INFO] CSQ 1.4.1 is attempting to start Product Analytics.

The CSQ SDK treats users as opted-out by default.

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

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.

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.