@snowplow/browser-plugin-performance-timing

What is @snowplow/browser-plugin-performance-timing?

@snowplow/browser-plugin-performance-timing is a plugin for the Snowplow JavaScript tracker that allows you to capture and track performance timing metrics from the browser. This can be useful for monitoring and analyzing the performance of your web applications.

What are @snowplow/browser-plugin-performance-timing's main functionalities?

Initialize Performance Timing Tracking

This code initializes the Snowplow tracker with the Performance Timing plugin. It sets up the tracker to start capturing performance timing metrics from the browser.

const { newTracker } = require('@snowplow/browser-tracker');
const { PerformanceTimingPlugin } = require('@snowplow/browser-plugin-performance-timing');

newTracker('sp1', '{{collector_url}}', { plugins: [ PerformanceTimingPlugin() ] });

Track Performance Timing Events

This code demonstrates how to manually track a performance timing event. It captures the 'navigationStart' timing and sends it as an event to the Snowplow collector.

const { trackPerformanceTiming } = require('@snowplow/browser-plugin-performance-timing');

trackPerformanceTiming({
  category: 'Page Load',
  action: 'load',
  label: 'homepage',
  property: 'navigationStart',
  value: performance.timing.navigationStart
});

Other packages similar to @snowplow/browser-plugin-performance-timing

web-vitals

The 'web-vitals' package is a library for measuring essential web performance metrics. It provides a simple API to capture metrics like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Compared to @snowplow/browser-plugin-performance-timing, 'web-vitals' focuses on core web vitals metrics and is more specialized in that area.

perfume.js

Perfume.js is a library for measuring the performance of web applications. It provides a high-level API to capture various performance metrics, including First Contentful Paint (FCP), Time to Interactive (TTI), and more. Perfume.js offers more built-in metrics and higher-level abstractions compared to @snowplow/browser-plugin-performance-timing.

performance-timing

The 'performance-timing' package is a simple utility for extracting performance timing metrics from the browser. It provides a straightforward API to access various performance timing attributes. While it offers similar functionality to @snowplow/browser-plugin-performance-timing, it lacks the integration with a tracking system like Snowplow.

README

Snowplow Performance Timing Tracking

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

Adds Performance Timing contexts to your Snowplow tracking.

Maintainer quick start

Part of the Snowplow JavaScript Tracker monorepo.
Build with Node (10+) 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-performance-timing

Usage

Initialize your tracker with the PerformanceTimingPlugin:

import { newTracker } from '@snowplow/browser-tracker';
import { PerformanceTimingPlugin } from '@snowplow/browser-plugin-performance-timing';

newTracker('sp1', '{{collector}}', { plugins: [ PerformanceTimingPlugin() ] }); 

Copyright and license

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

Copyright (c) 2021 Snowplow Analytics Ltd, 2010 Anthon Pang.

All rights reserved.