Generic site timing tracking#

Use the trackTiming method to track user timing events such as how long resources take to load. This method is provided as part of the site-tracking plugin.

Timing events must be manually tracked.

Install plugin#

JavaScript (tag)

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)

Note: The links to the CDNs above point to the current latest version. You should pin to a specific version when integrating this plugin on your website if you are using a third party CDN in production.

window.snowplow('addPlugin',
  "https://cdn.jsdelivr.net/npm/@snowplow/browser-plugin-site-tracking@latest/dist/index.umd.min.js",
  ["snowplowSiteTracking", "SiteTrackingPlugin"]
);

Browser (npm)

• npm install @snowplow/browser-plugin-site-tracking
• yarn add @snowplow/browser-plugin-site-tracking
• pnpm add @snowplow/browser-plugin-site-tracking

import { newTracker, trackPageView } from '@snowplow/browser-tracker';
import { SiteTrackingPlugin, trackSiteSearch } from '@snowplow/browser-plugin-site-tracking';

newTracker('sp1', '{{collector_url}}', {
   appId: 'my-app-id',
   plugins: [ SiteTrackingPlugin() ],
});

Timing event#

Use the trackTiming method to track how long something took. Here are its arguments:

Name	Required?	Description	Type
category	Yes	Timing category	string
variable	Yes	Timed variable	string
timing	Yes	Number of milliseconds elapsed	number
label	No	Label for the event	string

An example:

JavaScript (tag)

snowplow('trackTiming', {
  category: 'load',
  variable: 'map_loaded',
  timing: 50,
  label: 'Map loading time'
});

Browser (npm)

import { trackTiming } from '@snowplow/browser-plugin-site-tracking';

trackTiming({
  category: 'load',
  variable: 'map_loaded',
  timing: 50,
  label: 'Map loading time'
});

Timing events are implemented as Snowplow self describing events. Here is the schema for a timing event.