When the action is a button press or a link — subscribe, download, book a call — mark the element itself. The script does the rest.
<button data-ts-goal="signup">Create account</button>That is the whole setup. The goal appears on the dashboard the first time someone clicks it.
Where to put the attribute
On the element that is clicked, whatever it is — a <button>, an <a>, or
anything else with a click handler. A click on something inside it counts too,
so an icon or a <span> within the button does not need its own attribute.
Adding parameters
Use data-ts-goal- plus the parameter name. Hyphens in the attribute become
underscores in the parameter:
<button
data-ts-goal="initiate_checkout"
data-ts-goal-plan="growth"
data-ts-goal-traffic-step="200k"
data-ts-goal-price="59">
Subscribe to Pro
</button>That sends initiate_checkout with { "plan": "growth", "traffic_step":
"200k", "price": "59" }, and the Goals card can then break the conversion down
by each of them.
Note the quotes on "59". HTML attribute values are always strings, and
the script does not guess otherwise. Send the same parameter as a number from
JavaScript elsewhere and you get 59 and "59" grouped as two different
values. Pick one route per parameter.
When a click is not enough
Use From your code instead when:
the action can fail, and you only want to count the ones that succeeded — a click fires whether or not the form validated
the goal happens without a click at all, such as a step completing automatically
your framework re-renders the element, though this is usually fine: the script listens on the document rather than on each element, so elements added after page load still work
Naming
Lowercase letters, numbers, and _, -, : only, up to 64 characters. See
naming rules.
Further detail
Custom events covers the limits, what a parameter may contain, the byte ceiling and the reserved names.