Autocapture
Amplitude Academy
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.
Get startedAutocapture is the fastest way to capture information about your website or app with minimal setup. After you enable it through the Browser SDK, Autocapture captures user interactions on your digital products with a single code snippet. Autocapture lets you get started and uncover insights with minimal setup.
- On your website, a single Browser SDK snippet captures sessions, page views, clicks, form interactions, file downloads, marketing attribution, page URL enrichment, and element interactions. You can also use visual labeling to navigate your site and create new events from the click information.
- On iOS and Android, the iOS Swift SDK and Android-Kotlin SDK capture application installs and upgrades, sessions, and screen views.
Autocapture and precision tracking
Amplitude offers two primary ways to capture events:
- Autocapture automatically collects a predefined set of events and properties in a standardized taxonomy using Amplitude SDKs.
- Precision tracking instruments events and properties specific to your business needs and analyses.
From the moment you install the SDK, Amplitude automatically collects data to provide insights into feature usage, funnel conversion rates, and click analysis on the web. The Browser SDK also enriches all events with page URL information, including previous page tracking and page type classification. Autocapture lets you focus on speed when setting up your analysis.
To investigate specific actions in your application that require additional metadata, or to track events such as a purchase event that may be core to your business, use precision tracking. Precise tracking in code lets you send these events with a robust set of properties to perform deeper analyses.
The two solutions are compatible, so 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 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, work with your team to implement precisely tracked events and get the best of both approaches.
Optimize your event volume
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 tune those events further to optimize your event volume.
The default configuration provides 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 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, text highlighting, and similar actions to ensure you don't pay 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. You can change your configuration to capture clicks only on specified elements (or elements with certain classes), track only on specific pages, or turn click tracking off while still using other Autocapture data such as page views and sessions.
Your taxonomy with Autocapture
Keeping your taxonomy clean and organized ensures 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 lets users in your organization create events, so consider the following when thinking about your taxonomy:
- Set up the correct permissions for each user. Users with a Member role or higher can create labeled events.
- Align your naming convention with your existing taxonomy for labeled events.
- Add descriptions to your labeled events to help other users understand their purpose.
Additional details about labeled events:
- Labeled events have a separate tab in Data > Events to help you manage them differently from your raw ingested events. This tab displays who created the labeled events and the creation date for each event.
- Labeled events have a different icon in the event dropdown so you and your users can distinguish them from other events.
Privacy and security
For many organizations, data privacy, security, and personally identifying information (PII) are critical factors when setting up data collection. Business needs, the purpose of your digital products, and 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 help you adhere to your company's privacy and security policies and requirements. While ensuring your use of Amplitude complies with your data privacy policies and requirements is your responsibility, these settings help you reach compliance.
Default Autocapture protections
You control what information Autocapture collects and sends to the Amplitude platform. To update the events that Autocapture sends to Amplitude, refer to Browser SDK | Disable Autocapture.
The following list describes Autocapture's default settings for capturing clicks and changes on page elements ("Element Clicked" and "Element Changed" events). The list also includes the following privacy and security considerations. You don't need to do anything to turn these protections on. They're always active.
- For sensitive elements such as end user text inputs, selects, text area elements, and any HTML elements with
contenteditable="true"as an attribute, the SDK only collects class names and the type attribute. Autocapture excludes any end user-inputted text. - Autocapture's default settings further restrict collection of sensitive input fields, such as passwords or form fields with the hidden attribute, and only capture class and type attribute values. Autocapture doesn't capture other details about these elements, including any content an end user populates in the input fields.
- Autocapture captures the text your website or app displays. For example, the content (
textContent) of the element clicked and its children. Amplitude doesn't recommend using 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 address. - The exception to these attribute collection rules is when an element has an explicit attribute added with the prefix
data-amp-track-. This exception lets data in these attributes pass back to Amplitude intentionally. - Autocapture automatically removes value, event handlers, style, and react attributes.
- Mask page titles in page view events by adding the
data-amp-maskattribute to the<title>element. This replaces the actual title with a masked value to protect sensitive information. For implementation details, refer to Browser SDK page title masking.
Manual Autocapture protections
The following Autocapture protections are available if you choose to implement them. By default, Amplitude doesn't enable them. You can enable all or some of the protections listed below.
For some of these protections, you must add an attribute to your elements. You enable some of these protections through the Data Settings > Autocapture page. The documentation for each protection indicates how to enable it.
Precise text masking
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. For example, if 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" appears as ***** in the Autocapture data. This exclusion works at the SDK level.
Precise text works recursively, so Autocapture masks any text contained in an element. For example:
<div data-amp-mask>
John Doe
<div>Jane Doe</div>
</div>
In this example, Autocapture masks both names with *****.
Precise attribute masking
Precise attribute masking redacts specific HTML attributes from capture. Defining which attributes 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, Autocapture masks the name "John D" with *****.
You can also use a list to specify more than one attribute to mask. When using a list, format the masking attributes as data-amp-mask-attributes="name,ssn".
You can't mask information from ID and Class attributes because of their importance for Visual Labeling.
Pattern (RegEx) masking
You can mask information based on patterns you specify (regular expressions or RegEx). If you aren't familiar with RegEx, review this page on regular expressions.
Specify a pattern of information for Autocapture to mask. This configuration occurs in the SDK and provides an additional layer of protection to the default patterns Amplitude uses to mask email, credit cards, and social security numbers. RegEx filters mask values in any fields where this data may appear, including both visible fields and 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. Add the RegEx filter /(?i)ends\s*in\s*[0-9]{4}/. If Amplitude finds credit card information that matches the pattern, Autocapture masks those numbers as *****.
Enable this through the Data Settings > Autocapture > Element Interactions page.
Page URL exclude and allow lists
Page URL exclude and allow lists let you specify unique URL page patterns to exclude from or include in 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 your user's account settings or URLs that only include testing data.
If you host your site on multiple domains such as .com and .co.uk, 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
- Add
https://example.co.uk/account/*as a glob pattern to the exclude list. This pattern captures everything on the.co.ukdomain except for the account section.
Allow list
- Add
https://example.co.uk/*as a glob pattern to the allow list. Amplitude only captures data from the.co.ukdomain. Amplitude doesn't capture data from the.comdomain.
The exclude list always takes priority over the allow list. This priority prevents you from capturing data that you don't want. If you include the same pattern in both the exclude and allow lists, Autocapture excludes that pattern.
Enable this through the Data Settings > Autocapture > Element Interactions page.
Limit click tracking
To support visual labeling, Autocapture captures interaction information about the elements clicked or changed and information about the element's parents in the HTML structure. Depending on your site's structure, you can:
- Refine the elements allowed for click and change tracking. Configure the
cssSelectorAllowlistandactionClickAllowlistoptions to change the list of elements that Autocapture can track. You can remove all common HTML elements and restrict to elements with a specific class.
Enable this through the Data Settings > Autocapture > Element Interactions page.
Turn off Autocapture events
You can 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.
Turn off any or all Autocapture events through your SDK configuration.
Was this helpful?