> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uxbrite.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Tracker Install
> Add the UX Brite tracking snippet to your website in under 5 minutes.
## Overview
The UX Brite tracker is a lightweight JavaScript snippet (\~2KB) that you add to your website once. It automatically captures pageviews, clicks, form submissions, scroll depth, and session recordings — sending everything to your GTM Suite dashboard in real time.
The tracker is loaded asynchronously and does not block page rendering or affect Core Web Vitals.
## Step 1: Get Your Tracking ID
1. In GTM Suite, go to **Digital Experiences** and open the experience you want to track (or create a new one)
2. Copy your **Tracking ID** — it looks like `UXB-XXXXXXXX`
## Step 2: Add the Snippet
Paste the created snippet on your dashboard inside the `` tag of every page on your website. Here is an example of the code snippet (not your actual code):
```html theme={null}
```
Replace `UXB-XXXXXXXX` with your actual Tracking ID. You may also find your code snippet if you click **Digital Experiences → View Details** on the site you want to start tracking.
Add the snippet as high in `` as possible to ensure accurate session recording from the very first user interaction.
## Step 3: Deploy and Verify
1. Deploy your changes to production (or a publicly accessible URL)
2. Return to GTM Suite and open your Digital Experience
3. Click **Check Status**—the badge will turn green once the tracker is detected
Verification only works on publicly accessible URLs. Local hosts or staging environments behind a VPN will not be detected.
***
## What Gets Tracked Automatically
Once installed, the tracker automatically captures the following without any additional configuration:
| Event | Description |
| --------------------- | ----------------------------------------------- |
| **Page views** | Every page load and navigation |
| **Clicks** | All element clicks, including links and buttons |
| **Form submissions** | When a visitor submits any form |
| **Scroll depth** | Milestones at 25%, 50%, 75%, 90%, and 100% |
| **Outbound links** | Clicks that navigate away from your site |
| **JavaScript errors** | Uncaught errors on the page |
| **Session recording** | Full DOM replay via rrweb (enabled by default) |
***
## Configuration Options
You can click **"Configure"** while on the Digital Experience detail page. If you are more technical, you may customize tracker behavior using `data-*` attributes on the script tag:
| Attribute | Default | Description |
| ------------- | --------- | -------------------------------------------------------------- |
| `data-id` | — | **Required.** Your Tracking ID |
| `data-record` | `"true"` | Set to `"false"` to disable session recording |
| `data-debug` | `"false"` | Set to `"true"` to log tracker activity to the browser console |
***
## Custom Events
Track actions that matter to your business—product interactions, video plays, pricing page views—with a single API call:
```javascript theme={null}
uxbrite.track("video_play", {
videoId: "intro-demo",
duration: 120
})
```
Custom events appear in your Digital Experience analytics alongside auto-tracked events.
## Identify Users
If you know who a visitor is (e.g., after login), associate their session with a user ID:
```javascript theme={null}
uxbrite.identify("user-456")
```
This links anonymous session data to a known user, enabling full journey visibility from first visit to conversion.
***
## Framework-Specific Setup
Add the snippet using `next/script` with the `afterInteractive` strategy:
```jsx theme={null}
import Script from "next/script"
export default function RootLayout({ children }) {
return (
{children}
)
}
```
1. In GTM, create a new **Custom HTML** tag
2. Paste the snippet into the HTML field
3. Set the trigger to **All Pages**
4. Save and publish your container
Add the snippet to your theme's `header.php` just before the closing `` tag, or use a plugin like **Insert Headers and Footers** to avoid editing theme files directly.
Go to **Project Settings → Custom Code** and paste the snippet into the **Head Code** section. Click Save and publish your site.
Add your generated snippet to your`public/index.html `
```text theme={null}
```
Here is an example of how it `public/index.html `would look once you add it:
```jsx theme={null}
Edgy - #1 Instagram Growth Agency
// Add Snippet Here
```
***
/
## Troubleshooting
**Status shows "Not Detected" after deploying**
* Confirm the snippet is in the rendered HTML (DevTools → Sources)
* Ensure `data-id` matches your Tracking ID exactly
* The page must be publicly accessible
**Disable recording on certain pages**
* Add `data-record="false"` to the snippet on those specific pages
**Testing locally**
* Add `data-debug="true"` — the tracker will log all events to the browser console
View session replays and journey analytics in your dashboard.
Track product interactions beyond the defaults.