Quick Start

Get Gurulu analytics running on your site in under five minutes. Gurulu auto-detects events, builds flow graphs, and surfaces AI insights with zero manual configuration.

1. Create an account

Sign up at gurulu.io/login with your email or GitHub account. After sign-in you will land on the onboarding flow where you can register your first site.

2. Add your site

Enter your domain (e.g. example.com). Gurulu generates a unique site ID and ingest token. Keep these handy -- you will need them in the next step.

3. Install tracking

Choose the method that fits your stack:

Script tag (fastest)

Works with any website. Paste this into your document head or layout template:

<script
  src="https://cdn.gurulu.io/t.js"
  data-site-id="YOUR_SITE_ID"
  data-token="YOUR_TOKEN"
  async
></script>

Next.js (App Router)

npm install @gurulu/tracker

Add the tracker to your root layout:

app/layout.tsx
import { GuruluTracker } from '@gurulu/tracker/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <GuruluTracker
          siteId="YOUR_SITE_ID"
          token="YOUR_TOKEN"
        />
      </body>
    </html>
  );
}

Next.js (Pages Router)

pages/_app.tsx
import { GuruluTracker } from '@gurulu/tracker/react';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <GuruluTracker siteId="YOUR_SITE_ID" token="YOUR_TOKEN" />
    </>
  );
}

React (Vite / CRA)

npm install @gurulu/tracker
src/main.tsx
import { init } from '@gurulu/tracker';

init({
  siteId: 'YOUR_SITE_ID',
  token: 'YOUR_TOKEN',
});

Vue / Nuxt

npm install @gurulu/tracker
plugins/gurulu.client.ts
import { init } from '@gurulu/tracker';

export default defineNuxtPlugin(() => {
  init({
    siteId: 'YOUR_SITE_ID',
    token: 'YOUR_TOKEN',
  });
});

CLI auto-install

npx @gurulu/cli init --framework nextjs-app

The CLI detects your framework, installs the tracker, and adds the snippet automatically. Supported frameworks: nextjs-app, nextjs-pages, react, vue, nuxt, svelte, astro, html. See Install Tracking for all options.

4. Verify your installation

Open your site in a browser and navigate a few pages. Then check these three things to confirm everything is working:

  • Real-time panel -- visit your dashboard and look for a live visitor count. You should see at least one active user (yourself) within seconds.
  • Network tab -- open browser DevTools, go to the Network tab, and filter for gurulu. You should see requests to ingest.gurulu.io returning 204 status codes.
  • CLI doctor -- run npx @gurulu/cli doctor to validate your configuration, check connectivity, and confirm events are being received.

5. Explore your dashboard

Gurulu begins building your analytics immediately:

  • Auto-detected events -- clicks, form submissions, scroll depth
  • Flow graph -- state transitions between pages and actions
  • AI insights -- anomaly detection, funnel suggestions, drop-off analysis
  • Error tracking -- unhandled exceptions captured automatically

Troubleshooting

Common issues and how to fix them:

No data appearing in the dashboard

  • Verify your data-site-id and data-token match the values in your site settings.
  • Check that the script is not blocked by an ad blocker or browser extension. Gurulu uses a first-party ingest endpoint to minimize blocking, but some aggressive blockers may still interfere.
  • Make sure the script loads on every page, not just the homepage. In SPAs, the tracker handles route changes automatically.

Events are delayed

  • Events should appear in the real-time panel within 1-2 seconds. If you see a delay, check your network connectivity and confirm the ingest endpoint is reachable.
  • If using a CDN or reverse proxy, ensure it is not caching POST requests to the ingest endpoint.

Script loading errors

  • If you see a net::ERR_BLOCKED_BY_CLIENT error, the script is being blocked by an extension. Consider using the npm package instead, which bundles the tracker into your app code.
  • Content Security Policy (CSP) headers may block the script. Add cdn.gurulu.io and ingest.gurulu.io to your script-src and connect-src directives.

Duplicate events

  • Make sure you are not loading both the script tag and the npm package. Use one or the other.
  • In React strict mode (development), components render twice. This is expected and does not affect production data.

Next steps

Edit this page