What Trace needs

When you add a result with When they click a button or link, Trace needs a way to recognise that button. It uses the button’s class or id, written the way web pages name them (a CSS selector):

• an id with a # in front, like #call-back
• a class with a . in front, like .book-now

Trace counts a click on the button, or on anything inside it, such as its icon. It does not use the words on the button: typing Book now will not work.

To count clicks on links that take people to another website, such as booking.com, use Link out to another site instead. See Count clicks on links to another website.

Find the class or id with your browser

These steps work in Chrome, Edge, Firefox and Safari. In Safari, first turn on Show features for web developers in Settings, Advanced.

1. Open the page with the button on your website.
2. Right click the button and choose Inspect.
3. A panel opens showing your page’s code, with the button’s line highlighted. It starts with <a for a link or <button for a button. If the highlighted line is a <span> or an icon, look one or two lines up.
4. If the line has id="...", use that id with a # in front. <button id="call-back"> becomes #call-back.
5. If not, look at class="...". Each word in it is a class. Pick the one that names this button, and put a . in front. <a class="btn btn-primary book-now" href="/book"> becomes .book-now.
6. Type it in Trace.

Good and bad examples

These work:

• #call-back: an id belongs to one thing on the page.
• .book-now: a class that names this button.
• a.book-now: a link with the class book-now.
• .btn.book-now: something with both classes. No space between them.

These do not:

• .btn: usually on every button on your site, so every click would count.
• Book now: the words on the button. Trace needs its class or id.
• .css-1q2w3e4: made up by your site’s builder, and can change whenever the site is updated.
• /contact: a page, not a button. Use When they reach a page.

Add to cart buttons

Find it on my site finds add to cart buttons on most Shopify and WooCommerce shops. If you set it yourself, these work on most themes:

• Shopify: form[action*="/cart/add"] [name="add"]
• WooCommerce product pages: .single_add_to_cart_button

Check it works

1. Open your site in your browser, right click anywhere and choose Inspect, then open the Console tab.
2. Type document.querySelectorAll('.book-now').length, with your own class or id in place of .book-now, and press Enter.
3. 1 or more means the button is on that page. 0 means nothing on the page matches: check the spelling, and the . or # in front.
4. Save the result in Trace. Trace starts watching for the button within about 10 minutes.
5. Click the button on your site. If your site asks about cookies, accept them first, or the visit is not counted. The result shows as seen on Conversions once it has happened.