NuxtJS

RUMvision does not offer an out of the box implementation for TTFB tracking of NuxtJS soft navigations. In order to properly track TTFB of soft navigations, additional configuration is needed.

  • First, enable SPA setting in your snippet configuration;
  • LCP and other metrics will already start collecting after saving;
  • Additional configuration is needed for TTFB tracking.

Endpoint patterns

The next step in configuring RUMvision for your NuxtJS site involves defining dynamic patterns for matching endpoints to your page templates.

Placeholder patterns

Both regular expressions as well as substring matching is supported. This means you can either provide a regular expression or a string with placeholders.

Let's say your page URL is as following:

animals.com/en/category/dog/food.html

And your endpoint is as following:

/api/categories/food?lang=en&slug=dog

We will split up the page pathname before matching. This means the pathname segments and extension becomes available as placeholders at their respective index:

  • 0 = en
  • 1 = category
  • 2 = dog
  • 3 = food
  • 4 = .html

So, your patterns should then be as following to match the right endpoint request with the page request:

/api/categories/{3}?lang={0}&slug={2}

These placeholders will then be replaced first before final regular expression or substring matching is applied.

Custom transformations

We now support custom transformation functions, which you can apply to placeholders for more complex data manipulation. These functions allow you to modify segment data before it's used in the pattern. Examples include:

  • JavaScript functions
    For example to convert the text in your URL to lowercase text, when your endpoint URL's are using lowercase characters only.
    An example
    /city/NewYork/
    {1|toLowerCase}
  • Custom functions
    For example to perform very specific tasks. An example could be to extract the product id from a product detail page URL, when your product pages contain full id and product name for SEO, while your endpoint only needs the id.
    An example:
    /kids/jeans/12345-comfort-blue.html
    {2|extractIdentifier}

These transformations are applied sequentially, ensuring that each step is processed in the order defined. A full pattern could then look as following:

/api/categories/{3|toLowerCase|removeDashes}?lang={0}&slug={2}

Finding the right pattern

To identify the right endpoint with the right page types, you might want to open up the network panel in your DevTools, and spot which fetch requests are made when navigating around. Try to identify a unique pattern for URL's that share the same template type.

Providing a endpoint pattern

Go to your domain's URL settings:

  • change a URL;
  • navigate to the "Advanced" panel;
  • you will see an additional field when SPA is enabled in your snippet configuration.
  • within that field, you can provide the regular expression.

Table of Contents