React Analytics

Our script has been designed to work seamlessly with React, allowing developers to easily add data analysis capabilities to their projects while maintaining user privacy. Follow the instructions in this guide to integrate Proxima Analytics into your React application.

Getting Started

To seamlessly integrate Proxima Analytics into your React project, you can leverage our client library available on npm. This library provides a convenient and user-friendly interface for tracking pageviews and events while also simplifying the integration process. The library is written in TypeScript and is fully typed, ensuring compatibility and ease of use for your project.

To get started, simply run the following command to install the library:

npm install @prxm/client

After that, you can create a simple component to initialize the client library:

src/components/proxima.tsx
import * as client from '@prxm/client';
import { useEffect } from 'react';

const Proxima = () => {
  useEffect(() => {
    client.init({ site: 'xxx' });
  }, []);
  return null;
};

export default Proxima;

Include this component in your application's root component to start tracking:

src/App.tsx
import Proxima from './components/proxima';

const App = () => {
  return (
    <div>
      <Proxima />
      <h1>Hello, world!</h1>
    </div>
  );
};

Using `react-helmet`

If you are using react-helmet to manage your page's metadata, you can use the `Helmet` component to add the `proxima` script to your page:

src/App.tsx
import { Helmet } from 'react-helmet';
const App = () => {
  return (
    <div>
      <Helmet>
        <script
          defer
          src="https://buzz.proxima.so/script.debug.js"
          data-site="XXXX"></script>
      </Helmet>
      <h1>Hello, world!</h1>
    </div>
  );
};