# Install the Tracking Pixel

The Bullseye tracking pixel is a lightweight JavaScript snippet that loads asynchronously and does not impact page load performance. Add it to your website to start identifying visitors.

## Before You Begin

1. Log in to <https://app.bullseye.so>
2. Navigate to your organization's visitor tracking or setup section
3. Copy the JavaScript snippet from your dashboard — it includes your unique pixel API key

## Installation Methods

### Direct HTML

Paste the script tag directly into your HTML, inside the `<head>` section and before the closing `</head>` tag:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your Website</title>
  <script async defer src="https://api.app.bullseye.so/api/v1/visitor-tracking/script/YOUR_PIXEL_API_KEY"></script>
</head>
<body>
  <!-- Your page content -->
</body>
</html>
```

Replace `YOUR_PIXEL_API_KEY` with the API key from your Bullseye dashboard.

### Google Tag Manager

If you use Google Tag Manager (GTM), add Bullseye as a custom HTML tag:

1. In GTM, create a new **Custom HTML** tag
2. Paste the Bullseye script tag into the HTML field
3. Set the trigger to **All Pages** (or the pages where you want to track visitors)
4. Save and publish your container

```html
<script async defer src="https://api.app.bullseye.so/api/v1/visitor-tracking/script/YOUR_PIXEL_API_KEY"></script>
```

> **Tip:** Use the same trigger configuration as your other analytics tags to ensure consistent coverage across your site.

### React / Next.js

For React or Next.js applications, add the script to your root layout or `_document` component so it loads on every page.

**Next.js (App Router):**

Add the script to `app/layout.tsx`:

```tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <script
          async
          defer
          src="https://api.app.bullseye.so/api/v1/visitor-tracking/script/YOUR_PIXEL_API_KEY"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}
```

**Next.js (Pages Router):**

Add the script to `pages/_document.tsx`:

```tsx
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          async
          defer
          src="https://api.app.bullseye.so/api/v1/visitor-tracking/script/YOUR_PIXEL_API_KEY"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

**React (Create React App or Vite):**

Add the script to `public/index.html` in the `<head>` section, or use a `useEffect` hook to inject it dynamically in your root component.

## How the Script Works

* **Async loading** — The script loads asynchronously and does not block page rendering
* **Lightweight** — Minimal impact on page load performance
* **Automatic tracking** — Captures page URL, referrer, UTM parameters, and device information
* **Real-time identification** — Sends visitor data to Bullseye for person-level matching

## Domain Verification

After deploying the pixel, configure your verified domains in the Bullseye dashboard. Domain verification ensures that only traffic from your approved domains is processed and credited to your organization.

1. Go to your organization settings in the Bullseye dashboard
2. Navigate to the domain or visitor tracking configuration section
3. Add the domains where your pixel is installed (e.g., `example.com`, `www.example.com`)
4. Save your configuration

## Verifying the Installation

See [Verify Your Installation](/getting-started/verify-installation.md) for steps to confirm the pixel is firing correctly and identifying visitors.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bullseye.so/getting-started/install-tracking-pixel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
