Menu
Grafana Cloud

Page tracking

Faro provides a page tracker that updates the page metadata attached to each signal.

By default, it includes the following properties:

  • url - the URL of the page where a signal is created (default)
  • attributes - an object containing attributes of the type string (optional)
  • id - a short presentation of the page URL (optional)
typescript
interface MetaPage {
  url: string;
  id?: string;
  attributes?: MetaAttributes;
}

Configure the page tracker

Faro’s page tracker is flexible and you can configure it to accommodate your needs.

API

You can change the page metadata by calling the setPage(page: PageMeta) function (faro.api.setPage(pageMeta)). You can retrieve the current active page metadata by calling the getPage() function (faro.api.getPage()).

Page ID generation

Faro doesn’t set a page ID by default. Instead, the Faro cloud receiver creates and attaches it to Faro signals.

There are cases where default page ID parsers don’t fit every user’s needs. In these cases, you can override the receiver’s page ID creation by adding a page to the page metadata.

Use the setPage(page: string) to set a page ID override (faro.api.getPage('my-ne-page-id')).

Advanced page ID creation

Faro allows you to provide a custom page ID generator function that it uses to update the page ID continuously.

You can set this up in the pageTracking configuration object.

typescript
initializeFaro({
  url: 'https://my-domain.my-tld/collect/{app-key}',
  app: {
    name: 'my-app',
  },
  // ...
  pageTracking: {
    // For advanced use cases, double check if setPage('new-page-id') fits your use case better
    generatePageId(location) {
      return myCustomParser(location.pathname);
    },
  },
});

Configure the session tracker

You can configure the following options via the pageTracking object when initializing Faro:

  • page customizes the initial page metadata. Added attributes are attached to each page metadata until changed explicitly by using the setPage(pageMeta) function.
  • generatePageId is a custom parser that is used to parse the page id constantly in advanced use cases.
typescript
initializeFaro({
  url: 'https://my-domain.my-tld/collect/{app-key}',
  app: {
    name: 'my-app',
  },
  // ...
  pageTracking: {
    page: {
      id: 'my-initial-page-id'
      attributes: { /* ... */ }
    }
    // For advanced use cases. Double-check if setPage('new-page-id') fits your use case better.
    generatePageId(location) {
      return myCustomParser(location.pathname);
    },
  },
});