FullStory integration Component for Use with ReactJS

FullStory integration Component for Use with ReactJS

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

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.

Download Details:

Author: stikmanw

Source Code: https://github.com/stikmanw/react-fullstory-component

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.