trakily.
Start free

Goals and custom events

Track signups, clicks and other conversions with data-trakily-goal attributes or the JavaScript API.

A goal is any action you want to count: a signup, a demo request, a click on a pricing plan. In Trakily, goals are custom events with a name. There is nothing to set up in advance: send an event and it appears in the Goal tab of the dashboard.

Track clicks with an attribute

Add data-trakily-goal to any element. When a visitor clicks it (or presses Enter or Space on it), the goal is sent.

<button data-trakily-goal="signup">Create account</button>

<a href="/pricing" data-trakily-goal="pricing_click">See pricing</a>

Clicks on child elements count too: the script looks for the closest element with the attribute, so an icon inside the button works.

Add properties

Add details with data-trakily-goal-<name> attributes. Dashes in the name become underscores.

<button
  data-trakily-goal="checkout_initiated"
  data-trakily-goal-plan="pro"
  data-trakily-goal-billing-cycle="yearly"
>
  Upgrade to Pro
</button>
<!-- sends checkout_initiated with { plan: "pro", billing_cycle: "yearly" } -->
  • Up to 10 properties per event.
  • Property names are lowercased and may only contain a-z, 0-9, _ and -, up to 32 characters. An event with an invalid name is dropped (the debug log says which).
  • Values are converted to text and cut at 255 characters. null and undefined values are skipped.
  • Event names are cut at 64 characters.

Track from JavaScript

Call window.trakily(name, properties?) anywhere after the script has loaded, for example after a form submits successfully:

window.trakily("signup", { plan: "free", source: "hero_form" });

If your code may run before the script loads, add this one-line queue first. Calls made before the script is ready are stored and sent as soon as it loads.

Before the Trakily script
<script>
  window.trakily = window.trakily || function () { (window.trakily.q = window.trakily.q || []).push(arguments); };
</script>

For TypeScript, declare the global once:

trakily.d.ts
declare global {
  interface Window {
    trakily?: (event: string, props?: Record<string, string | number | boolean | null | undefined>) => void;
  }
}
export {};

Naming goals

Use short, lowercase names with underscores. A few common names get friendly labels on the dashboard:

Event name
signup
Shown as
Sign up
Event name
checkout_initiated
Shown as
Checkout initiated
Event name
newsletter
Shown as
Newsletter subscribe
Event name
docs_search
Shown as
Docs search
Event name
demo_video
Shown as
Watched demo video

Names identify and payment are reserved for identify and email-based payment matching.

Where goals show up

  • The Goal tab lists each goal with its count and the share of visitors who completed it. Payments appear there as a Payment goal.
  • The Funnel tab uses your goals as steps (see Journeys and funnels).
  • Customer journeys show goals in each customer's timeline.
  • You can get an email, Slack or Discord message whenever a goal happens (see Alerts).
  • Goals count toward your monthly event allowance, like pageviews.