From Heap Core SDK + Contentsquare SDK to CSQ SDK

Heap Core SDK

+

Contentsquare SDK

→

CSQ SDK

The latest version of our SDK provides a unified set of APIs for Product Analytics, Experience Analytics, and Experience Monitoring, eliminating redundant APIs that perform the same actions.

Upgrading to the latest version ensures you benefit from all our newest features and product enhancements.

Replace Heap and Contentsquare SDK dependencies by the CSQ SDK:

yarn remove @heap/heap-react-native-autocapture @heap/heap-react-native-bridge @heap/heap-react-native-cs-integration @heap/babel-plugin-heap-react-native-autocapture
yarn add @contentsquare/react-native-bridge
cd ios && pod install

npm uninstall @heap/heap-react-native-autocapture @heap/heap-react-native-bridge @heap/heap-react-native-cs-integration @heap/babel-plugin-heap-react-native-autocapture
npm install @contentsquare/react-native-bridge
cd ios && pod install

Replace the Heap and Contentsquare dependency imports with a CSQ SDK import.

import { Heap } from '@heap/heap-react-native-bridge';
import { registerHeapAutocapture } from '@heap/heap-react-native-autocapture';
import Contentsquare from "@contentsquare/react-native-bridge";
import { bind } from '@heap/heap-react-native-cs-integration';
import { CSQ } from "@contentsquare/react-native-bridge";

Follow these steps to start the CSQ SDK with your current configuration.

1. Migrate your app ID and the config options from Heap.startRecording() to CSQ.configureProductAnalytics().

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

2. For React Native Autocapture, replace the babel plugin from @heap/heap-react-native-autocapture to @contentsquare/react-native-bridge/babel in your babel configuration.

   • babel.config.js
   • babel.config.json

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

3. For React Native Autocapture, replace registerHeapAutocapture() with enableRNAutocapture = true option:

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

4. Add a call to CSQ.start() after the configuration call.

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

5. Remove HeapContentsquareIntegration.bind().
   Sending Heap screenviews to Contentsquare

   bind({ sendHeapPageviewsToContentsquare: true });

   Sending Contentsquare screenviews to Heap

   bind({ sendHeapPageviewsToContentsquare: true });
   CSQ.configureProductAnalytics("YOUR_ENVIRONMENT_ID", {
     disablePageviewAutocapture: true,
     resumePreviousSession: true
   });

6. (Optional) If you have chosen to deactivate the autostart of the Contentsquare SDK, you can now remove the entry in the manifest, as the CSQ SDK doesn’t have an autostart.

   <application>
     ...
       <meta-data
         android:name="com.contentsquare.android.autostart"
         android:value="false"
       />
     ...
   </application>

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

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;

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

Search and replace all legacy SDK API calls in your app to the latest CSQ APIs using the following mappings. Updating your API calls ensures continued functionality without disruption.

In most cases, this process consists in updating the namespace and method names, with no changes to parameters.

Contentsquare.start()
Heap.startRecording("YOUR_ENVIRONMENT_ID")
CSQ.start()

For more information on SDK methods, see the SDK API reference.

GDPR / Identification

const getUserInformation = async () => {
  const heapUserId = await Heap.getUserId();
  const heapSessionId = await Heap.getSessionId();
  const heapEnvId = await Heap.getEnvironmentId();
  const heapIdentity = await Heap.getIdentity();
};

useEffect(() => {
  const onMetadataChangeUnsubscribe = CSQ.onMetadataChange(metadata => {
      const userId = metadata.userID;
      const sessionId = metadata.sessionID;
      const environmentId = metadata.environmentID;
      const identity = metadata.identity;
  });

  return () => {
      onMetadataChangeUnsubscribe();
  };
}, []);

Logging

Property tracking

Event tracking

Personal Data Handling and Masking

SDK initialization and manipulation

Autocapture options

Heap.startRecording("YOUR_APP_ID", {
  disableInteractionTextCapture: true,
  disableInteractionAccessibilityLabelCapture: true,
});

CSQ.configureProductAnalytics("YOUR_ENVIRONMENT_ID", {
  enableRNAutocapture: true,
  disableInteractionTextCapture: true,
  disableInteractionAccessibilityLabelCapture: true,
});

GDPR / Identification

User id

useEffect(() => {
    Contentsquare.getUserId(userId => {
        console.log(`Your Contentsquare UserID is ${userId}`);
    });

    const onMetadataChangeUnsubscribe = CSQ.onMetadataChange(metadata => {
        console.log(`Your Contentsquare UserID is ${metadata.userID}`);
    });

    return () => {
        onMetadataChangeUnsubscribe();
    };
}, []);

Property tracking

Interoperability

Session replay URL

useEffect(() => {
    const sessionReplayLinkSubscriber = Contentsquare.onSessionReplayLinkChange(link => {
        Alert.alert(`New link copied to the clipboard ${link}`);
    const onMetadataChangeUnsubscribe = CSQ.onMetadataChange(metadata => {
        Alert.alert(`New link copied to the clipboard ${metadata.sessionReplayUrl}`);
    });

  return () => {
    if (sessionReplayLinkSubscriber) {
      sessionReplayLinkSubscriber.remove();
    }
    if (onMetadataChangeUnsubscribe) {
      onMetadataChangeUnsubscribe();
    }
  };
}, []);

Webview component

import { CSWebView } from "@contentsquare/react-native-bridge";
import WebView from 'react-native-webview';
import { CSQWebView } from "@contentsquare/react-native-bridge";

<CSWebView>
<CSQWebView>
    <WebView
        source={{ uri: 'https://www.example.com' }}
    />
</CSWebView>
</CSQWebView>

Event tracking

Error tracking

Personal Data Handling and Masking

Masking component

import { CSMask } from "@contentsquare/react-native-bridge";
import { CSQMask } from "@contentsquare/react-native-bridge";

<CSMask isMasking={true}>
<CSQMask isSessionReplayMasked={true}>
    {/* Your masked content goes here */}
</CSMask>
</CSQMask>

SDK initialization and manipulation

CSInApp

Congratulations! You’re all set. Use this checklist to ensure everything is correctly updated.

Ensure that you are using a version 6.0.0 or later of the Contentsquare React Native SDK.

Your import Contentsquare from “@contentsquare/react-native-bridge” and import { ErrorAnalysis } from “@contentsquare/react-native-bridge” declarations have been updated to import { CSQ } from “@contentsquare/react-native-bridge”.

Your import { Heap } from '@heap/heap-react-native-bridge' and import { registerHeapAutocapture } from '@heap/heap-react-native-autocapture' import declarations have been updated to import { CSQ} from “@contentsquare/react-native-bridge”.

You no longer have references to Heap. or Contentsquare. methods in your codebase.

You no longer have references to CSMask or CSWebView components in your codebase.

You no longer have references to <HeapIgnore>, <HeapIgnoreText> or withHeapIgnore components in your codebase.

All calls to the CSQ SDK use the CSQ.namespace.