Adding analytics to React apps

Panelbear is often used with React-based single-page apps. First, you'll need to add your site to Panelbear. You'll get a tracking snippet for your web app.

The tracking snippet is a small piece of code that runs on your website, and it collects the anonymous metrics which powers your dashboards.

There's two ways to integrate this snippet with your React app - let's take a look.

Method 1: Add the script to your HTML document header

Just add the script shown in your Site Settings to your website's HTML <head> section.

You can enable the option spaMode: 'history' to automatically track navigation changes on the client.

For example (don't forget to set your Site ID in both locations):

<!-- Panelbear -->
<script async src=""></script>
    window.panelbear = window.panelbear || function() { (window.panelbear.q = window.panelbear.q || []).push(arguments); };
    panelbear('config', {
        site: 'YOUR_SITE_ID',
        spaMode: 'history',
        debug: false,

Method 2: Add the script via npm or yarn

Simply install the library in your project:

npm install @panelbear/panelbear-js

# Or with yarn:
yarn add @panelbear/panelbear-js

You can now import, and use the Panelbear client on your project.

import * as Panelbear from "@panelbear/panelbear-js";

// Load the Panelbear tracker once in your app

// This is how you record page views
// You should trigger this on router/page changes

// You can also trigger custom events

Check your installation

After you have added our analytics script to the HTML of your website, you should be able to see pageviews show up in the dashboard within a minute of the visitors coming into your website.

If you need help, you can reach out to us at

Tip: Check out our local development guide for some tips and tricks when testing Panelbear on your machine.