This is a ReactJS Component and library for integrating FullStory into your ReactJS Application or customer JavaScript application.
I built this to make it easy to integrate FullStory services into a ReactJS based application.
npm install react-fullstory-component
Make sure you install the correct verson depending on which version of react your are running. Thanks to Thinh for updating the component to work with React 15.
import { FullStory } from 'react-fullstory-component';
const settings = {
debug: false,
host: 'www.fullstory.com',
orgKey: 'fake'
};
const data = {
key: value
};
const sessionId = '123456789';
const jsx = <FullStory settings={settings} sessionId={sessionId} custom={data} />;
This is an example for FullStory for an iframe that is not in the same domain as the parent
import { FullStory } from 'react-fullstory-component';
const settings = {
host: 'www.fullstory.com',
orgKey: 'fake',
iframe: true
};
const sessionId = '123456789';
const jsx = <FullStory settings={settings} sessionId={sessionId} />;
IF you want to just use the wrapper library around used by the component, the following describes the exposed api and how to leverage it.
Common usage for tagging user session to a single id
import { FullStoryClient } from 'react-fullstory-component';
const client = new FullStoryClient({
host: 'www.fullstory.com',
orgKey: 'fake',
iframe: true
});
client.render();
client.setSession('mysessionId');
The ability to attach custom data to session to be sent to FullStory. Make sure to read the naming guides on FullStory’s site to capture data correctly
import { FullStoryClient } from 'react-fullstory-component';
const client = new FullStoryClient({
host: 'www.fullstory.com',
orgKey: 'fake',
iframe: true
});
client.render();
client.setSession('mysessionId', {
displyName: 'visual identifier in list',
address_str: 'some address string',
returnVisit_bool: true,
personId_int: '1234'
});
In some cases, you may want to identify user session as seperate segments by session id. This can be handled directly utilizing the client.
import { FullStoryClient } from 'react-fullstory-component';
const client = new FullStoryClient({
host: 'www.fullstory.com',
orgKey: 'fake',
iframe: true
});
client.render();
client.setSession('mysessionId', {
displyName: 'visual identifier in list',
address_str: 'some address string',
returnVisit_bool: true,
personId_int: '1234'
});
// lots of user activity
// potential detect refresh or special route #segment-differently
client.clearUserSession();
client.setSession('mynewSessionId');
Once the session is created on the remote server you can use the following handlers to attach functionality to FullStory events and get the URL reference to the session playback.
// option1 set as initial settings on client
const client = new FullStoryClient({
host: 'www.fullstory.com',
orgKey: 'fake',
iframe: true,
sessionCallbacks: [
function(sessionUrl) {
// do something with link to recorded session
}
]
});
// option2 push to client later
client.onLoad(function(sessionUrl)) {
// do something with link to recorded session
}
client.render();
client.setSession('sessionId');
There are two scripts to run test
npm run test
npm run test-watch
Author: stikmanw
Source Code: https://github.com/stikmanw/react-fullstory-component
#react #reactjs #javascript