> ## 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.

# Integrations

> Every way to add Grain to your site or app

Grain works with any website or app. Pick the integration that matches your setup.

## Recommended

The fastest way to add Grain is a single script tag. It works on any website, auto-tracks page views, clicks, scroll depth, sessions, and more -- no configuration needed.

```html theme={null}
<script src="https://tag.grainql.com/v4/your-tenant-id.js"></script>
```

Replace `your-tenant-id` with your tenant identifier from [grainql.com/dashboard](https://grainql.com/dashboard).

## All Integrations

<CardGroup cols={2}>
  <Card title="Grain Tag (Script)" icon="code" href="/quickstart/cdn">
    One line of HTML, works on any website. Auto-tracks everything.
  </Card>

  <Card title="React" icon="react" href="/quickstart/react">
    Use @grainql/tag in React apps.
  </Card>

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

  <Card title="Vue, Svelte & More" icon="js" href="/quickstart/vanilla-js">
    Works with any JS framework.
  </Card>

  <Card title="Node.js / Backend" icon="server" href="/quickstart/nodejs">
    Server-side tracking with @grainql/analytics-web.
  </Card>

  <Card title="Google Tag Manager" icon="tag" href="/integrations/gtm">
    No-code setup via GTM.
  </Card>

  <Card title="Shopify" icon="cart-shopping" href="/integrations/shopify">
    E-commerce tracking for Shopify stores.
  </Card>

  <Card title="WordPress" icon="wordpress" href="/integrations/wordpress">
    Plugin or theme integration.
  </Card>
</CardGroup>

## Comparison

| Method                     | Package                  | Auto-Tracking | Remote Config | Server-Side |
| -------------------------- | ------------------------ | ------------- | ------------- | ----------- |
| Script Tag                 | `@grainql/tag` (IIFE)    | Yes           | No            | No          |
| npm (React, Next.js, etc.) | `@grainql/tag`           | Yes           | No            | No          |
| npm (Remote Config)        | `@grainql/analytics-web` | No            | Yes           | No          |
| npm (Server-Side)          | `@grainql/analytics-web` | No            | Yes           | Yes         |
| GTM / Shopify / WordPress  | Script tag               | Yes           | No            | No          |

## Which SDK?

There are two Grain SDKs. Here's how to choose:

* **Just need analytics, heatmaps, click tracking?** Use **Grain Tag** (`@grainql/tag`) via script tag or npm. It auto-tracks everything out of the box.
* **Need remote config, feature flags, or React hooks?** Use **Analytics Web** (`@grainql/analytics-web`). It provides `useConfig`, `useTrack`, and other React hooks, plus remote configuration.
* **Need server-side event tracking?** Use **Analytics Web** (`@grainql/analytics-web`). It supports authenticated server-side calls.
* **Both browser and server?** Use **Grain Tag** on the frontend for auto-tracking, and **Analytics Web** on the backend for server-side events.