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 (18 - 20) 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.

Copyright and license

Licensed and distributed under the BSD 3-Clause License (An OSI Approved License).

Copyright (c) 2023 Snowplow Analytics Ltd.

All rights reserved.