Custom events

Track actions that matter to you, such as signups, purchases or button clicks, from the browser.

Track an event

Once the script is on the page, call window.mosaicdeck.track(name, props?):

window.mosaicdeck?.track("signup");
window.mosaicdeck?.track("recipe_saved", { recipe: "banana-bread", servings: 8, vegan: false });

The script loads with defer, so use optional chaining (?.) for calls that could run before it has loaded. For example, from a click handler in your own script file:

<button id="buy">Buy now</button>
<script type="module">
  document.getElementById("buy").addEventListener("click", () => {
    window.mosaicdeck?.track("buy_clicked", { plan: "pro" });
  });
</script>

Limits

Each custom event counts as one event toward your plan's monthly total, like a page view.

Built-in events

• outbound, with url, when you add data-outbound="true" to the script tag.
• JavaScript errors are captured automatically as errors, not custom events (turn off with data-errors="false").

Where events show up

• The site's Events tab, with counts over time and recent occurrences with their properties.
• Your dashboard: once an event is common, Mosaicdeck suggests widgets for it.
• Your AI assistant, through the custom_events tool.

Good practice

• No personal data. Don't put names, email addresses or other personal details in event names or properties.
• Use short, stable names in snake_case, like signup or checkout_started.
• Event names and properties can be sent by anyone who has your site ID, so treat them as untrusted in your own tooling. Mosaicdeck always shows them as plain text, and labels them as visitor-supplied for your AI.

TypeScript

// global.d.ts
declare global {
  interface Window {
    mosaicdeck?: { track(name: string, props?: Record<string, string | number | boolean>): void };
  }
}
export {};