Dbrij Glass Documentation

Dbrij Glass shows you what people actually do on your website and in your apps: sessions, pages, clicks, rage clicks and dead clicks, scroll depth, heatmaps, funnels, retention and session replays. A website gets one script tag. A native app gets a single file tracker for Swift, Kotlin or Flutter, or the @dbrij/glass-native package for React Native. Everything lands in the same Glass dashboard.

Every site you add under Glass, Sites gets a site key that starts with gk_. The key only lets a tracker send events to that site. It cannot read anything back, so it is safe in your page source and in an app bundle. If you ever need a new one, rotate it from the site's settings: the old key stops being accepted within a minute.

What the web tracker records on its own

• Page views, including route changes in a single page app (the browser history API and back and forward).
• Clicks, with the position on the page and the page size (so a heatmap holds at every screen width), a selector for the element and a short readable label.
• Rage clicks: three or more clicks inside one second, within 30 pixels of each other or on the same element.
• Dead clicks: a click on something that is not interactive, after which nothing on the page changed for 500 milliseconds and the address stayed the same.
• Scroll depth: the furthest point reached on each page, as a percentage.
• The referrer, the utm_source, utm_medium and utm_campaign of the landing address, and the screen size.
• A session replay, for the share of sessions the site samples (see Site settings).

No cookies and no fingerprinting. A visitor is a random id the tracker makes and keeps in the browser's local storage. A session ends after 30 minutes without activity, or after 4 hours in total, whichever comes first.

Add the site under Glass, Sites, copy its tag, and paste it before </body> on every page (or in <head>; it is deferred either way). Events arrive within seconds of the next visit.

<script src="https://glass.dbrij.com/glass.js" data-site="gk_your_site_key" defer></script>

The tracker sends events in batches: every 5 seconds, or as soon as 20 are waiting, and once more when the page is hidden or closed. Replays are recorded by a second file, glass-record.js, which the tag fetches from its own origin only for a session the replay sample picked, so the tag itself stays small on every page.

The tag never breaks your page. Every part of it is wrapped, and a failure is silent. Without a data-site attribute it writes one warning to the console and does nothing else.

Content Security Policy

If your site sends a Content Security Policy, allow the Glass host in script-src (it serves both files) and the Dbrij API in connect-src.

script-src 'self' https://glass.dbrij.com;
connect-src 'self' https://api.dbrij.com;

Sites on Dbrij Hosting

A web service you host on Dbrij needs no paste at all. The Sites page lists your hosted web services; start watching one there and the tag is added at the hosting edge.

Single page apps

Nothing extra to wire. The tag follows route changes made through the history API and records each new page. If your app has a signed in area you would rather not record, see glass.appMode() under Custom events and identify, and data-replay-pause under Tag options.

Options are attributes on the script tag. Each one applies to that install only; the site's own settings (Site settings) apply everywhere.

<script src="https://glass.dbrij.com/glass.js"
  data-site="gk_your_site_key"
  data-replay="masked"
  data-replay-pause="/settings,/billing"
  data-scrub="ids"
  data-labels="hooks"
  defer></script>

On a single page app, moving onto a paused path ends the current recording at once, and moving off it starts a fresh one with its own snapshot.

Inputs are always masked in replays, at every masking level and on every plan. What a person types into a field never leaves the browser.

<div class="glass-mask">Balance: ₦240,000</div>
<section data-glass-block>…medical history…</section>
<button data-glass-id="checkout-pay">Pay now</button>

Click labels

A click's label is read from the clicked element or up to three of its parents, in this order: data-glass-id, data-testid, aria-label, the element's own text when it is 60 characters or fewer, then alt, title, placeholder and name. A label never reads a field's value, and it is cut to 60 characters. With data-labels="hooks" only the first three are used; at the strict level no label is sent.

What the recorder never captures

• What anyone types into an input, select or text area.
• Frames from another origin.
• Anything marked glass-block.

How long a replay runs

A session records at most 60 minutes of replay in total. The recorder pauses after 3 minutes with no mouse, key, touch, wheel or scroll input, and starts a fresh segment on the next input. A tab left open records nothing.

