@fullstory/browser
Advanced tools
Comparing version 2.0.0-beta.3 to 2.0.0-beta.4
{ | ||
"name": "@fullstory/browser", | ||
"version": "2.0.0-beta.3", | ||
"version": "2.0.0-beta.4", | ||
"description": "The official FullStory browser SDK", | ||
@@ -5,0 +5,0 @@ "repository": "git://github.com/fullstorydev/fullstory-browser-sdk.git", |
138
README.md
@@ -7,2 +7,3 @@ # FullStory Browser SDK | ||
> **NOTE:** this is the documentation for version 2. For version 1 documentation, please see [@fullstory/browser@1.7.1](https://www.npmjs.com/package/@fullstory/browser/v/1.7.1). | ||
@@ -22,2 +23,44 @@ ## Install the SDK | ||
## Migrating to Version 2.x.x | ||
In version 2.x.x, `init` is a separate named export from `FullStory`. You will need to update all of your wildcard (`'*'`) imports to explicit named imports. | ||
_Version 1.x.x_ | ||
```js | ||
import * as FullStory from '@fullstory/browser'; | ||
``` | ||
_Version 2.x.x_ | ||
```js | ||
import { FullStory, init } from '@fullstory/browser'; | ||
``` | ||
### `init` | ||
You can use the named import `init` by itself: | ||
```js | ||
import { init } from '@fullstory/browser'; | ||
init({ orgId: 'my-org-id' }) | ||
``` | ||
You can also rename the function for readability: | ||
```js | ||
import { init as initFullStory } from '@fullstory/browser'; | ||
initFullStory({ orgId: 'my-org-id' }) | ||
``` | ||
### `FullStory` | ||
The `FullStory` named export is equivalent to the global `FS` object described in the [developer documentation](https://developer.fullstory.com/browser/v2/getting-started/). You can use it to make all version 2 API calls: | ||
```js | ||
import { FullStory } from '@fullstory/browser'; | ||
FullStory('trackEvent', { | ||
name: 'My Event', | ||
properties: { | ||
product: 'Sprockets', | ||
quantity: 1, | ||
}, | ||
}) | ||
``` | ||
## Initialize the SDK | ||
@@ -48,3 +91,5 @@ | ||
```javascript | ||
FullStory.init({ orgId }, ({ sessionUrl }) => console.log(`Started session: ${sessionUrl}`)); | ||
import { init } from '@fullstory/browser'; | ||
init({ orgId }, ({ sessionUrl }) => console.log(`Started session: ${sessionUrl}`)); | ||
``` | ||
@@ -61,6 +106,6 @@ | ||
import App from './App'; | ||
import * as FullStory from '@fullstory/browser'; | ||
import { init as initFullStory } from '@fullstory/browser'; | ||
FullStory.init({ orgId: '<your org id here>' }); | ||
initFullStory({ orgId: '<your org id here>' }); | ||
@@ -74,3 +119,3 @@ ReactDOM.render(<App />, document.getElementById('root')); | ||
import { Component } from '@angular/core'; | ||
import * as FullStory from '@fullstory/browser'; | ||
import { init as initFullStory } from '@fullstory/browser'; | ||
import { environment } from '../environments/environment'; | ||
@@ -86,4 +131,6 @@ | ||
constructor() { | ||
FullStory.init({ orgId: '<your org id here>', | ||
devMode: !environment.production }); | ||
initFullStory({ | ||
orgId: '<your org id here>', | ||
devMode: !environment.production, | ||
}); | ||
} | ||
@@ -98,5 +145,5 @@ } | ||
import App from './App.vue'; | ||
import * as FullStory from '@fullstory/browser'; | ||
import { init as initFullStory, FullStory } from '@fullstory/browser'; | ||
FullStory.init({ orgId: '<your org id here>' }); | ||
initFullStory({ orgId: '<your org id here>' }); | ||
Vue.prototype.$FullStory = FullStory; | ||
@@ -112,7 +159,7 @@ | ||
```javascript | ||
import { createApp } from 'vue' | ||
import App from './App.vue' | ||
import * as FullStory from '@fullstory/browser'; | ||
import { createApp } from 'vue'; | ||
import App from './App.vue'; | ||
import { init as initFullStory, FullStory } from '@fullstory/browser'; | ||
FullStory.init({ orgId: '<your org id here>' }); | ||
initFullStory({ orgId: '<your org id here>' }); | ||
@@ -126,3 +173,3 @@ const app = createApp(App); | ||
Once FullStory is initialized, you can make calls to the FullStory SDK. | ||
Once FullStory is initialized, you can make calls to the FullStory SDK. See the [developer documentation](https://developer.fullstory.com/browser/v2/getting-started/) for more information. | ||
@@ -132,30 +179,61 @@ ### Sending custom events | ||
```JavaScript | ||
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'], | ||
FullStory('trackEvent', { | ||
name: 'Subscribed', | ||
properties: { | ||
uid: '750948353', | ||
plan_name: 'Professional', | ||
plan_price: 299, | ||
plan_users: 10, | ||
days_in_trial: 42, | ||
feature_packs: ['MAPS', 'DEV', 'DATA'], | ||
}, | ||
schema: { | ||
properties: { | ||
plan_users: 'int', // override default inferred "real" type with "int" | ||
days_in_trial: 'int', // override default inferred "real" type with "int" | ||
} | ||
} | ||
}); | ||
``` | ||
> **NOTE:** The inclusion of type suffixes - appending `_str` or `_int` to the end of properties - is no longer required. All custom properties are inferred on the server. To override any default inference, you can add a `schema`. See [Custom Properties](https://developer.fullstory.com/browser/v2/custom-properties/) for more information. | ||
### Generating session replay links | ||
```JavaScript | ||
const startOfPlayback = FullStory.getCurrentSessionURL(); | ||
const playbackAtThisMomentInTime = FullStory.getCurrentSessionURL(true); | ||
const startOfPlayback = FullStory('getSession'); | ||
const playbackAtThisMomentInTime = FullStory('getSession', { format: 'url.now' }); | ||
``` | ||
### Sending custom page data | ||
### Sending custom user properties | ||
```JavaScript | ||
FullStory.setVars('page', { | ||
pageName : 'Checkout', // what is the name of the page? | ||
cart_size_int : 10, // how many items were in the cart? | ||
used_coupon_bool : true, // was a coupon used? | ||
FullStory('setProperties', { | ||
type: 'user', | ||
properties: { | ||
displayName: 'Daniel Falko', | ||
email: 'daniel.falko@example.com', | ||
pricing_plan: 'free', | ||
popup_help: true, | ||
total_spent: 14.50, | ||
}, | ||
}); | ||
``` | ||
For more information on setting page vars, view the FullStory help article on [Sending custom page data to FullStory](https://help.fullstory.com/hc/en-us/articles/1500004101581-FS-setVars-API-Sending-custom-page-data-to-FullStory). | ||
For more information on sending custom user properties, view the FullStory help article on [Capturing custom user properties](https://help.fullstory.com/hc/en-us/articles/360020623294). | ||
#### Note | ||
`FullStory.setVars(<scope>, <payload>)` currently only supports a string value of "page" for the scope. Using arbitrary strings for the scope parameter will result in an Error that will be logged to the browser console or discarded, depending on whether devMode or debug is enabled. | ||
### Sending custom page properties | ||
```JavaScript | ||
FullStory('setProperties', { | ||
type: 'page', | ||
properties: { | ||
pageName: 'Checkout', // what is the name of the page? | ||
cart_size: 10, // how many items were in the cart? | ||
used_coupon: true, // was a coupon used? | ||
}, | ||
schema: { | ||
properties: { | ||
cart_size: 'int', // override default inferred "real" type with "int" | ||
} | ||
} | ||
}); | ||
``` | ||
For more information on setting page properties, view the FullStory help article on [Sending custom page data to FullStory](https://help.fullstory.com/hc/en-us/articles/1500004101581-FS-setVars-API-Sending-custom-page-data-to-FullStory). |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
39446
230