@vyro-x/react-insights-client

@vyro-x/react-insights-client

Client-side insights system integration for React & Next.js

Usage

Install

npm i @vyro-x/react-insights-client

or

pnpm i @vyro-x/react-insights-client

InsightsProvider

Wrap your app with the InsightsProvider

import { InsightsProvider, CollectorApi } from '@vyro-x/react-insights-client';
import { authService } from '@vyro-x/react-auth';
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { App } from './App';

const container = document.getElementById('root');
if (!container) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(container);

const collectorApi = new CollectorApi({
  endpoint: process.env.REACT_APP_COLLECTOR_API_URL,
  getAccessToken: authService.tokens.getAccessToken,
});

root.render(
  <React.StrictMode>
    <InsightsProvider collectorApi={collectorApi}>
      <App />
    </InsightsProvider>
  </React.StrictMode>,
);

Track

Track events using the useInsights hook.

import { useInsights, EventInput } from '@vyro-x/react-insights-client';

export default function Page() {
  const { trackEvent } = useInsights();

  return (
    <button
      onClick={() =>
        trackEvent({
          type: EventInput.type.CLICK,
          // ...
        })
      }
    >
      My button
    </button>
  );
}

Config

The collector-api is deployed to the following URLs:

REACT_APP_COLLECTOR_API_URL=http://127.0.0.1:3020

For the dev env these are:

REACT_APP_COLLECTOR_API_URL=https://collector-api.vyrolabs.net

And in production they are:

REACT_APP_COLLECTOR_API_URL=https://collector-api.vyro.com.au