How to set up analytics in React

Product analytics enables you to gather and analyze data about how users interact with your React app. To show you how to set up analytics, in this tutorial we create a basic React app with Vite, add PostHog, and use it to capture pageviews and custom events.

Creating a React app with Vite

To demonstrate the basics of PostHog analytics, we'll create a simple app with two pages and a link to navigate between them.

First, ensure Node.js is installed (version 20.0 or newer). Then create a new React app with Vite:

npm create vite@latest react-analytics -- --template react
cd react-analytics
npm install

Next, create two new files HomePage.jsx and AboutPage.jsx in your src directory:

cd ./src
touch HomePage.jsx
touch AboutPage.jsx

In HomePage.jsx, add the following code:

function HomePage() {
  return <h1>Home Page</h1>;
}

export default HomePage;

In AboutPage.jsx, add the following code:

function AboutPage() {
  return <h1>About Page</h1>;
}

export default AboutPage;

Next, we set up the routing. First, install React Router in your project:

npm install react-router-dom

Then, set up the router by replacing the code in App.jsx with the following:

import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage'; 

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Routes> 
          <Route path="/about" element={<AboutPage />} />
          <Route path="/" element={<HomePage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

The basic setup is now complete. Run npm run dev to see your app in action.

Adding PostHog

With our app set up, it's time to install and set up PostHog. If you don't have a PostHog instance, you can sign up for free.

First install posthog-js:

npm install posthog-js

Next, import PostHog into src/main.jsx and set up it up using your project API key and host from your project settings. Then we wrap our app with PostHogProvider to access PostHog in any component. We set capture_pageview to history_change because React Router acts as a single-page app and doesn't fire page load events on route changes.

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'

posthog.init('<ph_project_api_key>', {
  api_host: 'https://us.i.posthog.com',
  capture_pageview: 'history_change'
})

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <PostHogProvider client={posthog}>
      <App />
    </PostHogProvider>
  </React.StrictMode>,
)

Once you've done this, reload your app and click the links a few times. You should see pageviews and events appearing in PostHog's activity tab.

Capturing custom events

Beyond pageviews and autocaptured events, there might be more events you want to capture. To do this, you can capture custom events with PostHog.

To showcase this, update the code in HomePage.jsx to include a button that uses PostHog to capture a home_button_clicked event:

import { usePostHog } from 'posthog-js/react'

function HomePage() {
  const posthog = usePostHog()
  return (
    <div>
      <h1>Home Page</h1>
      <button 
        onClick={() => {
          posthog.capture('home_button_clicked', {
            'user_name': 'Max the Hedgehog' 
          });
      }}>
        Click Me
      </button>
    </div>
  );
}

export default HomePage;

Now when you click the button, PostHog captures the custom home_button_clicked event. Notice that we also added a property user_name to the event. This is helpful for filtering events in PostHog.

Further reading

• How to set up surveys in React
• How to set up A/B tests in React
• How to set up feature flags in React

Subscribe to our newsletter

Product for Engineers

Read by 60,000+ founders and builders

Subscribe

We'll share your email with Substack