Autonnel v0.1.0

Custom events

Track any click or moment on your pages with a data attribute or one JS call, and see it in the funnel steps panel underneath the step it happened on.


The funnel steps panel counts page views per step. Custom events let you count anything else: a click on a specific button, a video that got watched, a size guide that got opened. Each event shows up as its own row underneath the step it happened on, with how many visitors triggered it and what share of that step’s visitors that is. A page can have as many events as you need.

There is nothing to configure first. You mark the event in the page, and it appears in the panel once visitors start triggering it.

Two ways to send an event

A data attribute, for clicks. Add data-autonnel-event to any element. Clicking it, or anything inside it, sends the event:

<button data-autonnel-event="buy_now_clicked">Buy now</button>

The attribute is looked for on the clicked element and up to six ancestors above it, so you can put it on a wrapper and it still works when the visitor clicks the button inside:

<div data-autonnel-event="hero_cta_clicked">
  <button><span>Get 40% off</span></button>
</div>

This form fires on clicks only.

A JavaScript call, for everything else. For moments that are not clicks - a video reaching thirty seconds, a form step completing, a scroll milestone your own script detects:

<script>
  window.autonnel?.track('video_watched', { seconds: 30 });
</script>

Always write it with the ?., and call it from an event handler or after DOMContentLoaded. The tracking script loads as a deferred module, so an inline script running while the page is still parsing will run before it exists - the ?. keeps that from throwing, but the event is not sent.

The second argument is optional. It is stored with the event but is not shown in the panel. It must be a plain object - an array or a primitive (a string, a number) is dropped, though the event itself is still sent.

Each event name is sent at most once per page load. A second track() call, or a second click on an element carrying the same data-autonnel-event name, is dropped - not an error, just a no-op. This means only the first call’s metadata for a given name is ever kept; a later call with the same name cannot change it.

Naming rules

An event name must start with a letter, may contain letters, digits, underscores and hyphens, and can be at most 40 characters:

buy_now_clicked     size-guide-opened     Video2Watched

Invalid names are dropped and a warning is logged to the browser console. Nothing is stored.

Do not build names out of data. This is the mistake that quietly breaks the panel:

// Wrong: every product gets its own event name.
window.autonnel?.track('added_' + productId);

// Right: one name, the detail in the metadata.
window.autonnel?.track('product_added', { productId });

A page is limited to 20 distinct event names. Past that, new names are dropped and the console says so once. Names you already sent before hitting the limit are unaffected - they simply follow the once-per-page-load rule above.

Reading the panel

Each event row sits under its step, indented, showing the event name, the number of distinct visitors who triggered it, and that number as a share of the step’s visitors. Rows are ordered by visitors, highest first, and each step shows its top 8 events.

A few things worth knowing when you read the numbers:

  • Visitors, not triggers. A visitor who clicks the same button nine times counts once, the same way the step counts above it work.
  • Events on pages with no recorded views do not appear. A step is only listed once it has page views, and its events are listed with it.
  • A share above 100% is possible. It means more visitors triggered the event than were counted viewing that step - usually because someone’s page view fell just outside the date range you are looking at while their click fell inside it. Widen the range and it resolves. The number is left as it is rather than capped, because capping it would hide the gap.

Where it does not appear

Custom events are shown on the /analytics funnel steps panel. They are not on the funnel detail page, and they are not part of the conversion columns or the exported stats.

Events are only attributed to a step when they happen on a page that belongs to a funnel. An event fired on a page outside any funnel is still recorded, but has no step to sit under, so the panel does not show it.