Custom events and goals

Beyond automatic pageview tracking, you can track custom events like button clicks, form submissions, sign-ups, and any other user action.

JavaScript API

Use window.attribu() to send custom events:

// Track a custom event
window.attribu("signup_clicked", { plan: "pro" });

// Track a form submission
window.attribu("form_submitted", {
  form_name: "contact",
  email: "user@example.com",
});

// Track a feature usage
window.attribu("feature_used", { feature: "export_csv" });

HTML attribute tracking

For simple click tracking without writing JavaScript, add data-attribu-goal attributes:

<!-- Track button clicks -->
<button data-attribu-goal="cta_clicked">
  Get started
</button>

<!-- Track with extra data -->
<a href="/pricing"
  data-attribu-goal="pricing_viewed"
  data-attribu-goal-source="header">
  View pricing
</a>

Any attribute starting with data-attribu-goal- will be included as extra data in the event.

Scroll tracking

Track when a user scrolls to a specific section of your page:

<!-- Fire event when 50% of the element is visible -->
<div
  data-attribu-scroll="pricing_section_seen"
  data-attribu-scroll-threshold="0.5"
>
  <h2>Pricing</h2>
  ...
</div>

The event fires once per page load when the element scrolls into view. The threshold (0 to 1) controls how much of the element must be visible.

Identify users

Link a visitor to a known user ID or email after they sign in or fill out a form:

window.attribu("identify", {
  user_id: "usr_123",
  email: "user@example.com",
  name: "Jane Doe",
});

Manual payment tracking

If you're not using Stripe Checkout, you can manually trigger a payment event:

window.attribu("payment", {
  email: "user@example.com",
});

Queuing events

If you need to send events before the script loads, use a queue pattern:

<script>
  window.attribu = window.attribu || function() {
    (window.attribu.q = window.attribu.q || []).push(arguments);
  };
  // These will be replayed when the script loads
  window.attribu("early_event", { key: "value" });
</script>

Viewing events

Custom events appear in your dashboard under the globe/live view. Goal events triggered viadata-attribu-goal show up in the Pages section.