Skip to main content

​
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 following snippet inside the <head> tag of every page on your website: 
<script
  src="https://cdn.uxbrite.com/v1/uxbrite.js"
  data-id="UXB-XXXXXXXX"
  async
></script>
Replace UXB-XXXXXXXX with your actual Tracking ID.
Add the snippet as high in <head> 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. Localhost or staging environments behind a VPN will not be detected.

​
What Gets Tracked Automatically

Once installed, the tracker captures the following out of the box — no additional configuration needed:
EventDescription
Page viewsEvery page load and navigation
ClicksAll element clicks, including links and buttons
Form submissionsWhen a visitor submits any form
Scroll depthMilestones at 25%, 50%, 75%, 90%, and 100%
Outbound linksClicks that navigate away from your site
JavaScript errorsUncaught errors on the page
Session recordingFull DOM replay via rrweb (enabled by default)

​
Configuration Options

You can customize tracker behavior using data-* attributes on the script tag:
AttributeDefaultDescription
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: 
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: 
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:
import Script from "next/script"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.uxbrite.com/v1/uxbrite.js"
          data-id="UXB-XXXXXXXX"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}
  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 </head> 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.

​
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

Digital Experiences

View session replays and journey analytics in your dashboard.

Custom Events

Track product interactions beyond the defaults.