What the browser keeps

Once the tag has loaded, window.glass carries a small API.

glass.track('signup', { plan: 'pro', source: 'pricing' });

// after your own sign in succeeds
glass.identify('user_1234', { plan: 'pro', company: 'Acme' });

// on a single page app, once the pages become personal
glass.appMode('masked');

Calls made before the tag loads

Calls can be queued before the script arrives. Put them in window.glass.q as arrays; the tag replays track and identify calls from the queue once it starts, then replaces window.glass with the API above.

<script>
  function glassCall(method, a, b) {
    var g = window.glass;
    if (g && typeof g[method] === 'function') return g[method](a, b);
    (window.glass = g || { q: [] }).q.push([method, a, b]);
  }
  glassCall('track', 'pricing_viewed', { plan: 'pro' });
</script>
<script src="https://glass.dbrij.com/glass.js" data-site="gk_your_site_key" defer></script>

Glass sets no cookies, reads no fingerprint and records no typed input. Nothing is collected before the script runs, so if your site asks for consent before analytics, add the tag only after the visitor agrees.

function startGlass() {
  var s = document.createElement('script');
  s.src = 'https://glass.dbrij.com/glass.js';
  s.setAttribute('data-site', 'gk_your_site_key');
  s.defer = true;
  document.head.appendChild(s);
}

Native apps send sessions, screens, taps and custom events to the same site key as your website; the dashboard shows the device as iOS or Android and the browser as App <version>. Session replay is web only: native sessions appear without a recording.

Pure native apps use one file per platform with no dependencies: glass-tracker.swift, GlassTracker.kt or glass_tracker.dart. React Native uses @dbrij/glass-native from npm. The API is the same everywhere.

React Native

npm install @dbrij/glass-native

import AsyncStorage from '@react-native-async-storage/async-storage';
import { AppState, Dimensions, Platform } from 'react-native';
import { createGlass } from '@dbrij/glass-native';

export const glass = createGlass({
  siteKey: 'gk_your_site_key',
  platform: { os: Platform.OS === 'ios' ? 'ios' : 'android', device: 'mobile', appVersion: '1.4.2' },
  storage: AsyncStorage,               // getItem / setItem / removeItem
  screen: Dimensions.get('screen'),
  // disabled: true,                   // start switched off until the person agrees
});

AppState.addEventListener('change', (state) => {
  if (state === 'active') glass.onForeground();
  else if (state === 'background') glass.onBackground();
});

// screens from your navigator
const route = navigationRef.getCurrentRoute();
if (route) glass.screen(route.name);

glass.track('signup', { plan: 'pro' });
glass.identify('user_1234', { plan: 'pro' });
glass.tap(48, 88, 'buy-button');

The React Native client also has visitorId(), the persistent visitor id (empty until storage has loaded).

Swift (iOS)

let glass = GlassTracker(siteKey: "gk_your_site_key", appVersion: "1.4.2")
// optional: endpoint:, device: "tablet", disabled: true, defaults: UserDefaults
// on iOS the app lifecycle is observed for you

glass.screen("Checkout")
glass.track("signup", props: ["plan": "pro"])
glass.identify("user_1234", traits: ["plan": "pro"])
glass.tap(xPct: 48, yPct: 88, label: "buy-button")
glass.setDisabled(true)

Kotlin (Android)

val glass = GlassTracker(application, GlassTracker.Config(
    siteKey = "gk_your_site_key",
    appVersion = "1.4.2",
    // endpoint = "https://api.dbrij.com/api/v1", device = "tablet", disabled = true,
))
// constructed with an Application, it follows the activity lifecycle for you

glass.screen("Checkout")
glass.track("signup", mapOf("plan" to "pro"))
glass.identify("user_1234", mapOf("plan" to "pro"))
glass.tap(48.0, 88.0, "buy-button")
glass.setDisabled(true)

Flutter

