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?
- Capture full customer journey beyond default form fields
- 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:
- <button data-exatom-name="subscribe-newsletter">Subscribe Now</button>
- <div data-exatom-name="product-hero-image">
- <img src="hero.jpg" alt="Featured Product">
- </div>
- <div class="custom-dropdown" data-exatom-name="choose-size">
- <!-- custom dropdown markup -->
- </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
- Log in to your Exatom dashboard.
- Navigate to the Forms section and select the form you want to edit.
- Scroll to the bottom and click + ADD FIELD.
- In the HTML name field, enter the exact value you used for data-exatom-name.
- Complete the other required fields (Display name, Type, etc.).
- Save your form.
Once defined, Exatom will automatically record every click or interaction on that element as a form “field” event.
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.