Setup

Setting up SupaMetrics analytics is simple and fast.

Creating a Project

After creating an account, click the + button in the top navigation bar to create a new project.
Fill in the required details to generate your Client Key.

Your tracking ID is publicly accessible but limited to the domains you configure.

Integrating SupaMetrics

React.js

For React.js projects, open your src/main.jsx file and import the Analytics component:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import Analytics from 'supametrics';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Analytics url="https://your-hosted-go-server.com" client="your-tracking-id" />
    <App />
  </StrictMode>
);

Next.js

For Next.js projects, import the Analytics component in your root template file:

// app/template.tsx
import dynamic from "next/dynamic";

const Analytics = dynamic(() => import("supametrics"), {
  ssr: false,
});

export default function Template({ children }) {
  return (
    <div>
      {children}
      <Analytics
        url="https://your-hosted-go-server.com"
        client="YOUR_CLIENT_KEY_HERE"
      />
    </div>
  );
}

HTML

This is still under development.

Make sure your Go server is running and your environment variables are configured before loading analytics data. The SDK must be executed on the client side (browser) since it relies on window and browser APIs.

Once added, SupaMetrics will start tracking analytics events, and data will appear in your dashboard.