Customize SPA tracking for your stack
In order to track Core Web Vitals of SPA's, RUMvision snippet v4 is needed.
When switching to v4, the minimally required web-vitals version (3.5.0) will automatically be enforced as well if not configured yet.
Experimental status
Before enabling, site owners should be aware that the web-vitals soft-nav branch is experimental and subject to change. That's because the soft navigations API is in origin trial and thus experimental as well. That's why it is important to note that things might slightly change before being deployed to Chromium.
Additionally, there will be a moment between the expiration of the origin trial and when it will be deployed to Chromium stable. This could mean that between those dates, soft navigations will be disabled in Chromium browsers and your data will look differently in between those moments.
Currently, the expiration date of the origin trial is March 6th, 2024 at time of writing. But even this date might be subject to change.
Soft-nav fallback
When soft navigations is disabled by Chromium, we will send a newsletter and point to this article. Site owners could then choose to:
- sit and wait until soft navigations becomes available again for everyone.
As a result, site owners will temporarily not see anysoft_navigationresults within thenavigationtypedimension. - switch back to non-soft navigation tracking.
As a result, your script will fall back to state changes, and report accordingly. Data might be slightly different and will be reported with the state name that triggered a new pagehit, instead of reportingsoft_navigationasnavigationtype.
SPA configuration steps
To start monitoring soft navigations within your SPA, you should be logged into our application and go to your domain's snippet settings. The steps below can then be found in the first panel called General after opening the configuration modal.
Is it an SPA?
The first important question to answer is "Is your site a Single Page Application". If your site is an SPA, you should let us know here.
When you select "yes":
- your domain's specific JavaScript will change accordingly.
- additional questions will become available within the configuration modal.
The next question will then be as following:
Eligible for soft navigations?
The next question is "Is your SPA eligible for soft navigations".
We ask this question as not all SPA's will meet the soft navigation API heuristics. But we do want to ship only the necessary JavaScript.
When enabled but no navigationtype: soft_navigation data is coming, this could mean your site does not meat the heuristics. You will then need to switch to our fallback by selecting"no".
State change event listeners
When selecting no, we can't hook into page navigations via the soft navigations API. We then need to fall back to using event listeners. For example by listening to pushState or replaceState. Not all sites are using the same methods, and some sites even use both. Only you know (or are able to inquire within your development team) which is the correct on.
You could enable both as we will report the used state within the navigationtype dimension. When you see duplicate or similar results and incorrect TTFB results, you will be able to determine which state should be removed from this list.
SPA endpoint
Even within Single Page Applications, contents of a page needs to come from a source. Providing a value here will help us to ignore resources that won't be responsible for retrieving page contents upon user interaction. This will then help the performance of our tracking snippet as well.
For NextJS sites, this will (almost always) be the /_next/data/ directory with your domain's origin. If you actually shared your domain's tech stack and NextJS included, then we will be using this automatically. Otherwise, if you provided an SPA endpoint value, we will be using that.
SPA initiator type
On top of scanning for the correct resources via the provided endpoint (sub)string, we can also filter out images and beacon resources that are served via your domain or provided endpoint. This will reduce any web performance impact even more.
This can be done by providing the initiator type for your endpoint calls. If you're unsure what to use here, we suggest to at least providing an SPA endpoint and leave this field blank.
Depending on the stack you shared with us, we will autofill this value (for example to fetch in the case of NextJS) when we detected that this field was left empty.