🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →

@fullstory/snippet

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fullstory/snippet

FullStory snippet source

2.0.5

latest

npm

Version published: 6 months ago

Maintainers: 2

Created: 3 years ago

What is @fullstory/snippet?

@fullstory/snippet is an npm package that allows you to easily integrate FullStory's session replay and analytics capabilities into your web application. It provides a simple way to capture user interactions and behaviors, which can be used for debugging, user experience research, and performance monitoring.

What are @fullstory/snippet's main functionalities?

Initialize FullStory

This feature allows you to initialize FullStory with your organization ID. This is the first step to start capturing user sessions.

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

Identify Users

This feature allows you to identify users by providing a unique user ID and optional user traits such as display name and email. This helps in associating session data with specific users.

FullStory.identify('USER_ID', {
  displayName: 'John Doe',
  email: 'john.doe@example.com'
});

Log Custom Events

This feature allows you to log custom events with specific properties. This can be useful for tracking specific user interactions that are important for your application.

FullStory.event('ButtonClicked', {
  buttonName: 'Submit',
  page: 'Signup'
});

Other packages similar to @fullstory/snippet

FullStory Snippet

FullStory's snippet package provides a number of ways to integrate the FullStory snippet with your build tooling of choice. For a more integrated experience, try the browser SDK.

Installation

with npm

npm i @fullstory/snippet --save

with yarn

yarn add @fullstory/snippet

Exports

`generateSnippetText`

Options

orgId - Sets your FullStory Org Id. Find out how to get your Org Id here. Required.
host - The recording server host domain. Can be set to direct recorded events to a proxy that you host. Defaults to fullstory.com.
script - The full location of the FullStory script (fs.js). FullStory hosts the fs.js recording script on a CDN, but you can choose to host a copy yourself. Defaults to edge.fullstory.com/s/fs.js.
namespace - Sets the global identifier for FullStory when conflicts with FS arise; see help. Defaults to FS.

Usage

Returns a stringified version of the FullStory snippet. This is useful for various build systems like webpack.

Examples

Webpack (docs)

// webpack.config.js
{
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      fsSnippet: generateSnippetText({ orgId: 'xyz' }),
      template: 'index.html',
    })
  ]
}

// index.html
<!DOCTYPE html>
<html>
  <head>
    <script><%= htmlWebpackPlugin.options.fsSnippet %></script>
  </head>
  <body>
  </body>
</html>

Gatsby (docs)

// gatsby-ssr.js
exports.onRenderBody = ({ setHeadComponents }) => {
  setHeadComponent(
    <script
      dangerouslySetInnerHTML={{
        __html: generateSnippetTxt({ orgId: 'xyz' }),
      }}
    />
  );
}

`initFS`

Options

Same as generateSnippetText.

Usage

Calling this function sets all the necessary global variables and immediately executes the FullStory snippet.

NOTE: this is used internally by @fullstory/browser.

FAQs

What is @fullstory/snippet?

Is @fullstory/snippet well maintained?

Package last updated on 15 Nov 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@fullstory/snippet

What is @fullstory/snippet?

What are @fullstory/snippet's main functionalities?

Other packages similar to @fullstory/snippet

mouseflow

FullStory Snippet

Installation

with npm

with yarn

Exports

generateSnippetText

Options

Usage

Examples

initFS

Options

Usage

Related posts

MCP Community Begins Work on Official MCP Metaregistry

Malicious npm Packages Use Telegram to Exfiltrate BullX Credentials

Backdooring the IDE: Malicious npm Packages Hijack Cursor Editor on macOS

`generateSnippetText`

`initFS`