Help center

All collectionsConversionsHow do I find the Element ID or Class for a button on my website?

How do I find the Element ID or Class for a button on my website?

Use this article to learn how to locate the HTML attributes (like ID or Class) for a button or element when setting up Conversions or Actions in Knotch.

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):

Steps to find the Element ID or Class:

  1. Open your webpage in Google Chrome (or any browser with developer tools).

  2. Right-click on the button or element you want to track. (or use Cmd + Option + I on Mac / Ctrl + Shift + I on Windows).

  3. Select “Inspect” (this opens the browser’s developer tools).

  4. In the Elements panel, you’ll see the HTML for the page. The part you clicked will be highlighted.

  5. 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).

Example

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.

Best Practices

  • 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.

If you don’t see an ID—don’t worry!

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.