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

Start Page

Call fsPage.start() to signal the start of a view for the page (see Create Pages). Nested page views are not supported. That will be considered the current page until fsPage.end() or another fsPage.start() is called.

This is analogous to the mount lifecycle event in a component and should typically be called in useEffect or componentDidMount, but this may be called at any time when your page boundary is not tied to a Component transition (e.g., a single authentication Component toggles between login and sign up).

Subsequent calls to start will be considered distinct views of the page.

When calling start with page properties as a parameter, the page properties will be updated before the view of the page starts. This will merge the properties similar to calling updateProperties, not replace all current properties, but the update and start will occur as a single event.

Parameters

propertyUpdates object optional

An object containing properties of the page that will be indexed by Fullstory. These properties will be merged with any current properties before the page is started.

Caveats

If the user changes (i.e., by calling FullStory.anonymize() when a user is set or by calling FullStory.identify() when a different non-anonymous user is set), a new session will start, and the current page will not be defined. You must call fsPage.start() again if you would like the previous page view data to be set in the new user's session.

fsPage.start() and other page-related methods may be called while Fullstory capture is shut down. However, only the current page data at the time restart is called will be captured. For example, consider the case in which events happen in the following order (represented in pseudocode):

• pageA = new FSPage("PageA", { "var1": 1 })
• pageA.start()
• FullStory.shutdown()
• pageA.update({ "var1": 2 })
• new FSPage("PageB").start()
• pageC = new FSPage("PageC", { "var1": 1 })
• pageC.start()
• pageC.update({ "var2": "C" })
• FullStory.restart()

In playback you would see: PageA has a property var1 with a value of 1; capture stops; and then capture resumes with PageC which has a property var1 with a value of 1 and var2 with a value of "C". The update of var1 to 2 on PageA and the page view for PageB are lost, because these were never properties of the current page while capture was enabled.

Limits

See Create Pages — Limits

Additional Information

• Mobile App Pages and Heatmaps in Fullstory

start(properties?: object): void;

Example Invocations

Start a page view for a page in the app

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

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

Start a page view for a Cart page updated with the current item count

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

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

  const startPage = () => {
    pageRef.current.start({ cartSize: 3 })
  }
  ⋮
}

Capture a page view when property updates and manual ending are not needed

const HomeScreen = () => {
  useEffect(() => {
    new FSPage("Home").start();
  }, []);
  ⋮
}