@fullstory/browser

What is @fullstory/browser?

@fullstory/browser is a JavaScript library that allows you to integrate FullStory's session replay and analytics capabilities into your web application. It helps you capture user interactions, replay sessions, and gain insights into user behavior.

What are @fullstory/browser's main functionalities?

Initialize FullStory

This code initializes the FullStory library with your organization's ID, enabling session recording and analytics.

const FullStory = require('@fullstory/browser');
FullStory.init({ orgId: 'YOUR_ORG_ID' });

Identify Users

This code identifies a user with a unique ID and additional user information, allowing you to track user-specific sessions.

FullStory.identify('USER_ID', {
  displayName: 'John Doe',
  email: '[e-mail]'
});

Log Custom Events

This code logs a custom event, such as a button click, with additional metadata. This helps in tracking specific user interactions.

FullStory.event('ButtonClicked', {
  buttonName: 'Subscribe'
});

Set User Variables

This code sets custom user variables that can be used to segment and analyze user behavior based on specific attributes.

FullStory.setUserVars({
  plan: 'premium',
  accountAge: 365
});

Shutdown FullStory

This code stops the FullStory session recording and analytics, which can be useful for privacy or performance reasons.

FullStory.shutdown();

Other packages similar to @fullstory/browser

mouseflow

Mouseflow is a session replay and heatmap tool that helps you understand how users interact with your website. It offers features like session replay, heatmaps, funnels, and form analytics. Mouseflow is similar to FullStory in its focus on session replay but also includes additional tools for form analytics and conversion tracking.

README

FullStory Browser SDK

FullStory's browser SDK lets you manage FullStory recording on your site as well as retrieve deep links to session replays and send your own custom events. More information about the FullStory API can be found at https://developer.fullstory.com.

Install the SDK

with npm

npm i @fullstorydev/browser --save

with yarn

yarn add @fullstorydev/browser

Initialize the SDK

Call the init() function as soon as you can in your website startup process.

Here's an example of what this would look like in a React app:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as FullStory from '@fullstorydev/browser';


FullStory.init({ orgId: '<your org id here>' });

ReactDOM.render(<App />, document.getElementById('root'));

Examples

Once FullStory is initialized, you can make calls to the FullStory SDK.

Sending custom events

FullStory.event('Subscribed', {
  uid_str: '750948353',
  plan_name_str: 'Professional',
  plan_price_real: 299,
  plan_users_int: 10,
  days_in_trial_int: 42,
  feature_packs: ['MAPS', 'DEV', 'DATA'],
});

Generating session replay links

const startOfPlayback = FullStory.getCurrentSessionURL();
const playbackAtThisMomentInTime = FullStory.getCurrentSessionURL(true);

Changelog

1.0.0

Initial Release