Skip to main content

Core web vitals tracking

The plugin adds the capability to track web performance metrics categorized as Web Vitals. These metrics are tracked with an event based on the web_vitals schema. To make sure it collects the most complete values for the web vital metrics, the plugin uses a set of browser APIs to detect and send the event as the visitor is leaving the current page in the browser.

To collect the web vitals data, the plugin loads the web-vitals open source library dynamically on your page.

note

The plugin is available since version 3.13 of the tracker.

Web vitals events are automatically tracked once configured.

Install pluginโ€‹

Tracker DistributionIncluded
sp.jsโŒ
sp.lite.jsโŒ

Download:

Download from GitHub Releases (Recommended)Github Releases (plugins.umd.zip)
Available on jsDelivrjsDelivr (latest)
Available on unpkgunpkg (latest)
window.snowplow(
'addPlugin',
'https://cdn.jsdelivr.net/npm/@snowplow/browser-plugin-web-vitals@latest/dist/index.umd.min.js',
['snowplowWebVitals', 'WebVitalsPlugin']
);

Configurationโ€‹

The Web Vitals plugin can be initialized with a couple of options allowing for customizing its behaviour:

OptionTypeDescriptionDefault value
loadWebVitalsScriptbooleanShould the plugin immediately load the Core Web Vitals measurement script from UNPKG CDN.true
webVitalsSourcestringThe URL endpoint the Web Vitals script should be loaded from. Defaults to the UNPKG CDN.https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js
contextDynamicContextContext entities to add to the tracked event. Can be provided either as an array of self-describing JSONs or function that returns a context entity. (available from version 3.19)

See the example for configuring Plugins After Initialization on how these options can be used.

Using an already existing Web Vitals library sourceโ€‹

There could be cases where your page or one of the loaded JavaScript bundles already include the web-vitals library. In those cases, there is no need to load it an additional time from the plugin. If this is the case, you have to make sure that the library APIs are exposed in the window object properly as well.

Choosing a Web Vitals measurement sourceโ€‹

The default Web Vitals measurement script is loaded from the UNPKG CDN. This choice is chosen as a default but you should consider your own setup when choosing the script source. Selecting a script source from a CDN which might already be used in your website might save you from yet another connection startup time (Queueing,DNS lookup,TCP, SSL).

Another reasonable choice could be jsDelivr.

Was this page helpful?