core-web-vitals

@guardian/core-web-vitals

Installation

yarn add @guardian/core-web-vitals

or

npm install @guardian/core-web-vitals

then

import {
	initCoreWebVitals,
	bypassCoreWebVitalsSampling,
} from '@guardian/core-web-vitals';

Bundling

This package uses ES2020.

If your target environment does not support that, make sure you transpile this package when bundling your application.

Usage

By default, a sampling rate is set at 1% for which Core Web Vitals will be gathered and sent. It is possible to set this sampling to a different value at initialisation or bypass it asynchronously (see below).

import { initCoreWebVitals, getCookie } from '@guardian/core-web-vitals';

// browserId & pageViewId are needed to join up the data downstream.
const init: InitCoreWebVitalsOptions = {
	browserId: getCookie({ name: 'bwid', shouldMemoize: true }),
	pageViewId: guardian.config.ophan.pageViewId,

	// Whether to use CODE or PROD endpoints.
	isDev: window.location.hostname !== 'www.theguardian.com',
};

initCoreWebVitals(init);

init.sampling

Sets a sampling rate for which to send data to the logging endpoint.

Defaults to 1 / 100.

const init: InitCoreWebVitalsOptions = {
	isDev: false,

	// Send data for 20% of page views. Inform Data Tech team about expected
	// spikes in data ingestion
	sampling: 20 / 100,
};

initCoreWebVitals(init);

init.team

Optional team name to log whether the payload has been successfully queued for transfer.

const init: InitCoreWebVitalsOptions = {
	isDev: false,
	sampling: 100 / 100,
	team: 'dotcom',
};

initCoreWebVitals(init);

// should call log('dotcom', 'Core Web Vitals payload successfully queued […]')

bypassCoreWebVitalsSampling

Allows to asynchronously bypass the sampling rate.

Takes an optional team name for which to print logs for.

/* … after having called initCoreWebVitals() … */

addEventListener('some-event', () => {
	// CWV will be sent for all page views where `some-event` was triggered
	bypassCoreWebVitalsSampling();
});

Types

CoreWebVitalsPayload

type CoreWebVitalsPayload = {
	page_view_id: string | null;
	browser_id: string | null;
	fid: null | number;
	cls: null | number;
	lcp: null | number;
	fcp: null | number;
	ttfb: null | number;
};

InitCoreWebVitalsOptions

type InitCoreWebVitalsOptions = {
	isDev: boolean;

	browserId?: string | null;
	pageViewId?: string | null;

	sampling?: number;
	team?: TeamName;
};