General
Integrations
How to
Configuration
APIBeta
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="https://cdn.panelbear.com/analytics.js?site=YOUR_SITE_ID"></script> <script> window.panelbear = window.panelbear || function() { (window.panelbear.q = window.panelbear.q || []).push(arguments); }; panelbear('config', { site: 'YOUR_SITE_ID', spaMode: 'history', debug: false, }); </script>
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 Panelbear.load("YOUR_SITE_ID"); // This is how you record page views // You should trigger this on router/page changes Panelbear.trackPageview(); // You can also trigger custom events Panelbear.track("NewsletterSignup");
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 support@panelbear.com.
Tip: Check out our local development guide for some tips and tricks when testing Panelbear on your machine.