@snowplow/browser-plugin-web-vitals NPM

Snowplow Web Vitals Tracking

Browser Plugin to be used with @snowplow/browser-tracker.

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.

Maintainer quick start

Part of the Snowplow JavaScript Tracker monorepo.
Build with Node.js (14 or 16) and Rush.

Setup repository

npm install -g @microsoft/rush 
git clone https://github.com/snowplow/snowplow-javascript-tracker.git
rush update

Package Installation

With npm:

npm install @snowplow/browser-plugin-web-vitals

Usage

Initialize your tracker with the WebVitalsPlugin:

import { newTracker } from '@snowplow/browser-tracker';
import { WebVitalsPlugin } from '@snowplow/browser-plugin-web-vitals';

newTracker('sp1', '{{collector}}', { plugins: [ WebVitalsPlugin(/* pluginOptions */) ] });

/* 
 * Available plugin options `WebVitalsPluginOptions`:
 * {
 *  loadWebVitalsScript: Should the plugin immediately load the Core Web Vitals measurement script from UNPKG CDN.
 *  webVitalsSource: The URL endpoint the Web Vitals script should be loaded from. Defaults to the UNPKG CDN.
 *  context: Array of entity objects or entity-generating functions (the web_vitals payload is passed as a parameter) to attach to the web_vitals event.
 * }
 */

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.