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.

Method 1: 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" });

Event name rules

Use lowercase letters
Numbers, underscores (_), hyphens (-), and colons (:) are allowed
Maximum 64 characters

Custom data rules

Property names: lowercase letters, numbers, underscores (_) and hyphens (-) only. Max 32 characters.
Property values: any string, max 255 characters. HTML tags are stripped automatically for XSS prevention.
Limits: maximum 10 custom properties per event.

Method 2: HTML data attributes

Track clicks without writing JavaScript by adding data-attribu-goal attributes to any clickable element:

<!-- 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>

<!-- Track with multiple custom parameters -->
<button
  data-attribu-goal="initiate_checkout"
  data-attribu-goal-price="49"
  data-attribu-goal-currency="USD"
  data-attribu-goal-plan-type="pro">
  Subscribe to Pro Plan
</button>

Any attribute starting with data-attribu-goal- is included as custom data. Attribute names are converted from kebab-case to snake_case (e.g. data-attribu-goal-plan-type becomes plan_type).

Scroll tracking

Track when a user scrolls to a specific section of your page using data-attribu-scroll:

<!-- 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. You can also add a data-attribu-scroll-delay to require a minimum visibility duration.

See the full scroll tracking documentation for advanced usage, delay configuration, and funnel examples.

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 in your dashboard

Custom events appear in the Goals card on your dashboard. Click any goal to see how many visitors completed it during the selected period.

If you passed custom properties, expand the goal to see property values and counts (e.g. how many visitors checked out on each plan).

Goals can also be used in:

Conversion funnels as funnel steps
Alerts to get notified on specific events
Dashboard filters to segment visitors who completed specific goals

Automatic payment goals

When you connect Stripe or another payment provider, attribu.tech automatically tracks a payment goal for every successful charge. You don't need to send this event manually unless you're using a custom payment flow.