Use Adobe Analytics

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, Zoning Analysis, Session Replay).

  1. Follow the instructions from Adobe Analytics for mobile apps
  2. Add the React Native AEP to your project

Add the following code snippet in your application code.

adobe-analytics.js
import { Edge, ExperienceEvent } from '@adobe/react-native-aepedge';
import Contentsquare 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
Contentsquare.sendDynamicVar('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’.

index.js
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

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.

adobe-analytics.js
import { ACPCore } from '@adobe/react-native-acpcore';
import Contentsquare 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
Contentsquare.sendDynamicVar('csMatchingKey', csMatchingKeyValue);
ACPCore.trackState('csMatchingKey_state', {
csMatchingKey: csMatchingKeyValue,
});
}