With custom attributes, you can uniquely identify elements on your website, making tracking setups for tools such as Google Tag Manager (GTM), Google Analytics (GA4), or Meta Pixel significantly more stable and reliable.
This approach is especially useful when you want to measure clicks, forms, or other interactions without relying on text content or automatically generated CSS classes.
Why custom attributes are useful
Many tracking setups rely by default on:
button text
CSS classes
or dynamic HTML structures
The challenge is that these can change quickly due to design updates, text edits, or new deployments, which can make tracking unreliable.
Custom attributes solve this issue by providing a stable, immutable "tracking markup".
This results in several advantages:
a stable tracking structure, independent of design changes
no dependency on button text or CSS classes
a consistent logic across multiple tracking tools
clean scalability for complex funnels
Setting up custom attributes
Step 1: Select the element
Go to the element you want to add an attribute to.
Step 2: Open settings
For a button: Click on the button and open the "Custom Attributes" option via the three-dot menu.
For a form: Click the brush icon, then open the "Custom Attributes" option via the three-dot menu.
For a form field: Click the desired form field, open the settings via the three-dot menu, and then select "Custom Attributes".
For a section: Click the three-dot menu in the top right corner of the section and then select "Custom Attributes".
Step 3: Add data attribute
Click "Add data-attribute" and enter the attribute name and value.
Example:
Attribute name:
data-trackValue:
pricing-button
The resulting data attribute is then:
data-track="pricing-button"
📌 Please note: The attribute itself does not trigger tracking. It serves as a stable "hook" that tracking tools can recognize. Based on this, events can be triggered, such as:
button clicks
form submissions
interactions with specific page sections
Usage in different tools
1. Google Tag Manager (GTM)
After you have added the data attribute in Onepage, you can use it in Google Tag Manager for tracking purposes.
Example: data-track="pricing-button"
In GTM, you then create a click trigger that checks whether the respective element contains this attribute. Based on that, you can fire an event and send it to Google Analytics 4 or other tracking tools.
The actual setup of variables, triggers, and tags is done directly in Google Tag Manager and depends on your individual tracking setup. You can find more information in the official Google Tag Manager documentation.
📌 Please note: Google Tag Manager does not "recognize" the attribute as a trigger directly. Instead, the attribute is read via a variable (e.g. a DOM element variable or a custom JavaScript variable). This variable is then used as a condition within a trigger.
2. Google Analytics 4 (GA4)
After you have added the data attribute in Onepage, it serves as a unique identifier for an element (e.g. a button or a form).
Example: data-track="pricing-button"
This identifier is used by tracking tools such as Google Tag Manager or a direct tracking implementation to detect interactions like clicks or form submissions.
These interactions can then be sent as events to Google Analytics 4 and analyzed there.
📌 Please note: GA4 does not read data attributes directly. The attribute is purely used as a technical identifier within your tracking setup. The actual event tracking setup depends on your implementation and is typically handled either via Google Tag Manager or directly through GA4 tracking (gtag / code).
More information can be found in the official Google Analytics Help Center.
3. Meta Pixel
After you have added the data attribute in Onepage, it can be used to send interactions to the Meta Pixel.
Example: data-track="pricing-button"
This allows you to track actions such as button clicks or other key interactions as events, which can be used for conversion tracking, campaign analysis, or retargeting.
The actual setup is done in the Meta Events Manager or via Google Tag Manager and depends on your individual tracking implementation.
More information can be found in the official Meta documentation:
Meta Business Help Center
Important rules
Use clear and descriptive names:
hero-ctapricing-buttoncontact-form
Avoid:
spaces
special characters
generic names like
button1
Ideally, maintain a consistent naming structure across your entire website.
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