Use Autocapture and Visual Labeling to Track Website Clicks
Simplify your Amplitude implementation and surface your product usage insights fast by learning how to use Autocapture and visual labeling to define your website click events.
Learn about Autocapture and Visual LabelingAutocapture is the fastest way to capture information about your website or app with minimal setup. After it's enabled through the Browser SDK, Autocapture captures user interactions on your digital products with a single code snippet. It lets you get started and uncover insights with minimal setup activity.
Autocapture is available for all Amplitude plans.
Amplitude offers two primary ways to capture events:
From the moment you install the SDK, Amplitude automatically collects data to gain insights into feature usage, funnel conversion rates, and even specific click analysis on the web. Autocapture lets you focus on speed when setting up your analysis.
When you want to investigate specific actions in your application requiring additional metadata, or have some events (like a purchase event) that may be core to your business, use precision tracking. Precise tracking in code allows you to send these events with a robust set of properties to perform even deeper analyses.
The solutions are compatible together, which means you can use a combination of Autocapture and precision tracking data in your analyses.
For example, imagine you're releasing a new feature and don't have the time to implement precision tracking. Autocapture can serve as a safety net for collecting baseline metrics and answering engagement questions. After you have these insights and want to go deeper, you can work with your team to implement precisely tracked events and get the best of both worlds.
Autocapture provides several configuration options to help you adjust your implementation to your needs. You can turn individual Autocapture events on and off as needed, and even tune those events further to optimize your event volume.
The default configuration should provide the right balance of automatically capturing events that matter while excluding ones that don't. This balance is critical when capturing clicks. By default, Amplitude captures clicks on interactive elements (for example: links, text fields, dropdowns, and other form elements). Amplitude also captures other clicks on elements that result in a change on the page (for example, a new visual element) or a navigation to a new page. This configuration excludes clicks on blank areas, a user highlighting text, and other similar actions to ensure you aren't paying for low-value user behaviors.
Amplitude recommends monitoring your event volume (go to Settings > Plans & Billing) as you make changes to ensure it matches your expectations. At any time, you can change your configuration to only capture clicks on specified elements (or elements with certain classes), track on specific pages, or turn click tracking off while still taking advantage of other Autocapture data (page views, sessions, and so forth.).
Keeping your taxonomy clean and organized is essential to ensuring users can find what they need. When you enable Autocapture, you get a predefined set of event and property types for ingestion. For example, the SDK captures click interactions as two events ("Element Clicked" and "Element Changed") with a predefined set of properties rather than a stream of noisy user interactions.
Visual labeling allows users within your organization to create events, so there are some additional considerations to make when thinking about your taxonomy:
Some additional things to know about your labeled events:
For many organizations, data privacy, security, and personally identifying information (PII) are critical factors when setting up their data collection strategy. Your business needs, the purpose of your digital products, and your compliance requirements between jurisdictions may vary. There's no one-size-fits-all solution that works in every situation.
Autocapture provides flexible configuration options to enable you to adhere to your company's privacy and security policies and requirements. While it's your responsibility to ensure your use of Amplitude complies with your data privacy policies and requirements, these settings help you reach compliance.
You control what information you collect with Autocapture and send to the Amplitude platform. For information about how to update the events that Autocapture sends to Amplitude, go to Browser SDK | Disable Autocapture.
The following list is Autocapture's default settings for capturing clicks and changes on page elements ("Element Clicked" and "Element Changed" events). It also include the following privacy and security considerations. You don't need to do anything to turn these protections on. They're always active for you.
contenteditable=”true”
as an attribute. The SDK only collects class names and the type attribute. Any end user-inputted text is excluded.textContent
) of the element clicked and its children. It's not recommended that you use Autocapture's element interaction tracking on pages that may contain sensitive information. Amplitude uses pattern matching to automatically mask any text content that looks like a credit card number, social security number, or email addresses.data-amp-track-
. This allows data in these attributes to be intentionally passed back to Amplitude.data-amp-mask
attribute to the <title>
element, which replaces the actual title with a masked value to protect sensitive information. For implementation details, go to Browser SDK page title masking.The following Autocapture protections are available if you choose to implement them. By default, they're not enabled. You can enable all, or some, of the protections listed below.
For some of these protections, you must add an attribute to your elements. Some of these protections are enabled through the Data Settings > Autocapture page. The documentation for each protection indicates how to enable it.
Precise text masking redacts text capture from specific elements on the page. Adding this attribute lets you track clicks while redacting text displayed in particular elements.
To mask an element's text, add the attribute data-amp-mask
to it. If, for example, you have the following on a button:
<div data-amp-mask>John Doe</div>
Autocapture still tracks the click on the div element. However, the text content "John Doe" is replaced with *****
in the Autocapture data. This exclusion works on the SDK level.
Precise text works recursively so that any text contained in an element is masked. For example:
<div data-amp-mask>
John Doe
<div>Jane Doe</div>
</div>
In the above example, both names are masked with *****
.
Precise attribute masking redacts specific HTML attributes from capture. Defining which attributes you want to mask lets you track clicks with Autocapture while redacting attributes in your HTML. Specifying attributes on an element masks that attribute on all child elements as well.
For example, if you include the following attribute:
<div data-amp-mask-attributes="name">
<span name="John D">Account</span>
</div>
on a button or link, the name "John D" is masked with *****
.
You can also use a list to specify more than one attribute to be masked. When using a list, format the masking attributes as data-amp-mask-attributes="name,ssn"
.
You can mask information based on patterns that you specify (regular expressions or RegEx). If you aren't familiar with RegEx, review this page on regular expressions.
Specify a pattern of information that you want Autocapture to mask. This configuration occurs in the SDK and is an additional layer of protection to the default patterns used to mask email, credit cards, and social security numbers. RegEx filters mask values in any fields where it may be possible to include this data. This includes both visible fields as well as hidden attributes on the page.
For example, you can set a RegEx pattern to filter out credit card numbers such as ****-**** **** 1234
. In this example, you want to fully mask the credit card information including the final four digits. You can add the RegEx filter /(?i)ends\s*in\s*[0-9]{4}/
and, if Amplitude finds credit card information that match the pattern, those numbers are masked like: *****
.
Enable this through the Data Settings > Autocapture > Element Interactions page.
Page URL exclude- and allow- lists let you specify unique URL page patterns to either be excluded from or included into Autocapture. Use these capabilities if your organization requires stronger restrictions or safeguards. Or, if your website or app may contain pages with highly sensitive data, such as those in financial services, healthcare, and medical technologies.
For example, you can exclude user activity from specific sub-domains on your URL such as from your user's account settings or URLs that only include testing data.
Iff you host your site in multiple domains such as .com and .co.uk, you can specify that you only want to include data from the .co.uk domain.
Examples Using the example of .com and .co.uk above, here are examples of the exclude and allow lists:
Exclude list
https://example.co.uk/account/*
as a glob pattern to the exclude list and this pattern captures everything on the .co.uk domain except for the account section.Allow list
https://example.co.uk/*
as a glob pattern to the allow list and only data coming from the .co.uk domain is captured. Data coming from the .com domain isn't captured.
Enable this through the Data Settings > Autocapture > Element Interactions page.
To support visual labeling, Autocapture captures interaction information about both the elements clicked or changed and information about the element's parents in the HTML structure. Depending on your site's structure, you can:
cssSelectorAllowlist
and actionClickAllowlist
options to change the list of elements that Autocapture can track. You can even remove all common HTML elements and restrict to elements with a specific class.Enable this through the Data Settings > Autocapture > Element Interactions page.
You can also turn off Autocapture entirely and use precision tracking for data collection. Amplitude includes robust data management tools and workflows that support planning and implementing a custom taxonomy.
You can turn off any or all Autocapture events through your SDK configuration.
March 18th, 2025
Need help? Contact Support
Visit Amplitude.com
Have a look at the Amplitude Blog
Learn more at Amplitude Academy
© 2025 Amplitude, Inc. All rights reserved. Amplitude is a registered trademark of Amplitude, Inc.