@analytics/fullstory

v0.2.6

Published

2 years ago

Unofficial FullStory plugin for 'analytics' module

Downloads

2,865

0High
0Medium
0Low

davidwells

analytics analytics-project analytics-plugin fullstory

FullStory plugin for `analytics`

Integration with FullStory for analytics

FullStory is a tool that tracks user behavior in your application. User sessions are recorded and can be played back allowing developers and product owners to identify areas for improvement in their software.

This analytics plugin will add the FullStory javascript library to your app & send custom events into FullStory.

For more information on FullStory's official browser package, you can check out the official FullStory Browser SDK on NPM.

View the docs

Installation

Install analytics and @analytics/fullstory packages

npm install analytics
npm install @analytics/fullstory

You will need your org ID from FullStory setting to connect to your account and initialize analytics.

To find your FullStory account's org ID go to Settings > FullStory Setup. and grab the _fs_org value.

How to use

The @analytics/fullstory package works in the browser. To use, install the package, include in your project and initialize the plugin with analytics.

Below is an example of how to use the browser plugin.

import Analytics from 'analytics'
import fullStoryPlugin from '@analytics/fullstory'

const analytics = Analytics({
  app: 'awesome-app',
  plugins: [
    fullStoryPlugin({
      org: 'your-org-name'
    })
  ]
})

/* Track a custom event */
analytics.track('cartCheckout', {
  item: 'pink socks',
  price: 20
})

/* Identify a visitor */
analytics.identify('user-id-xyz', {
  firstName: 'bill',
  lastName: 'murray'
})

After initializing analytics with the fullStoryPlugin plugin, data will be sent into FullStory whenever analytics.identify, or analytics.track are called.

See additional implementation examples for more details on using in your project.

Platforms Supported

The @analytics/fullstory package works in the browser

Browser usage

The FullStory client side browser plugin works with these analytic api methods:

analytics.identify - Identify visitors and send details to FullStory
analytics.track - Track custom events and send to FullStory

Browser API

import Analytics from 'analytics'
import fullStoryPlugin from '@analytics/fullstory'

const analytics = Analytics({
  app: 'awesome-app',
  plugins: [
    fullStoryPlugin({
      org: 'your-org-name'
    })
  ]
})

Configuration options for browser

| Option | description | |:---------------------------|:-----------| | org required - string| FullStory account's org ID. The _fs_org value in settings. |

Additional examples

Below are additional implementation examples.

Below is an example of importing via the unpkg CDN. Please note this will pull in the latest version of the package.

<!DOCTYPE html>
<html>
  <head>
    <title>Using @analytics/fullstory in HTML</title>
    <script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
    <script src="https://unpkg.com/@analytics/fullstory/dist/@analytics/fullstory.min.js"></script>
    <script type="text/javascript">
      /* Initialize analytics */
      var Analytics = _analytics.init({
        app: 'my-app-name',
        plugins: [
          analyticsFullStory({
            org: 'your-org-name'
          })
        ]
      })

      /* Track a custom event */
      analytics.track('cartCheckout', {
        item: 'pink socks',
        price: 20
      })

      /* Identify a visitor */
      analytics.identify('user-id-xyz', {
        firstName: 'bill',
        lastName: 'murray'
      })
    </script>
  </head>
  <body>
    ....
  </body>
</html>

Using @analytics/fullstory in ESM modules.

<!DOCTYPE html>
<html>
  <head>
    <title>Using @analytics/fullstory in HTML via ESModules</title>
    <script>
      // Polyfill process.
      // **Note**: Because `import`s are hoisted, we need a separate, prior <script> block.
      window.process = window.process || { env: { NODE_ENV: 'production' } }
    </script>
    <script type="module">
      import analytics from 'https://unpkg.com/analytics/lib/analytics.browser.es.js?module'
      import analyticsFullStory from 'https://unpkg.com/@analytics/fullstory/lib/analytics-plugin-fullstory.browser.es.js?module'
      /* Initialize analytics */
      const Analytics = analytics({
        app: 'analytics-html-demo',
        debug: true,
        plugins: [
          analyticsFullStory({
            org: 'your-org-name'
          })
          // ... add any other third party analytics plugins
        ]
      })

      /* Track a custom event */
      analytics.track('cartCheckout', {
        item: 'pink socks',
        price: 20
      })

      /* Identify a visitor */
      analytics.identify('user-id-xyz', {
        firstName: 'bill',
        lastName: 'murray'
      })
    </script>
  </head>
  <body>
    ....
  </body>
</html>

Formatting payloads

FullStory requires specific naming conventions for tracking.

We have taken the liberty of making this easier to use with this plugin. 🎉

Values sent to FullStory will be automatically converted into a values their API will understand.

Example

analytics.track('itemPurchased', {
  price: 11.11,
  is_user: true,
  first_name: 'steve'
})

This tracking payload will be automatically converted to the fullstory naming conventions and will be sent like:

FS.event('itemPurchased', {
  price_real: 11.11,
  isUser_bool: true,
  firstName_str: 'steve'
})

This will ensure data flows into FullStory correctly.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

FullStory plugin for analytics