---
title: Use Adobe Analytics - React Native
description: Leverage our native integration to use Adobe Analytics segments in Contentsquare
lastUpdated: 22 December 2025
source_url:
  html: https://docs.contentsquare.com/en/csq-sdk-react-native/experience-analytics/adobe-analytics/
  md: https://docs.contentsquare.com/en/csq-sdk-react-native/experience-analytics/adobe-analytics/index.md
---

Analyze your data from anywhere in the customer journey using your Adobe Analytics segments.\
Contentsquare allows you to use your Adobe Analytics segments in every Contentsquare feature (Journey Analysis, Page Comparator, Session Replay).

Warning

Sessions without at least one screenview will be discarded.\
You should implement your screen tracking plan first, to have your Adobe Analytics integration work.\
See [Track screens](../track-screens/).

## Prerequisites

1. Follow the instructions from [Adobe Analytics for mobile apps ↗](https://support.contentsquare.com/hc/en-us/articles/37271665881745)
2. Add the [React Native AEP ↗](https://github.com/adobe/aepsdk-react-native) to your project

## Code implementation

Note

**Adobe SDK code requirements**

On the native Android and iOS parts of your React Native project, make sure you have registered at least `Edge Network` and `Edge Identity` extension before starting `MobileCore`. Check [React Native AEP repository ↗](https://github.com/adobe/aepsdk-react-native) for the code to put in the Android and iOS native parts.

**Why 30 minutes before sending a new csMatchingKey**

* 30 minutes is Contentsquare default session duration.
* Setting a value **higher** than 30 minutes would cause overlapping on our sessions, and would impact negatively the data import from Adobe.
* Setting a value **lower** than 30 minutes would make you to send more data to Adobe.\
  This could cause the variable to reach Adobe's threshold, causing Adobe to filter values, and potentially impact your billing.\
  See [Low-traffic value in Adobe Analytics ↗](https://experienceleague.adobe.com/docs/analytics/technotes/low-traffic.html)

Add the following code snippet in your application code.

```javascript
import { Edge, ExperienceEvent } from "@adobe/react-native-aepedge";
import { CSQ } from "@contentsquare/react-native-bridge";
// TODO: Use local storage you prefer here
import AsyncStorage from "@react-native-async-storage/async-storage";


export async function sendCSMatchingKeyIfNeeded() {
  const csMatchingKeyRecord = await AsyncStorage.getItem("csMatchingKey_creation_ts");
  if (!csMatchingKeyRecord) {
    await submitNewCsMatchingKey();
    return;
  }


  const { timestamp } = JSON.parse(csMatchingKeyRecord);
  if (Date.now() - timestamp > 30 * 60 * 1000) {
    // if the key is not valid anymore, submit a new one
    await submitNewCsMatchingKey();
  }
  // if the key is still valid, do nothing
}


async function submitNewCsMatchingKey() {
  // Generate the matching key and store it in the local storage
  const csMatchingKeyValue = `${Math.random()}_${Date.now()}`;
  const newCsMatchingKeyRecord = {
    csMatchingKey: csMatchingKeyValue,
    timestamp: Date.now(),
  };
  await AsyncStorage.setItem("csMatchingKey_creation_ts", JSON.stringify(newCsMatchingKeyRecord));


  // Submit the matching key to Contentsquare and Adobe
  CSQ.addDDynamicVar("csMatchingKey", csMatchingKeyValue);


  const xdmData = { eventType: "csMatchingKey_state" };
  const data = { csMatchingKey: csMatchingKeyValue };
  const experienceEvent = new ExperienceEvent(xdmData, data);
  Edge.sendEvent(experienceEvent);
}
```

Add a call to the `sendCSMatchingKeyIfNeeded()` from within the `index.js` file of your project root folder when app state changes to 'active'.

```javascript
import { AppState } from "react-native";
import { sendCSMatchingKeyIfNeeded } from "./adobe-analytics.js";


// Listen for app state changes to foreground
AppState.addEventListener("change", (nextAppState) => {
  if (nextAppState === "active") {
    sendCSMatchingKeyIfNeeded();
  }
});
```

How to use deprecated React Native AEP Analytics Extension

Deprecated

For [React Native AEP Analytics Extension ↗](https://github.com/adobe/react-native-acpanalytics), on the native Android and iOS parts of your React Native project, make sure you have registered at least `ACPIdentity` and `ACPAnalytics` before starting `ACPCore`. Check [React Native AEP Analytics Extension repository ↗](https://github.com/adobe/react-native-acpanalytics/tree/main/sample/ACPAnalyticsSampleApp) for the code to put in the Android and iOS native parts.

Add the following code snippet in your application code. Add a call to the `updateCsMatchingKey()` from within the `index.js` file of your project root folder.

```javascript
import { ACPCore } from "@adobe/react-native-acpcore";
import { CSQ } from "@contentsquare/react-native-bridge";
// TODO: Use local storage you prefer here
import AsyncStorage from "@react-native-community/async-storage";


export async function updateCsMatchingKey() {
  const csMatchingKeyRecord = await AsyncStorage.getItem("csMatchingKey_creation_ts");
  if (!csMatchingKeyRecord) {
    await submitNewCsMatchingKey();
    return;
  }


  const { timestamp } = JSON.parse(csMatchingKeyRecord);
  if (Date.now() - timestamp > 30 * 60 * 1000) {
    // if the key is not valid anymore, submit a new one
    await submitNewCsMatchingKey();
  }
  // if the key is still valid, do nothing
}


async function submitNewCsMatchingKey() {
  // Generate the matching key and store it in the local storage
  const csMatchingKeyValue = `${Math.random()}_${Date.now()}`;
  const newCsMatchingKeyRecord = {
    csMatchingKey: csMatchingKeyValue,
    timestamp: Date.now(),
  };
  await AsyncStorage.setItem("csMatchingKey_creation_ts", JSON.stringify(newCsMatchingKeyRecord));


  // Submit the matching key to Contentsquare and Adobe
  CSQ.addDynamicVar("csMatchingKey", csMatchingKeyValue);
  ACPCore.trackState("csMatchingKey_state", {
    csMatchingKey: csMatchingKeyValue,
  });
}
```