Skip to main content

Since: 1.41.0, @fullstory/react-native: 1.3.0

Create Pages​

Call new FSPage("<pageName>") to create a new FSPage instance for a page of type pageName. This object will be used to instrument the start and end of views of the page and to update the page's properties. You MUST call fsPage.start() after creating the page to signal the start of the view of the page.

Nested pages are not supported. There will only ever be one (or zero) page(s) active at a time, which will be the page that was most recently start-ed (but not end-ed).

If you want to call fsPage.updateProperties(<properties>) or fsPage.end() on the page, you would typically call this method to create the FSPage once in your Component's componentDidMount() or useEffect() method, the first time the view mounts. However, if you have no need to call these methods, you may simply call new FSPage.("<name>", <properties>).start(). (see Start Page for more information).

Parameters
    pageName string required

    The name of the page.

    properties object optional

    An Object containing properties of the page that will be indexed by Fullstory.

Conventions​

Use constant values when choosing a pageName and put dynamic or differentiating info in the properties. For example, instead of having a "merchantX" page for each merchant in an e‑commerce app, use "Merchant" as the pageName and add "merchantName": "merchantX" as a page property. Use properties for values you would want to search on. See Limits below.

Limits​

  • Capture up to 50 unique properties (exclusive of pageName) on a single page.
  • Capture up to 500 unique properties across all pages.
  • The pageName field is limited to 1,000 unique values. Any new pageName values sent past this limit will be ignored.

Additional Information​

class FSPage {
  constructor(pageName: string, properties?: object);
  ⋮
}

import { FSPage } from '@fullstory/react-native';

Example Invocations​

Create an FSPage for a homepage without properties​

const HomeScreen = () => {
  const pageRef = useRef(null);

  useEffect(() => {
    pageRef.current = new FSPage("Home");
  }, []);
  ⋮
}

Create an FSPage for an e‑commerce product page with properties​

class ProductScreen extends React.Component {
  constructor(props) {
    super(props);
    this.page = null;
  }

  componentDidMount() {
    this.page = new FSPage("Product", {
      "productId": "798ith22928347",
      "category": "Clothing",
      "name": "Button Front Cardigan",
      "brand": "Bright & Bold",
      "variants": [ "Blue", "Red", "White" ],
      "url": "https://www.example.com/product/path"
    });
  }
  ⋮
}