Visitor Tracking

What This Guide Does — A Set Up Tracking walkthrough showing how to read the Visitor Tracking Overview and Events Explorer tabs.

Why It Is Useful — Tracking gives you a clear, ready-made picture of revenue, conversion, and user behavior, without needing a data team to build it.

How to Use It

1

Open Visitor Tracking

Use these filters to change the reporting period and access module settings.

2

Read the Overview KPIs

These cards summarize your main performance numbers at a glance.

3

Choose the Right Date Range

Select a start and end date, then select Apply to update all data.

4

Check Metric Details

Open any metric card to view its trend over time and see the top sources contributing.

5

Review the Conversion Funnel

See how users move through key stages and where drop-offs occur. Check the User Base to understand registration status.

6

Use Events Explorer

Switch to Events Explorer to analyze user activity by event type over time.

Annotated walkthrough of the Visitor Tracking: opening the module and filters, Overview KPIs, choosing a date range, metric details, the Conversion Funnel and User Base, and Events Explorer

What You Should See — A dashboard that fills in with real numbers as visitors interact with your site, and a funnel that narrows at each stage from Visit down to Bet.

Tips

  • Use the quick filters for fast insights, drill into metrics for details, and explore events to uncover user behavior patterns.

Notification Launcher Styling

The tracking SDK can place the notification bell inside your own header, menu, or action bar. Add one anchor where the bell should render:

<div data-nommos-notification-anchor></div>

Then style the anchor or the exposed launcher parts from your site CSS:

.site-actions [data-nommos-notification-anchor] {
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-actions [data-nommos-notification-anchor] nommos-popup-launcher::part(launcher) {
  width: 44px;
  height: 44px;
  font-size: 24px;
  border-radius: 999px;
  background: transparent;
}

.site-actions [data-nommos-notification-anchor] nommos-popup-launcher::part(launcher):hover {
  background: rgba(17, 24, 39, 0.08);
}

Available styling hooks

Selector What it controls Useful properties
[data-nommos-notification-anchor] The empty slot you add to your page. display, align-items, justify-content, gap, width, height, min-width, min-height, margin, padding, color, font-size, line-height
nommos-popup-launcher::part(launcher-wrap) The wrapper around the injected bell button. display, align-items, justify-content, margin, padding, position, top, right, bottom, left, z-index, transform
nommos-popup-launcher::part(launcher) The bell button itself. display, align-items, justify-content, width, height, min-width, min-height, padding, font-size, line-height, color, background, border, border-radius, box-shadow, opacity, cursor, outline, transform, transition
The unread badge is not exposed as a CSS part yet, so its colour and size keep the SDK default. Notifications still open centred on the page; only the launcher position changes.

Related Guides