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

Prerequisites

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

Code implementation

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.

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 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);

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

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.

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,
  });
}