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

Log in to https://app.bullseye.so
Navigate to your organization’s visitor tracking or setup section
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:

<!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:

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

<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:

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:

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.

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

Verifying the Installation

See Verify Your Installation for steps to confirm the pixel is firing correctly and identifying visitors.