Getting Started

Getting Started

It is very easy to get started using this library.

Prerequisites:

• Node.JS
• Umami Analytics
• A SolidJS project set up (Vite or Solid Start)

Step 1 - Install the library

npm

npm install @gurkz/solid-analytics

yarn

yarn add @gurkz/solid-analytics

pnpm

pnpm add @gurkz/solid-analytics

bun

bun add @gurkz/solid-analytics

Step 2 - Wrap your app in the <Analytics /> provider.

Vite

// index.tsx
import { render } from "solid-js/web";
import "./styles.css";
import App from "./App";
import { Analytics } from "@gurkz/solid-analytics";

render(
  () => (
    <>
      <Analytics hostUrl="<your umami instance url without a trailing slash>" websiteId="<your umami website id>">
        <App />
      </Analytics>
    </>
  ),
  document.getElementById('root')!,
);

Solid Start

// app.tsx
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
import { Suspense } from "solid-js";
import "./app.css";
import { Analytics } from "@gurkz/solid-analytics";

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <Suspense>
              <Analytics hostUrl="<your umami instance url without a trailing slash>" websiteId="<your umami website id>">
                {props.children}
              </Analytics>
          </Suspense>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

Step 3 - Track events

• If you only want to track pageviews, you are now done. However, if you want to track specific events (i.e, button clicks), continue reading.

import { useAnalytics } from "@gurkz/solid-analytics";

export function Component() {
    const { track } = useAnalytics();
    return (
       <button onClick={() => track("<event title>")}>click me</button>
    );
}

That's it!

You now have a fully functioning analytics system in your app!

Happy hacking!