# Quickstart

Get a web app sending data to Tailglow. This is the typical setup: a browser app that auto-collects page views, marked-section engagement and clicks, outbound clicks, uncaught errors, and performance measurements, with your own custom events on top.

You need one value: the **ingest URL** from the source's **Ingest** tab, which already carries its key (for example `https://us11.ingest.tailglow.io/prj_xxx?key=tg_ingest_your_key`). The [Ingest Key](/guides/ingest-key) guide shows how to reach it.

Copying the key on its own and passing it separately still works, and a key passed that way overrides one carried in the URL.

## Add the SDK

Choose one. Both do exactly the same thing; use the drop-in tag if you do not have a build step.

### Drop-in script

Paste one tag into your `<head>`. It self-initializes and starts collecting immediately, no build step:

```html
<script
  defer
  src="https://cdn.tailglow.io/tglow.js"
  data-url="https://us11.ingest.tailglow.io/prj_xxx?key=tg_ingest_your_key"
></script>
```

### npm

```bash
bun add @tailglow/browser
# or: npm install @tailglow/browser
```

```javascript
import { Tailglow } from "@tailglow/browser";

const tg = new Tailglow({
  url: "https://us11.ingest.tailglow.io/prj_xxx?key=tg_ingest_your_key"
});
```

Either way, auto-collection starts the moment the SDK loads: page views, engagement and clicks inside elements marked with `data-telemetry`, outbound-link clicks, uncaught errors, performance measurements, and a one-time device snapshot. The default path is cookieless and does not read or write persistent browser storage. Assess consent and disclosure requirements for the data you collect and the jurisdictions where you operate.

## Track your own events

Send anything meaningful in your product. The first argument is the event name, the second is any properties you want to attach:

```javascript
tg.track("signup", { plan: "pro" });
tg.track("purchase", { amount: 99, currency: "USD" });
```

With the drop-in tag, call the global `tglow` the same way:

```javascript
tglow("track", "signup", { plan: "pro" });
```

Or track clicks straight from your markup, no JavaScript:

```html
<button data-tglow-event="signup" data-tglow-method="github">Sign up</button>
```

## Identify the signed-in user

When your app knows who the user is (from your own auth), attach their ID. Events already queued earlier in the session are backfilled with it:

```javascript
tg.identify("user_123");
```

## See it on localhost

By default the SDK skips `localhost` so dev traffic does not pollute your analytics. To watch events flow while developing, opt in and tag them as dev so you can filter them out later:

```javascript
const tg = new Tailglow({
  url: "https://us11.ingest.tailglow.io/prj_xxx",
  key: "tg_ingest_your_key",
  excludeLocalhost: false,
  context: { environment: "development" }
});
```

Trigger a page view or a `track()` call, then confirm the records land in your project.

## Next steps

- **[JavaScript SDK](/guides/sdk)**: the full reference, covering error capture, identity, context, configuration, and record shapes.
- **Backend, Electron, and React Native**: the same core runs server-side and in native apps. See [Runtimes](/guides/sdk#runtimes) in the SDK guide.