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.
The plugin is available since version 3.13 of the tracker.
Web vitals events are automatically tracked once configured.
Install plugin
- JavaScript (tag)
- Browser (npm)
| Tracker Distribution | Included |
|---|---|
sp.js | ❌ |
sp.lite.js | ❌ |
Download:
| Download from GitHub Releases (Recommended) | Github Releases (plugins.umd.zip) |
| Available on jsDelivr | jsDelivr (latest) |
| Available on unpkg | unpkg (latest) |
window.snowplow(
'addPlugin',
'https://cdn.jsdelivr.net/npm/@snowplow/browser-plugin-web-vitals@3/dist/index.umd.min.js',
['snowplowWebVitals', 'WebVitalsPlugin']
);
npm install @snowplow/browser-plugin-web-vitals@3yarn add @snowplow/browser-plugin-web-vitals@3pnpm add @snowplow/browser-plugin-web-vitals@3
import { newTracker } from '@snowplow/browser-tracker';
import { WebVitalsPlugin } from '@snowplow/browser-plugin-web-vitals';
newTracker('sp1', '{{collector_url}}', {
appId: 'my-app-id',
plugins: [ WebVitalsPlugin() ],
});
Configuration
The Web Vitals plugin can be initialized with a couple of options allowing for customizing its behavior:
| Option | Type | Description | Default value |
|---|---|---|---|
| loadWebVitalsScript | boolean | Should the plugin immediately load the Core Web Vitals measurement script from UNPKG CDN. | true |
| webVitalsSource | string | The 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 |
| context | DynamicContext | Context 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.