On this page

For AI agents: a documentation index is available at /docs/llms.txt. Append .md to any page URL for markdown, or send Accept: text/markdown.

Use Autocapture to get fast insights

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 started

Autocapture automatically collects common interactions such as page views, sessions, clicks, and form interactions from the Amplitude Browser, iOS, Android, and Flutter SDKs with minimal setup. This page shows how to enable Autocapture on each platform. For the full list of events and properties that Autocapture collects, refer to the Autocapture reference.

Autocapture for the web

Starting with version 2.10.0, the Amplitude Browser SDK includes Autocapture to help you capture events, interactions, and attribution on your site.

Install the Browser SDK

Data region
HTML
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script>
window.amplitude.add(window.sessionReplay.plugin({sampleRate: 1}));
window.amplitude.init('AMPLITUDE_API_KEY', {"fetchRemoteConfig":true,"autocapture":{"attribution":true,"fileDownloads":true,"formInteractions":true,"pageViews":true,"sessions":true,"elementInteractions":true,"networkTracking":true,"webVitals":true,"frustrationInteractions":true}});
</script>

Initialize the SDK

Browser SDK 2.10.0 and above includes element click and change tracking, which enables visual labeling within Amplitude. To enable it, set config.autocapture.elementInteractions to true when you initialize the SDK.

No extra initialization required.

Content security policy (CSP)

If your web app configures a strict Content Security Policy (CSP), adjust the policy to allowlist Amplitude domains:

  • Add https://*.amplitude.com to script-src.
  • Add https://*.amplitude.com to connect-src.

Events

For more information, refer to Autocapture in the Browser SDK 2 documentation.

Default event prefix

Amplitude prefixes Autocapture events with the Amplitude logo.

Marketing attribution

Captures the following properties:

User properties

Amplitude attaches User Properties to all Autocapture events, unless disabled.

Visual labeling for web

Amplitude's visual labeling tool lets you identify and select individual elements on a page to track. For example, to track the number of users who click a Sign up button, select the button with visual labeling. Amplitude then creates an event that targets that specific element.

Events you add with visual labeling work retroactively, because Amplitude captures all form-related events starting when your instrumentation goes live.

For more information, refer to Visual labeling.

Autocapture for iOS

The latest version of Amplitude's iOS SDK includes Autocapture capabilities.

Install the SDK

Install the SDK as instructed in the iOS-Swift SDK documentation.

Initialize the SDK with Autocapture enabled

By default, the iOS SDK enables session tracking and disables application lifecycle, screen view, and element interaction tracking. To enable all Autocapture capabilities, initialize the SDK with the following snippet:

let amplitude = Amplitude(configuration: Configuration(
    apiKey: "API_KEY",
    autocapture: [.sessions, .appLifecycles, .screenViews, .networkTracking]
))

Autocapture events

User properties

Amplitude attaches User Properties to all Autocapture events, unless disabled.

Autocapture for Android

The latest version of Amplitude's Android SDK includes Autocapture capabilities.

Install the SDK

Install the SDK as instructed in the Android-Kotlin SDK documentation.

Initialize the SDK with Autocapture enabled

By default, the Android-Kotlin SDK enables session tracking and disables application lifecycle, screen view, deep link, and element interaction tracking. To enable all Autocapture capabilities, initialize the SDK with the following snippet:

Amplitude(
	Configuration(
	 apiKey = AMPLITUDE_API_KEY,
		context = applicationContext,
		autocapture = autocaptureOptions {
          +sessions               // or `+Autocapture.SESSIONS` [tl! ~~]
          +appLifecycles          // or `+Autocapture.APP_LIFECYCLES` [tl! ~~]
          +deepLinks              // or `+Autocapture.DEEP_LINKS` [tl! ~~]
          +screenViews            // or `+Autocapture.SCREEN_VIEWS` [tl! ~~]
    	}
	)
)

Autocapture events

User properties

Amplitude attaches User Properties to all Autocapture events, unless disabled.

Autocapture for React Native

Available in @amplitude/analytics-react-native 1.6.8 and later. The React Native SDK includes Autocapture for sessions, application lifecycles, screen views, element interactions, and frustration interactions. For configuration details, go to React Native SDK | Autocapture.

Install the SDK

Install the SDK as instructed in React Native SDK.

Initialize the SDK with Autocapture enabled

To enable all autocapture features, set autocapture: true:

ts
import { init } from "@amplitude/analytics-react-native";

init("API_KEY", undefined, {
  autocapture: true,
});

To enable some autocapture features, but not others, set autocapture to be an Autocapture Options object

ts
import { init } from "@amplitude/analytics-react-native";

init("API_KEY", undefined, {
  autocapture: {
    sessions: true,
    appLifecycles: false,
    elementInteractions: true,
    frustrationInteractions: true,
    screenViews: false,
  },
});

Screen views require calling trackScreenView or wiring trackScreenViewOnNavigationStateChange into React Navigation. Refer to Track screen views.

For element interactions, enable autocapture.elementInteractions and wrap handlers with ampCapture, or add the Babel transpile plugin so Metro wraps them at compile time. Refer to Track element interactions.

For frustration interactions, enable autocapture.frustrationInteractions. Rage clicks and error clicks use those same wrapped handlers. Rage clicks require SDK 1.11.0 or later, and error clicks require 1.12.0 or later. Refer to Track frustration interactions.

Autocapture events

Autocapture for Flutter

The latest version of Amplitude's Flutter SDK includes Autocapture for iOS, Android, and Web.

Install the SDK

Install the SDK as instructed in the Flutter SDK 4 documentation. For Web, also load the Amplitude Browser SDK snippet in web/index.html.

Initialize the SDK with Autocapture enabled

By default, the Flutter SDK enables session tracking. On Web, it also enables marketing attribution. Screen views, page views, and DOM-based web options (element interactions, form interactions, and file downloads) default to off. To enable all Autocapture capabilities, initialize the SDK with AutocaptureEnabled() and attach AmplitudeNavigatorObserver for screen views:

dart
import 'package:amplitude_flutter/amplitude.dart';
import 'package:amplitude_flutter/configuration.dart';
import 'package:amplitude_flutter/autocapture/autocapture.dart';
import 'package:amplitude_flutter/observers/amplitude_navigator_observer.dart';

final Amplitude analytics = Amplitude(
  Configuration(
    apiKey: 'YOUR-API-KEY',
    autocapture: AutocaptureEnabled(),
  ),
);

MaterialApp(
  navigatorObservers: [AmplitudeNavigatorObserver(analytics)],
  // ...
);

For Web DOM-based capture (clicks, forms, and file downloads), enable Flutter's accessibility semantics tree. Refer to Flutter web DOM capture in the Flutter SDK 4 reference.

Autocapture events

For configuration options and platform details, refer to Autocapture in Flutter SDK 4.

User properties

Amplitude attaches User Properties to all Autocapture events, unless disabled.

Was this helpful?