Custom Events
Track any action on your website as a custom event
Custom Events
Beyond automatic page views and form captures, you can track any action on your website as a custom event. Use custom events to measure button clicks, video plays, pricing page views, or anything else that matters to your business.
Basic event tracking
Call window.atribuTracker.track() with an event name and optional properties:
window.atribuTracker.track("button_clicked", {
payload: {
button_name: "pricing_cta",
page: "/pricing",
},
});The event name is the first argument. The second argument is an object with a payload key containing any properties you want to attach to the event.
Revenue tracking
For events that involve money (purchases, upgrades, upsells), use trackRevenue() to include the amount and currency:
window.atribuTracker.trackRevenue("purchase", 99.99, "USD", {
product: "Pro Plan",
billing_cycle: "monthly",
});| Parameter | Type | Description |
|---|---|---|
eventName | string | Name of the event |
amount | number | Revenue amount |
currency | string | ISO currency code (USD, EUR, MXN, etc.) |
data | object | Optional additional properties |
Page view tracking
Page views are tracked automatically on every page load. For single-page applications (SPAs) where the page changes without a full reload, you can fire page views manually:
window.atribuTracker.page();SPA auto-detection
Atribu automatically detects pushState and replaceState navigation in most SPAs (React, Next.js, Vue, etc.) and fires page views without manual calls. Only use manual page views if auto-detection is not working for your setup.
Event naming best practices
Good event names make your reports easier to read and your conversion goals easier to set up.
Use snake_case
window.atribuTracker.track("video_played", { payload: { video_id: "abc" } });
window.atribuTracker.track("pricing_viewed", { payload: { plan: "pro" } });
window.atribuTracker.track("checkout_started", { payload: { cart_value: 149 } });Be specific
| Instead of | Use |
|---|---|
click | pricing_cta_clicked |
submit | contact_form_submitted |
view | case_study_viewed |
purchase | subscription_purchased |
Stay consistent
Pick a naming convention and use it everywhere. If your first event is form_submitted, do not switch to formSubmit or FormSubmitted later.
Using custom events as conversion goals
Any custom event can be turned into a conversion goal in Atribu. This means the attribution engine will track which ads and campaigns drive that specific action.
Track the event on your site
window.atribuTracker.track("demo_requested", {
payload: {
plan_interest: "enterprise",
},
});Create a conversion definition in Atribu
Go to Settings > Conversions and create a new conversion definition. Set the Source event name to demo_requested. Atribu will start attributing this event to your campaigns.
Automatic events work too
You can also create conversion definitions for auto-captured events like lead_submitted and appointment_booked. Any event that flows through the tracker can become an attribution goal.
Additional tracking methods
Set a user ID
If your app has its own user ID system, you can link it to the Atribu visitor:
window.atribuTracker.setUserId("user_12345");Observe element impressions
Track when a specific element becomes visible on screen (useful for measuring ad impressions or content visibility):
var cleanup = window.atribuTracker.observeImpression("#hero-banner", {
payload: { banner_variant: "spring_sale" },
});
// Call cleanup() to stop observingThe event fires once when the element is at least 50% visible. You can customize the threshold:
window.atribuTracker.observeImpression("#cta-section", {}, {
threshold: 0.75, // Fire when 75% visible
});