When setting up rules in the Event Builder, you may want to use Element ID or Class as your matching attribute. These are HTML properties used to identify and style elements on a page.
Follow these steps to locate the Element ID or Class for a button (or other element):
Open your webpage in Google Chrome (or any browser with developer tools).
Right-click on the button or element you want to track. (or use Cmd + Option + I on Mac / Ctrl + Shift + I on Windows).
Select “Inspect” (this opens the browser’s developer tools).
In the Elements panel, you’ll see the HTML for the page. The part you clicked will be highlighted.
Look for one of the following attributes in the highlighted code:
id="your-element-id" → This is the Element ID.
class="your-class-name" → This is the Class name (note: there can be multiple class names).
html
<button id="submit-button" class="cta-button primary">
Submit
</button> Element ID: submit-button
Class: cta-button, primary (you can use either in your rule)
If cta-button is reused on many pages but primary is more unique to the element you're targeting, then primary might be the better choice.
For maximum precision, especially if this class appears on multiple pages, combine it with a Page URL rule to isolate the button instance on a specific page.
Use Element ID when available — it’s usually unique.
Use Class when the ID isn’t present or when you want to track a group of elements.
Use Element Text if the button always says something specific (e.g., “Download Now”).
For maximum precision, combine your rule with a Page URL rule to isolate the button instance on a specific page.
You can now plug this attribute into the Event Builder in Knotch when defining your conversion or action rule.
Many modern sites rely on class names rather than unique IDs. This is totally normal.
Classes are safe to use, but they might be shared across multiple buttons.
To ensure accuracy, pair your class with a Page URL condition in the Event Builder.
Example: Match class="cta-button" only when the Page URL contains /checkout.
By combining multiple rules (like Class + Page URL), you can track the right interaction precisely.