> ## Documentation Index
> Fetch the complete documentation index at: https://docs.grainql.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Grain Analytics

> Privacy-first analytics for understanding user behavior — heatmaps, scroll depth, click tracking, and more

## Welcome to Grain Analytics

Grain Analytics gives you a complete picture of how users interact with your site — heatmaps, scroll depth, click tracking, rage clicks, dead clicks, session recordings, and custom events — all privacy-first and cookieless by default.

One script tag and you're live. No cookies, no consent banners, no complex setup.

<Note>
  **New to Grain?** Head to [grainql.com](https://grainql.com) to create your account and grab your tenant ID from the dashboard.
</Note>

## What Can You Do with Grain?

### Understand User Behavior

See exactly how people use your site. Grain automatically tracks page views, clicks, scroll depth, rage clicks, dead clicks, and attention quality — without writing a single line of tracking code.

### Visualize with Heatmaps

Click heatmaps and scroll depth maps show you where users engage and where they drop off. DOM snapshots power pixel-accurate overlays in your dashboard.

### Stay Privacy-First

Cookieless by default with daily rotating IDs. No cookies or persistent tracking until your users grant consent. GDPR-friendly out of the box.

### Own Your Data

No vendor lock-in. Export your data anytime, query it however you want, and keep full control.

## Choose Your Path

Pick what fits your situation best:

<CardGroup cols={2}>
  <Card title="I'm a Developer" icon="code" href="#for-developers">
    Working with JavaScript, React, or Next.js
  </Card>

  <Card title="I Don't Code" icon="mouse-pointer" href="#no-code-integrations">
    Using tools like GTM, Shopify, or WordPress
  </Card>
</CardGroup>

***

## For Developers

Jump into the platform you're using:

<CardGroup cols={3}>
  <Card title="Grain Tag (Script)" icon="globe" href="/quickstart/cdn">
    The primary way to install — no build step required
  </Card>

  <Card title="React" icon="react" href="/quickstart/react">
    Hooks-based integration for React apps
  </Card>

  <Card title="Next.js" icon="N" href="/quickstart/nextjs">
    App Router and Pages Router examples
  </Card>

  <Card title="Vanilla JavaScript" icon="js" href="/quickstart/vanilla-js">
    Works with any framework (Vue, Svelte, etc.)
  </Card>

  <Card title="Node.js / Backend" icon="server" href="/quickstart/nodejs">
    Track server-side events and API calls
  </Card>

  <Card title="TypeScript" icon="code" href="/advanced/typescript">
    Full type safety and autocomplete
  </Card>
</CardGroup>

### What You'll Get

* **Automatic tracking** — Page views, heatmaps, scroll depth, clicks, rage clicks, dead clicks, and attention quality out of the box
* **Privacy-first** — Cookieless by default with daily rotating IDs, no cookies until consent
* **TypeScript first** — Full type safety out of the box
* **Smart batching** — Automatic event queuing with Beacon API fallback for page unload

<Tip>
  **Not sure where to start?** Try the [Grain Tag (Script)](/quickstart/cdn) for any site, or [React Quick Start](/quickstart/react) if you're using React.
</Tip>

***

## No-Code Integrations

Set up tracking without touching your codebase:

<CardGroup cols={3}>
  <Card title="Google Tag Manager" icon="tags" href="/integrations/gtm">
    Add via GTM in under 10 minutes
  </Card>

  <Card title="Shopify" icon="shopping-bag" href="/integrations/shopify">
    Track your entire customer journey
  </Card>

  <Card title="WordPress" icon="wordpress" href="/integrations/wordpress">
    Install with a simple plugin or theme edit
  </Card>
</CardGroup>

These guides are written for non-technical users. No coding experience required.

***

## Quick Example

Add a single script tag and Grain starts tracking automatically:

```html theme={null}
<script src="https://tag.grainql.com/v4/your-tenant-id.js"></script>
<script>
  // Already tracking page views, clicks, and scroll depth automatically.

  // Track custom events
  GrainTag.track('signup_clicked', { location: 'hero' });

  // Identify users after login
  GrainTag.identify('user-123');
</script>
```

Or install via npm for apps with a build step:

```typescript theme={null}
import { init, track, identify } from '@grainql/tag';

// Initialize once
init({ tenantId: 'your-tenant-id' });

// Track events — works even before init() completes
track('signup_clicked', { location: 'hero' });

// Identify users
identify('user-123');
```

***

## What's Next?

### Learn Core Concepts

Understand how tracking and remote configuration work:

<CardGroup cols={2}>
  <Card title="Event Tracking" icon="chart-line" href="/core/event-tracking">
    How events are batched, sent, and retried
  </Card>

  <Card title="Remote Configuration" icon="sliders" href="/core/remote-config">
    Cache-first config with instant loading
  </Card>

  <Card title="User Identification" icon="user" href="/core/user-identification">
    Track users across sessions and devices
  </Card>

  <Card title="Authentication" icon="key" href="/authentication">
    Secure your analytics with Auth0 or custom JWT
  </Card>
</CardGroup>

### Explore the Dashboard

See what Grain can show you:

<CardGroup cols={2}>
  <Card title="Trackers" icon="crosshairs" href="/features/trackers">
    Track clicks on specific elements without code
  </Card>

  <Card title="Tracks & Funnels" icon="route" href="/features/tracks">
    Analyze complete user journeys
  </Card>

  <Card title="Heatmaps" icon="fire" href="/features/heatmaps">
    Visualize clicks and scroll depth
  </Card>

  <Card title="Mission Control" icon="bullseye" href="/features/mission-control">
    Set goals and track progress
  </Card>
</CardGroup>

### Browse Guides & API

<CardGroup cols={2}>
  <Card title="E-commerce Tracking" icon="shopping-cart" href="/guides/ecommerce">
    Track purchases, carts, and product views
  </Card>

  <Card title="A/B Testing" icon="flask" href="/guides/ab-testing">
    Test features and measure impact
  </Card>

  <Card title="Core API" icon="book" href="/api-reference/overview">
    All SDK methods and options
  </Card>

  <Card title="Query API" icon="database" href="/api-reference/query-api/overview">
    Query your analytics data programmatically
  </Card>
</CardGroup>

***

## Need Help?

<CardGroup cols={3}>
  <Card title="Troubleshooting" icon="wrench" href="/troubleshooting">
    Common issues and solutions
  </Card>

  <Card title="Dashboard" icon="chart-line" href="https://grainql.com/dashboard">
    View your analytics and manage configs
  </Card>

  <Card title="Live Chat" icon="message" href="https://grainql.com">
    Chat with our team (bottom right corner)
  </Card>
</CardGroup>