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

# Quickstart

> Go from zero to seeing live analytics data on your dashboard in under 3 minutes.

Welcome to Analytiq! Get set up in just a few minutes with our simple one-file setup.

Analytiq is built on one core principle: **Real Data Only**. We don't track automatic garbage or noisy intent metrics. We track exactly what you explicitly tell us to.

By creating a single `analytics.jsx` file, Analytiq will:

* Safely initialize your tracking across any React/Next.js environment
* Tie perfectly into your own custom Authentication system
* Save events when users go offline and retry later
* Deduplicate accidentally repeated events

***

## Step 1 — Create your account & project

1. Go to [analytiq-two.vercel.app/register](https://analytiq-two.vercel.app/register) and create your account.
2. Click **New Project**, give it a name, and click **Create**.

***

## Step 2 — Get your API Key

1. Click on your project to open it
2. Go to **Settings** in the left sidebar
3. Scroll to **Public API Key** and click **Reveal**
4. Copy your key (it looks like `pk_live_xxxxxxxxxxxxxxxxxx`)

<Warning>
  **API Key Security:**
  Your Analytiq API Key (`pk_live_...`) is designed to be public. It is perfectly safe to expose it in your frontend code, environment variables, or bundled JavaScript.
</Warning>

***

## Step 3 — Install the SDK

Open your terminal inside your project's frontend folder and run:

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install analytiq
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add analytiq
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add analytiq
    ```
  </Tab>
</Tabs>

***

## Step 4 — The One-File Setup

You only need to set up Analytiq **once** in your entire app by creating a central tracking file.

Create a file called `analytics.jsx` (or `.tsx`) anywhere in your project. We highly recommend placing it next to your other providers or in your `src/` folder.

This file acts as a bridge between **Your Auth System** and **Our SDK**.

<Tabs>
  <Tab title="React (Vite/CRA)">
    Create `src/analytics.jsx`. Customize the `useAuth()` import to point to whatever authentication system you use (Firebase, Supabase, Custom JWT, etc).

    ```jsx src/analytics.jsx theme={null}
    import { Analytiq, identify, reset, track } from 'analytiq/react'
    import { useEffect } from 'react'

    // IMPORT YOUR APP'S AUTHENTICATION HOOK HERE
    import { useAuth } from './context/AuthContext' 

    export function AnalyticsProvider({ children }) {
      
      // Get the logged-in user from your system
      const { user } = useAuth() 

      useEffect(() => {
        if (user) {
           identify(user) // Tell the SDK who logged in
        } else {
           reset()            // Tell the SDK they logged out
        }
      }, [user])

      return (
        <>
          {/* Initialize the SDK once globally */}
          <Analytiq apiKey={import.meta.env.VITE_ANALYTIQ_KEY} />
          {children}
        </>
      )
    }

    // Export track so you can import it easily in other files
    export { track }
    ```

    Then, open your root `App.jsx` or `main.jsx` and wrap your app in the `AnalyticsProvider` you just created. Make sure it goes *inside* your Auth provider!

    ```jsx src/App.jsx theme={null}
    import { AnalyticsProvider } from './analytics.jsx'
    import { AuthProvider } from './context/AuthContext.jsx'

    function App() {
      return (
        <AuthProvider>
           <AnalyticsProvider>
              <Router>
                 ...
              </Router>
           </AnalyticsProvider>
        </AuthProvider>
      )
    }
    ```
  </Tab>

  <Tab title="Next.js (App Router)">
    Create `components/analytics.tsx`. Ensure you put `'use client'` at the top.

    ```tsx components/analytics.tsx theme={null}
    'use client'
    import { Analytiq, identify, reset, track } from 'analytiq/react'
    import { useEffect } from 'react'

    // IMPORT YOUR APP'S AUTHENTICATION HOOK HERE
    import { useAuth } from '@/context/AuthContext' 

    export function AnalyticsProvider({ children }: { children: React.ReactNode }) {
      
      const { user } = useAuth() 

      useEffect(() => {
        if (user) {
           identify(user)
        } else {
           reset()
        }
      }, [user])

      return (
        <>
          <Analytiq apiKey={process.env.NEXT_PUBLIC_ANALYTIQ_KEY!} />
          {children}
        </>
      )
    }

    export { track }
    ```

    Then wrap your app in `app/layout.tsx`:

    ```tsx app/layout.tsx theme={null}
    import { AnalyticsProvider } from '@/components/analytics'
    import { AuthProvider } from '@/context/AuthContext'

    export default function RootLayout({ children }) {
      return (
        <html>
          <body>
            <AuthProvider>
              <AnalyticsProvider>
                {children}
              </AnalyticsProvider>
            </AuthProvider>
          </body>
        </html>
      )
    }
    ```
  </Tab>

  <Tab title="Vue / Vanilla JS">
    Instead of a React component, you simply call `init()` at the very start of your application (like in `main.js`). You will need to manually call `identify(user)` after your login API succeeds.

    ```js src/main.js theme={null}
    import { init } from 'analytiq'

    // Initialize before mounting the app
    init(import.meta.env.VITE_ANALYTIQ_KEY)

    // ... mount your app 
    ```
  </Tab>
</Tabs>

***

## Step 5 — Track Events!

Analytiq relies entirely on manual tracking. We don't automatically guess what a user did; you explicitly tell the SDK when something important happens.

Just import `track` from the `analytics.jsx` file you created in Step 4, and drop it anywhere you need it.

```jsx title="LandingPage.jsx" theme={null}
import { useEffect } from 'react';
import { track } from '../analytics.jsx';

export function LandingPage() {
  
  // Track Page Views explicitly
  useEffect(() => {
    track('Home_page_view')
  }, [])

  const handleCheckout = () => {
    // Track specific button clicks
    track('checkout_started', { 
      plan: 'pro',
      value: 49
    });
    // ... proceed to payment ...
  };

  return <button onClick={handleCheckout}>Upgrade Now</button>;
}
```

That's it! If the `AnalyticsProvider` is active and your API key is correct, the event will instantly appear on your dashboard.

***

## What's next?

<CardGroup cols={2}>
  <Card title="Track Custom Events" href="/guides/tracking-page-views">
    Learn more about adding properties to your `track()` calls.
  </Card>

  <Card title="All Framework Guides" href="/frameworks/react">
    Detailed, step-by-step setup guides for every framework.
  </Card>

  <Card title="API Reference" href="/api-reference/use-analytiq">
    Full documentation for the `useAnalytiq` hook and core functions.
  </Card>
</CardGroup>