Custom Events & Properties

Sending custom events

The Abner tracking script exposes a global window.abner() function that you can call to send custom events. The first argument is the event name, and the optional second argument is an object of custom properties.

window.abner('event-name', { key: 'value' })

The event name is a string that identifies the action. It should match the name used in your goal configuration if you want the event to count as a conversion.

Examples

Tracking a signup button click

Attach an event listener to your signup button and fire a custom event when it is clicked:

document.getElementById('signup-btn').addEventListener('click', function() {
  window.abner('Signup')
})

Tracking a form submission

Fire an event when a form is submitted, and include the form's plan selection as a custom property:

document.getElementById('signup-form').addEventListener('submit', function() {
  window.abner('Form Submit', { plan: 'pro' })
})

Tracking a purchase

Send a custom event with revenue and product information after a successful checkout:

window.abner('Purchase', {
  product: 'Annual Plan',
  value: 299,
  currency: 'USD'
})

Custom properties via data attributes

You can attach custom properties to every pageview by adding data-props-* attributes to the Abner script tag. These properties are automatically included with each pageview event, without any additional JavaScript.

<script
  defer
  data-site="YOUR_SITE_ID"
  data-props-author="John"
  data-props-section="blog"
  src="https://www.abner.app/abner.js"
></script>

In this example, every pageview will include author: "John" and section: "blog" as custom properties. This is useful for static sites where you want to tag pages by category, author, or any other dimension without writing JavaScript.

Custom properties via the JavaScript API

For dynamic properties that vary per event, pass an object as the second argument to window.abner():

window.abner('Download', {
  file: 'whitepaper.pdf',
  format: 'pdf',
  size: '2.4MB'
})

Property values can be strings, numbers, or booleans. Each property key-value pair is stored and made available for filtering and breakdown on the dashboard.

Viewing custom event data

Custom event data appears in two places on your dashboard:

• Goals section — If you have created a goal matching the custom event name, the goal card will show total conversions, unique conversions, and the conversion rate.
• Properties tab — When you click on a goal card or filter by a custom event, a Properties tab appears. This tab shows a breakdown of all custom properties attached to that event, with counts for each unique value.

For example, if you track a Signup event with a plan property, the Properties tab will show how many signups occurred for each plan value (e.g., "free": 120, "pro": 45, "enterprise": 12).

Filtering by custom properties

After selecting a goal filter on the dashboard, you can further narrow results by clicking on a specific property value in the Properties tab. This filters the dashboard to show only visitors whose events included that exact property value.

For example, filtering by plan = pro on a Signup goal shows you the referrers, pages, and locations for visitors who signed up for the Pro plan specifically.

Limitations

Keep the following limits in mind when using custom events and properties:

Events that exceed these limits will be silently dropped. Ensure your event names and property keys are concise and consistent across your codebase.