MetricPoints logo
Features Pricing Docs Blog Security Checker FREE TOOL CSP Policy Builder FREE TOOL Login Get Started Features

Event Tracking

JavaScript event tracking and monitoring

Event Tracking Setup

Choose an Installation Method

Each browser telemetry project has an API key and collector endpoint. Use the WordPress plugin for WordPress sites, or add the JavaScript browser beacon to your application layout for Laravel, React, and other sites.

Download Browser Beacon Download WordPress Plugin

Simple Hosted JavaScript Snippet

This catch-all snippet works on most sites. Replace YOUR_API_KEY with the API key from your project page, and set environment to match where the site is running. Managed-service project pages also provide this simple snippet with the API key, endpoints, and package-safe telemetry settings already filled in. 

<script src="https://metricpoints.com/js/metric-points-browser-beacon.min.js" data-metric-points-browser-beacon="1" crossorigin="anonymous"></script>
<script>
if (window.MetricPointsBrowserBeacon && window.MetricPointsBrowserBeaconConfig) {
    window.MetricPointsBrowserBeacon.init(new window.MetricPointsBrowserBeaconConfig({
        apiKey: 'YOUR_API_KEY',
        endpoint: 'https://metricpoints.com/api/error-reports',
        performanceEndpoint: 'https://metricpoints.com/api/performance-sessions',
        environment: 'production',
        autoStart: true
    }));
}
</script>

Common Use Cases

Production Error Monitoring

Capture uncaught JavaScript events and promise rejections from public pages after deploys.

Release Verification

Tag reports with release or buildId so regressions can be tied back to a deploy.

Performance and Web Vitals

Collect Core Web Vitals and browser performance sessions alongside frontend events.

Client Site Handoffs

Create one project per client site, copy the generated snippet, and confirm reports after launch.

Platform Procedures

WordPress

WordPress can be connected with the MetricPoints plugin or by inserting the JavaScript snippet into the site header. Use the plugin when you want a WordPress admin screen; use script insert when you already manage snippets centrally or cannot install another plugin.

Option 1: Plugin
  1. Create an Event Tracking project in MetricPoints for the WordPress site's domain.
  2. Download the MetricPoints Browser Beacon plugin.
  3. Upload it in WordPress under Plugins → Add New → Upload Plugin.
  4. Activate the plugin, then open Settings → MetricPoints Browser Beacon.
  5. Paste the project API key, enable browser beacon tracking, and save the settings.
  6. Load the public site and use the plugin test action or a temporary test error to confirm reports arrive.
Download the WordPress plugin
Option 2: Script Insert
  1. Create an Event Tracking project in MetricPoints for the WordPress site's domain.
  2. Copy the generated project snippet from the MetricPoints project page.
  3. Open your snippets, header/footer, or custom-code plugin in WordPress.
  4. Add the snippet to the site-wide header so it loads before </head>.
  5. Save, clear page cache/CDN cache, then load the public site in a normal browser session.
  6. Trigger a controlled test error and confirm the report appears in MetricPoints.

This works with common WordPress code-snippet or header-injection plugins, and with themes that provide a site-wide head/script field.

Laravel Site

  1. Create an Event Tracking project for the Laravel application's public domain.
  2. Add the hosted snippet to the main Blade layout, usually resources/views/layouts/app.blade.php, before </head>.
  3. Put the API key in an environment variable such as VITE_METRICPOINTS_API_KEY or paste the project snippet directly if the layout is private.
  4. Set environment to production, staging, or the current Laravel environment.
  5. Deploy, clear cached views/config if needed, then trigger a controlled browser-side test error.
<!-- resources/views/layouts/app.blade.php -->
<script src="https://metricpoints.com/js/metric-points-browser-beacon.min.js" defer></script>
<script>
  window.addEventListener('load', function () {
    window.MetricPointsBrowserBeacon.init(new MetricPointsBrowserBeaconConfig({
      apiKey: 'YOUR_API_KEY',
      environment: 'production',
      autoStart: true
    }));
  });
</script>

React

  1. Create an Event Tracking project for the deployed React app domain.
  2. Add the tracker script to public/index.html for Create React App, or index.html for Vite.
  3. Initialize the tracker once before rendering the app, typically in src/main.jsx or src/index.jsx.
  4. Use environment variables for the API key and release/build metadata.
  5. Deploy and verify by checking the browser network tab for posts to /api/error-reports.
// src/main.jsx
window.MetricPointsBrowserBeacon?.init(new window.MetricPointsBrowserBeaconConfig({
  apiKey: import.meta.env.VITE_METRICPOINTS_API_KEY || 'YOUR_API_KEY',
  environment: import.meta.env.MODE || 'production',
  release: import.meta.env.VITE_APP_VERSION || null,
  autoStart: true
}));

Generic or Catch-All Website

  1. Create one MetricPoints project for each production domain you want to monitor.
  2. Use the hosted script from MetricPoints or download metric-points-browser-beacon.min.js and serve it with your other assets.
  3. Paste the generated project snippet into the shared page header, template, tag manager, or CMS custom code area.
  4. Keep the collector endpoint set to https://metricpoints.com/api/error-reports unless support tells you otherwise.
  5. Open a page, trigger a test browser event, and confirm the report appears in the MetricPoints project.

Use the simple generated snippet on the project page when possible. It contains the correct API key, collector endpoints, and package-safe telemetry defaults for that project. Use the advanced snippet only when an implementer needs every resolved telemetry control inline.

Configuration Options

Event Tracking

Monitor JavaScript events with detailed stack traces

Performance Tracking

Track Core Web Vitals and performance metrics

User Tracking

Monitor user sessions and behavior patterns

Custom Events

Track custom events and user interactions