This is a component library that encourages developers to build with components suped up with Fullstory functionality.
Run npm install @fullstory/react-library
The defualt configuration will capture all of the information in the url, meta tags, and schemas. The page name by default comes from the url path.
Implementation:
Wrap your Routes with <FullStoryProvider>
like so
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
<FullStoryProvider>
<Routes>
{...}
</Routes>
</FullStoryProvider>
)
}
The url configuration will set page names and properties according to the url. It will set configure the pageName from the path and properties from the search.
Implementation:
Add the capture rule of url
to your FullStoryProvider
.
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
<FullStoryProvider defaultCapture={["url"]}>
<Routes>
{...}
</Routes>
</FullStoryProvider>
)
}
The meta configuration will capture all of the information in the meta tags. It will configure the pageName from the title tag in the head.
Implementation:
Add the capture rule of meta
to your FullStoryProvider
.
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
<FullStoryProvider defaultCapture={["meta"]}>
<Routes>
{...}
</Routes>
</FullStoryProvider>
)
}
The schema configuration will capture all of the information in the schemas on the page. It will configure the pageName from the url path.
Implementation:
Add the capture rule of schema
to your FullStoryProvider
.
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
<FullStoryProvider defaultCapture={["schema"]}>
<Routes>
{...}
</Routes>
</FullStoryProvider>
)
}
Multi Capture Configuration will by defualt capture information from certain aspects of the page.
Implementation:
Add the capture rules you would like to your FullStoryProvider
.
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
<FullStoryProvider defaultCapture={["url", "schema"]}>
<Routes>
{...}
</Routes>
</FullStoryProvider>
)
}
Additionally, we can overried the default capture rules by adding capture rules to specific pages.
Implementation:
Add the capture rules by defining the page and the rule you expect to FullStoryProvider
.
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
<FullStoryProvider defaultCapture={["url"]} pageCaptureRules={{"dashboard": ["schema", "meta"]}}>
<Routes>
<Route path="/" element={<HomePage />}/>
<Route path="/dashboard" element={<Dashboard />}/>
</Routes>
</FullStoryProvider>
)
}
If you would like FullStory to capture custom pagenames and properties we can use the hook useFSNavigate()
. The page name will be set to your custom pagename and the custom properties will be added to the properties captured by the default configuration or page configuration rules.
Implementation:
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
<FullStoryProvider>
<Routes>
{...}
</Routes>
</FullStoryProvider>
)
}
Then we can use the hook anywhere within the provider like this:
import { useFSNavigate } from "@fullstory/react-library";
const Button = (props) => {
const { property } = props
const nav = useFSNavigate()
return (
<button onClick={() => nav("/", "Home Page", {property_1: property})}>
Home Page
</button>
)
}