React FullStory Component

Synopsis

This is a ReactJS Component and library for integrating FullStory into your ReactJS Application or customer JavaScript application.

Motivation

I built this to make it easy to integrate FullStory services into a ReactJS based application.

Installation

npm install react-fullstory-component

Compatible Version

• React 0.13.3 1.0+
• React 15+ 2.0+

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.

Component Code Examples

Basic Example

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} />;

IFrame Example

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} />;

API Reference

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.

Basic Usage

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

Attaching Custom Data

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

Segmenting session on the same page session

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

Integrating with FullStory events

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

Tests

There are two scripts to run test

npm run test
npm run test-watch

• Requires Node Version 4+ to run tests.

License

MIT