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

# Northbeam Pixel

> What the Northbeam Pixel does, how to install it on your platform, and how to test it.

<span id="what-is-the-northbeam-pixel" style={{ display: "block", scrollMarginTop: "7rem" }} />

The **Northbeam Pixel** is a script that runs on every page of your site. It records each visit, the marketing touchpoint that brought the visitor in, and the pages they view. Northbeam uses this to build each customer's journey and attribute orders to the right channels.

It's the foundation for all other Northbeam tracking. Purchase events, custom goals, and other events all rely on the pixel being on the page first.

<Warning>
  **The pixel must fire on every page, all the time.** If it doesn't, Northbeam can't see which channels drove those visits and orders, and **that data can't be recovered**.
</Warning>

<span id="pixel-implementation-guides" style={{ display: "block", scrollMarginTop: "7rem" }} />

<span id="how-do-i-add-the-northbeam-pixel-to-my-website" style={{ display: "block", scrollMarginTop: "7rem" }} />

<span id="shopify-instructions" style={{ display: "block", scrollMarginTop: "7rem" }} />

<span id="install-the-pixel" style={{ display: "block", scrollMarginTop: "7rem" }} />

## Which setup you need

Where the pixel goes depends on your store. Your platform guide walks you through every step.

| Platform | Where the pixel goes | Guide |
| :- | :- | :- |
| **Shopify** | Two places: the `<head>` of your storefront (`theme.liquid` on standard themes), and a **Custom Pixel** in Shopify Customer events, which covers checkout. | [Shopify](/docs/shopify-installation) |
| **Custom** | The `<head>` of every page, added in your site's code or through Google Tag Manager. | [Custom](/docs/non-shopify-installation) |

<Note>
  **Custom** means any store that doesn't use Shopify's checkout, and is available on Pro and Enterprise plans. Headless stores that use Shopify's checkout follow the **Shopify** guide.
</Note>

<span id="where-can-i-find-the-script-for-the-northbeam-pixel" style={{ display: "block", scrollMarginTop: "7rem" }} />

### Where to find your scripts

Your scripts come pre-filled with your Client ID. You can find them in two places:

* **During onboarding:** in the **Pixel Placement** step. After you select and connect your platform, look under **Northbeam Pixel**.
* **In the dashboard:** go to [Settings → Northbeam Pixel and Event Tracking](https://dashboard.northbeam.io/settings/tracking-script-tags).

## What the pixel tracks

Once installed, the pixel records **page views automatically** every time a page loads. Everything else needs a small amount of extra setup.

| Tracking | Set up | Who needs it |
| :- | :- | :- |
| **Page views** | Automatic | Everyone |
| **[Purchase events](/docs/purchase-pixel)** | Shopify: automatic with the Custom Pixel. Custom: add to your confirmation page. | Everyone |
| **[Page views on single-page apps](/docs/page-view-events)** | Add to your site's router | **Only single-page apps (SPAs).** Most sites don't need this. |
| **[Custom goals](/docs/setting-up-custom-goals)** | Add wherever the action happens | Optional. For sign-ups, add-to-carts, form fills, and similar actions |

<span id="-how-to-test-for-your-northbeam-pixel-on-any-web-page" style={{ display: "block", scrollMarginTop: "7rem" }} />

## How to test for the Northbeam Pixel

You can check the pixel on any page of your site using your browser's developer tools. These steps use Google Chrome.

<Steps>
  <Step title="Open your website and accept cookies">
    Open any page on your site. If a cookie banner appears, **accept it**. On sites with a consent banner, the pixel doesn't send data until the visitor agrees.
  </Step>

  <Step title="Open the Network tab">
    Right-click anywhere on the page and click **Inspect**. Open the **Network** tab, then **refresh the page**. The Network tab only shows requests made while it's open.
  </Step>

  <Step title="Find the Northbeam request">
    In the Network tab's filter box, type `nb-collector`. Click one of the results and open its **Payload** tab.

    Look for a `pv` field. `pv` means *page view*: the pixel recorded the visit and sent it to Northbeam.
  </Step>

  <Step title="Check the Client ID">
    In the same payload, find the `aid` value. This is the Client ID the pixel is sending data to. Confirm it matches your Northbeam account.

    This matters most if you have more than one Northbeam dashboard (for example, one per region or brand). Data only shows up in the account that matches the `aid`, so don't mix pixels between dashboards.
  </Step>
</Steps>

<Accordion title="Prefer to watch? See a video walkthrough" icon="play">
  <Frame>
    <iframe src="https://www.loom.com/embed/5af69887b65f4aa18b186be31efa0e66?sid=82fe4c47-4100-4da5-bce7-49dea856c900" width="100%" height="450" allowfullscreen />
  </Frame>
</Accordion>

### Don't see an nb-collector request?

* **Accept the cookie banner** and refresh. This is the most common cause.
* **Check that the pixel is installed** on that page. Follow your [platform guide](#which-setup-you-need) again.
* **Turn off ad blockers** and privacy extensions, then refresh. They can block tracking requests.
* **Check your Content Security Policy** if you have one. It must allow your `i.` subdomain. See [Custom, step 1](/docs/non-shopify-installation#1-install-the-northbeam-pixel).

Still stuck? [Contact our support team](https://www.northbeam.io/submit-a-support-ticket), or see [Troubleshooting Pixel Tracking](/docs/guide-to-troubleshooting-pixel-tracking) for deeper checks.