final glass = GlassTracker(GlassConfig(
  siteKey: 'gk_your_site_key',
  platformOs: Platform.isIOS ? 'ios' : 'android',
  appVersion: '1.4.2',
  storage: PrefsStorage(prefs), // optional; memory only by default
));

// lifecycle, from a WidgetsBindingObserver
void didChangeAppLifecycleState(AppLifecycleState state) {
  if (state == AppLifecycleState.resumed) glass.onForeground();
  if (state == AppLifecycleState.paused) glass.onBackground();
}

// screens, from a NavigatorObserver
class GlassNavObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route? previous) {
    final name = route.settings.name;
    if (name != null) glass.screen(name);
  }
}

GlassStorage is three async methods, getItem, setItem and removeItem. Back it with shared preferences to keep the visitor id and the offline queue across launches.

How the native trackers behave

• Events go in batches of 20, or every 5 seconds, and at once when the app goes to the background.
• Offline, the queue is saved (at most the last 500 events) and sent on the next attempt or launch. The collector replaces any time more than 5 minutes away from its own clock with the time the event arrived.
• A session ends after 30 minutes without activity or 4 hours in total.
• The site settings are read at start and at most every 5 minutes on return to the foreground. When they say the site is unknown or paused, the tracker stops sending.
• No advertising id and no fingerprinting: only the screens and events you name, and a random visitor id.
• Every entry point is wrapped; the tracker never throws into your app.

The trackers above speak this protocol, and you only need it to write a tracker of your own. It runs on other people's pages, which shapes it: no credentials, no custom headers, and bodies sent as text/plain, so a browser never sends a preflight. Every response carries Access-Control-Allow-Origin: *. Refusals are silent: the collector answers with success and drops what it will not keep.

{
  "ok": true,                 // false: unknown key or paused site. Stop sending.
  "sampleRate": 100,          // percent of sessions to record
  "maskingLevel": "balanced", // strict | balanced | relaxed
  "replayEnabled": true,
  "quotaExceeded": false,     // true: the month's events are spent. Do not record.
  "sessionTimeoutMs": 1800000
}

{
  "k": "gk_your_site_key",
  "v": "gv_3f9a0c1d2e4b5a6978c0d1e2",      // visitor id
  "s": "gs_8b7c6d5e4f3a2b1c0d9e8f7a",      // session id
  "url": "https://acme.com/pricing?utm_source=news",
  "ref": "https://news.example/today",
  "utm": { "s": "news", "m": "email", "c": "october" },
  "sw": 1440, "sh": 900,
  "events": [
    { "t": "pageview", "p": "https://acme.com/pricing", "ts": 1767225600000, "props": { "scrollPct": 64 } },
    { "t": "click", "p": "https://acme.com/pricing", "ts": 1767225603000,
      "props": { "selector": "[data-id=\"plan-pro\"]", "x": 812, "y": 1420, "vw": 1440, "vh": 3200, "text": "Choose Pro" } },
    { "t": "custom", "n": "signup", "p": "https://acme.com/pricing", "ts": 1767225610000, "props": { "plan": "pro" } },
    { "t": "identify", "n": "user_1234", "ts": 1767225611000, "props": { "plan": "pro" } }
  ]
}

Each site under Glass, Sites carries the settings below. They decide what every tracker on that site does, wherever it is installed.

How quickly a change reaches visitors

The collector reads site settings at most a minute old. A web tracker reads them on every page load (keeping a copy for up to 5 minutes) and again every 5 minutes; a native tracker on start and on return to the foreground, at most every 5 minutes.

Glass is sold as a small ladder. Each rung adds something rather than only counting higher, and nothing that protects your visitors is ever left to a higher rung: input masking is on every plan. Rungs marked yearly are billed once a year, at ten times the monthly price.

The monthly event allowance

The allowance counts every event across all of a company's sites in a calendar month (UTC). Past it, the collector drops new events and replay chunks until the month turns: it is a stop, never a bill. Trackers are told quotaExceeded: a web tracker stops recording, and the app trackers stop sending until a later check, when the app comes back to the foreground, finds the site open again. The account is warned as the month's usage nears the allowance.

Collector limits