Documentation

Learn how to use the tracking tool

Watch the video seriesEight short videos covering the whole product, on YouTube.

No-Code Tracking

The Element Picker lets you name a button without touching your code. You open your own site through it, click the thing you want to measure, and give it a name. Nothing is deployed, and nobody waits for a release.

How it works

Open Element Picker in the sidebar, enter your site’s address, and press Connect. Your site opens in a second tab with a small panel on top of it. If no panel appears, the tracker is not installed on that site. The panel is part of the script, so it cannot appear without it.
Go to the page the element is on and click it. In Select mode your site does not react to clicks, so use Navigate to move around, then switch back. Hovering outlines what you would pick.
Give it a name and save. Every matching click now counts under that name, including clicks already recorded — feature numbers are worked out from the events themselves. Funnels and flows are the exception. Their numbers are written once, shortly after each day ends in your project’s timezone, and never worked out again, so a rule only counts there from the day you made it.

The Element Picker before it is connected, with a field for the page address and a Connect button — Where you start. Type the address of the page you want to work on and press Connect.

Select and Navigate

The two buttons at the top of the panel decide what a click does on your site. The picker starts in Select. You need Navigate when the element you want is not on the page you connected to.

Select — a click picks an element

The pointer outlines whatever is under it, and a click picks that element. Your site is inert in this mode: links do not follow, buttons do not submit, menus do not open. That is what makes it possible to pick something that would otherwise take you elsewhere. Scrolling still works.

Navigate — a click works as usual

The outlines disappear and your site behaves as it does for a visitor. Links follow, buttons submit, menus open. Nothing is picked in this mode. The panel stays on screen, so switching back to Select is one click.

Navigate to get there, Select to pick. Switch to Navigate, click through your site until the element is in front of you, switch back to Select, then click it.

A site with the picker panel on top of it, the pointer outlining the element underneath it in Select mode — Select mode. The pointer outlines what is under it, so you can see what you would pick before you click.

The picker survives those page loads. It remembers that it is open, which mode it was in, and your Scan setting, so you do not have to connect again after every click. That memory lives in the site’s sessionStorage. It is the one exception to the tracker storing nothing in the browser: it is yours rather than your visitors’, it is only written while the picker is open, and it goes when you close the tab. Privacy has the rest. It belongs to the site it was opened on, so the picker ends if you move to a different domain.

One element, or every one like it

Match this exact element

Saves the element’s full address in the page, including which of several identical neighbours it was — the :nth-of-type(3) part. That one element counts, and nothing else. Use it for a single thing: the Sign Up button in your header, one particular link in the footer.

Match all similar elements

Saves the same address with the position removed. Everything else stays: the kind of element, an input’s type, an accessibility role — the role= that tells a screen reader what a thing is. A rule saved from the third product card also counts the first, the second and the tenth. Use it for anything that repeats. The two buttons only appear when there is a position to remove. That happens when the element, or something it sits inside, has a neighbour of the same kind — which is almost always.

Which one to choose

Match this exact element: when there is only one of it, and you want to know if a second one starts counting.
Match all similar elements: when the thing repeats and you want the total.

The picker panel after a click, naming the selected element and showing its selector, with Exact and Generic offered as match modes — After the click, with Generic chosen. All six Add to cart buttons are outlined, and the address the rule will save has no position in it. Exact would have counted only the button that was clicked.

The conditions on a rule

A rule is a list of conditions, and an event has to satisfy all of them to be counted. When you save from the picker, four tick-boxes decide what goes into that list. Fewer conditions means the rule catches more.

The picker panel listing the conditions for the new rule, with the selector ticked and the tag, text and page path offered — The four tick-boxes that decide what goes into the rule. Selector is ticked for you; Tag, Text and Page path are offered, and each one you add makes the rule catch less.

Selector: the element’s address in the page. Ticked for you, and the only one that is. It saves the exact or the general address, whichever you chose above. You can untick it, but then the rule has no address to point at.
Tag: the kind of element — button, a, input. Cheap to add, and rarely enough on its own. Most pages have hundreds of buttons.
Text: the visible label. It narrows the rule to elements carrying that text. It is a condition like any other, not a backup for the selector: if the selector stops matching, so does the rule. On a translated site the label differs per language, and a rule built on one language counts only that one.
Page path: keeps the rule to the page you were on. The picker saves that page’s path and matches with contains — pick something on /pricing and the rule gets contains /pricing. Tick it when the element only exists on that page. Leave it off for a header or footer you want counted everywhere. Watch out on your home page: the path there is /, and every path contains /, so the condition lets everything through. URL parameters are never part of the path, so /search matches however the search was filtered.

Start narrow, then widen. Save with the selector alone and scan the page to see what it caught. Then drop a condition, or switch to Match all similar elements. It is easier to widen a rule later than to notice one that has been counting too much.

Those four are all you get while creating a rule. Editing one afterwards opens a different form — Edit beside the rule in the scan results — where a condition is a property, a comparison and a value. Two properties live only there. Event Type keeps a rule to page views, clicks, submitted forms or your own custom events. Site address does for a whole site what Page path does for one page.

The picker's Edit Feature Rule form, with the feature name, one condition built from a property, a comparison and a value, and a button to add another — Editing an existing rule. A condition here is a property, a comparison and a value, and the property list holds the two the tick-boxes never offer.

Checking what a rule catches

Scan Page marks every element on the current page that one of your rules matches, in green, with the feature’s name beside it. Do this before you rely on a rule’s numbers. It is the quickest way to see that Match all similar elements reached further than you meant. Press the button again for Scan: Auto, which re-runs as you move around the site. Try more than one page: a rule with no page condition applies everywhere.

A scanned page with every matching element outlined in green and labelled with the feature name, and the panel showing how many were found — After a scan. Everything the rule matches is marked green on the page with the feature’s name beside it, and the panel lists how many elements that was.

The same scan lists elements that already carry a data-track attribute in your code. Those are named without a rule, so seeing them here saves you writing a second rule for something already counted.

What’s next

The numbers these rules produce are on Feature Tracking. If you can change your site’s code, Custom Events does the same job with an attribute or a function call.