Documentation

Installation

Install the PagePulse browser SDK in under 2 minutes. Supports npm, script tag, Next.js, React, Vue, and more.

The PagePulse browser SDK is a 4KB gzipped package with zero runtime dependencies. It uses the beacon API for non-blocking uploads and respects the user's Save-Data header. Installation takes under 2 minutes.

Install the package

Install @pagepulse/web from npm. The package ships with full TypeScript types and works in any modern bundler.

bash

npm install @pagepulse/web

# or
yarn add @pagepulse/web
pnpm add @pagepulse/web

Initialize the SDK

Call PagePulse.init once on page load, before any user interaction. The projectId is required and identifies which PagePulse workspace the data should be sent to. You can find your project ID in the workspace settings page.

typescript

import { PagePulse } from '@pagepulse/web';

PagePulse.init({
  projectId: 'site_123',
  trackWebVitals: true,
  trackRoutes: true,
  trackErrors: true,
});

Script tag install

If you do not use a bundler, you can install PagePulse with a single script tag. Add it to the <head> of every page, before any other scripts.

html

<script src="https://cdn.pagepulse.dev/v2/pagepulse.min.js"></script>
<script>
  PagePulse.init({
    projectId: 'site_123',
    trackWebVitals: true,
    trackRoutes: true,
  });
</script>

Next.js integration

For Next.js App Router, create a client component that initializes PagePulse on mount. Place it inside your root layout so it loads on every route.

typescript

'use client';

import { useEffect } from 'react';
import { PagePulse } from '@pagepulse/web';

export function PagePulseProvider({
  projectId,
}: {
  projectId: string;
}) {
  useEffect(() => {
    PagePulse.init({
      projectId,
      trackWebVitals: true,
      trackRoutes: true,
      trackErrors: true,
    });
  }, [projectId]);

  return null;
}

That's it. Within 60 seconds, the first real-user Web Vitals samples will appear in your dashboard.

Verification

To verify the SDK is working, open your browser's developer tools and look for a network request to ingest.pagepulse.dev. The request will be sent using the beacon API, so it will appear in the Network tab as type 'ping'.

Have a question about this doc?

Contact support|API reference|support@pagepulse.dev