Mandera Docs

Mandera supports both custom events (you call them) and automatic events (the snippet triggers them for you).

Custom Events (`ma_event`)

The snippet exposes a global ma_event function.

Basic usage

ma_event('button_clicked')

With metadata

ma_event('purchase_complete', {
  metadata: {
    orderId: 'ORD-12345',
    value: 99.99,
    currency: 'USD',
  },
})

With callback

The callback runs after the request attempt completes (including in cases where events are skipped for bots or invalid names).

ma_event('signup_complete', {
  metadata: { plan: 'premium' },
  callback: () => {
    window.location.href = '/thank-you'
  },
})

Event Names

Event names are normalized to lowercase and must follow these rules:

Only letters, numbers, and underscores: ^[a-zA-Z0-9_]+$
Maximum length: 200 characters

Invalid names are skipped.

Automatic Events

Click events via data attributes

Add data-mandera-event to an element to track clicks automatically.

<button
  data-mandera-event="signup_click"
  data-mandera-metadata='{"page":"home"}'
>
  Sign Up
</button>

data-mandera-event: the event name
data-mandera-metadata (optional): JSON string parsed into the event metadata

Form submissions

Form submissions are tracked automatically as the ma_formsubmit event.

Captured metadata:

formId
formName
formAction
formMethod

Disable Events

Disable tracking for a subtree

Add data-ma-no-track to any element to disable:

heatmap interactions for that subtree
auto click events for data-mandera-event elements in that subtree
auto ma_formsubmit for forms in that subtree

<div data-ma-no-track>
  <button data-mandera-event="will_not_track">No tracking here</button>

  <form>
    <input name="email" />
  </form>
</div>

Disable a specific form

<form data-ma-no-track>
  <input name="email" />
</form>

Disable custom events

If you call ma_event() yourself, the “disable” mechanism is simply not calling it, or gating calls behind your own condition:

if (window.__hasAnalyticsConsent__) {
  ma_event('newsletter_signup')
}

Calling `ma_event` Before the Script Loads

If you need to fire events before analytics.js finishes loading, define a tiny queue stub before the real snippet.

<script>
  window.ma_event_queue = window.ma_event_queue || []
  window.ma_event = function () {
    window.ma_event_queue.push(Array.from(arguments))
  }
</script>

<script
  src="https://<your-mandera-web-url>/analytics.js"
  mandera-org="ORG_ID"
  data-property-id="PROPERTY_ID"
  async
></script>

When the snippet initializes, it processes window.ma_event_queue and sends those events.

Track Events