Université
Webinaires
Communauté
Centre d'aide
Documentation Technique
Platforme Contentsquare

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

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

Code implementation

Section titled Code implementation

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