How to Track Custom HTML Elements

How to Track Custom HTML Elements

Want to understand how visitors interact with your custom form controls, such as image-based product selectors, styled radio buttons, or non-standard dropdowns? By adding a simple HTML attribute to any element, you can start capturing clicks and interactions in Exatom’s analytics platform.

Why Tag Custom Elements?

  1. Capture full customer journey beyond default form fields
  1. Measure engagement within interactive components

1. Add the tracking attribute to your website

Have your development team include the following attribute on any element you wish to track:
  1. <button data-exatom-name="subscribe-newsletter">Subscribe Now</button>

  3. <div data-exatom-name="product-hero-image">
  4.   <img src="hero.jpg" alt="Featured Product">
  5. </div>

  7. <div class="custom-dropdown" data-exatom-name="choose-size">
  8.   <!-- custom dropdown markup -->
  9. </div>

Attribute details
• Name: ⁠data-exatom-name
• Value: a descriptive identifier
• Unlimited length
• Characters allowed: letters (A–Z, a–z), numbers (0–9), dashes (⁠-), underscores (⁠_)

2. Define the Exatom element

  1. Log in to your Exatom dashboard.
  2. Navigate to the Forms section and select the form you want to edit.
  3. Scroll to the bottom and click + ADD FIELD.
  4. In the HTML name field, enter the exact value you used for ⁠data-exatom-name.
  5. Complete the other required fields (Display name, Type, etc.).
  6. Save your form.

Once defined, Exatom will automatically record every click or interaction on that element as a form “field” event.

Impact on Website Functionality and Performance

Adding the ⁠data-exatom-name attribute has no impact on your site’s functionality, layout, or loading performance. It’s a non-rendered HTML attribute; browsers ignore it during page rendering, and it doesn’t affect CSS or JavaScript execution. In practice, this means you can freely tag as many elements as needed, without worrying about slowing down your pages, breaking styles, or interfering with existing technology, while seamlessly capturing rich interaction data in Exatom.

    • Related Articles

    • The HTML form element

      Forms are more advanced than ever and modern technology does not require the HTML <form> element for your form to be functional. However it's important to add the semantically correct <form> container element to all your forms. One of the reasons is ...

    • Frequently Asked Questions

      Storage and data retention Session replays are stored for 90 days after the session ends. What cannot be recorded? Exatom's Session Replay recorder is agnostic to the technology or platform you used to build your website. We rely on standards like ...

    • Install with Google Tag Manager

      1. In order to add the Exatom tags to Google Tag Manager, log in to your account and select New Tag and click Add a new tag. 2. In the upper-left corner, rename the tag and change 'Untitled Tag' into 'Exatom Event Tag', click on Tag Configuration and ...

    • Privacy controls

      Exatom is a cookieless, privacy-first platform by design. We also took that route whilst developing our Session Replay product. Exatom's default privacy measurements for Session Recordings, all occurring locally within the user's browser before any ...

    • Adding basket and conversion value tracking to your tags

      Reporting on the actual  Conversion value or the Missed conversion opportunity are good indicators of good and bad performing forms or funnels. Adding revenue tracking to your tags Any of the following parameters can be added to the Exatom tag ...