Autocapture

PostHog can capture frontend events automatically using autocapture. This captures events like pageview, screen, click, change of input, or submission associated with a button, form, input, select, or textarea.

This means you don't need to manually add tracking for individual components, links, buttons, divs, spans, or other parts of your product. Autocapture also provides data for heatmaps.

Autocapture is available in the following SDKs:

• JavaScript Web - enabled by default
• React - enabled by default
• React Native - disabled by default
• iOS - disabled by default

Configuring autocapture

This covers configuring autocapture in the JavaScript and React SDKs. For the React Native SDK, see our React Native docs.

Capturing pageviews in single-page apps

Because PostHog hooks to the navigator API, we'll automatically capture pageviews and pageleaves. Make sure you've set defaults: '<ph_posthog_js_defaults>' in your posthog.init call to opt-in to this behavior.

posthog.init("<ph_project_api_key>", {
  api_host: "https://us.i.posthog.com",
  defaults: '2025-05-24',
})

Reducing events with an allow and ignorelist

Autocapture enables you to start capturing events on your site quickly, but this can lead to large numbers of events. To counteract this, you can configure autocapture using allowlists and ignorelists (NB some options use allow behavior and some use ignore behavior.

These are an array of events, URLs, elements, and CSS selectors that you want autocapture to allow or ignore.

For example, to only capture clicks on buttons on the docs section of the website that contain the data attribute ph-autocapture and don't contain the data attribute data-attr-pii="email", you can do the following:

posthog.init('<ph_project_api_key>', {
    api_host: 'https://us.i.posthog.com',
    autocapture: {
        dom_event_allowlist: ['click'], // DOM events from this list ['click', 'change', 'submit']
        url_allowlist: ['posthog.com./docs/.*'], // strings or RegExps
        // url_ignorelist can be used on its own, or combined with url_allowlist to further filter which URLs are captured
        url_ignorelist: ['posthog.com./docs/.*/secret-section/.*'], // strings or RegExps
        element_allowlist: ['button'], // DOM elements from this list ['a', 'button', 'form', 'input', 'select', 'textarea', 'label']
        css_selector_allowlist: ['[ph-autocapture]'], // List of CSS selectors
        element_attribute_ignorelist:['data-attr-pii="email"'], // List of element attributes to ignore
    },
})

Allow and ignorelists only filter autocapture events. They don't affect the data collected by session recordings or custom events.

Note: When using element_allowlist or css_selector_allowlist, PostHog considers the entire tree of elements from the root to the target element of the click event, not just the element that was directly clicked. If any element or selector is in the tree and allow list, the click is captured.

Preventing sensitive data capture

For security reasons and to prevent sensitive data capture, PostHog is conservative about capturing input tags. We specifically only collect the name, id, and class attributes from input tags. If you need to collect more data from inputs, you should use custom events.

If there are specific elements you don't want to capture, add the ph-no-capture class name.

<button class='ph-no-capture'>Sensitive information here</button>

Disabling autocapture

You can disable autocapture in your project settings or by setting autocapture: false in the config. If one of these is disabled, autocapture is disabled.

Note: Disabling autocapture in your project settings isn't instant. PostHog will continue to capture events where it is initialized. Instead, autocaptured events will taper off as users trigger reinitialization of PostHog (like when they reload your site).

You can disable pageviews and pageleaves by setting capture_pageview: false. To just disable pageleaves, keep capture_pageview: true and set capture_pageleave: false.

Disabling autocapture does not disable session recording. You can disable session recording by turning it off in your project settings or using disable_session_recording: true in the config.

You can update any of these config options at runtime (e.g. to update an allowlist or disable autocapture) using the posthog.set_config() method like this:

posthog.set_config({ capture_pageview: false })

Capturing additional properties in autocapture events

If you add a data attribute onto an element in the format data-ph-capture-attribute-some-key={someValue}, then any autocapture event from that element or one of its children will have the property some-key: 'someValue' added to it. This can be useful when you want to add additional information to autocapture events.

Get the value of an element

As an example, say you have a notification bell with a value like this:

You can include the unread count in the autocapture event by adding the data-ph-capture-attribute class like this:

<div
    onClick={toggleNotificationsPopover}
    data-ph-capture-attribute-unread-notifications-count={unreadCount}
>

The autocapture event for clicks on the bell will include the unread count as an unread-notifications-count property.

Tracking metadata

You can also attach metadata to autocapture events by adding data attributes to the element that triggers the event. This helps you track something like a customer performing a transaction (adding an item to a cart or completing a purchase).

The below ecommerce example helps you understand what users are interested in, even if they don't complete a transaction. It can also reveal which products users are interested in when correlated with information like marketing campaigns, regionality, or device type.

<button
    data-ph-capture-attribute-product-id={productId}
    data-ph-capture-attribute-product-name={productName}
    data-ph-capture-attribute-product-price={productPrice}
    data-ph-capture-attribute-product-quantity={productQuantity}
>
    Add to cart
</button>

Replace the {productXx} values with the relevant information available on the webpage. Now when the Add to cart button is clicked, the autocapture event will include the product information in the event's properties, like:

properties: {
    "product-id": "12345678",
    "product-name": "Red t-shirt",
    "product-price": "30",
    "product-quantity": "1"
}

Sending custom properties with autocaptured form submissions

To prevent accidental sensitive data capture, we do not automatically capture form values from form submissions. To add custom properties to form submissions, you can use the data-ph-capture-attribute attribute on the form element.

In this example, the product-id property will be sent with the form submission event. The product-name input will not be captured.

<form
    data-ph-capture-attribute-product-id="12345678"
>
    <input name="product-name" placeholder="this input will not be autocaptured"/>
    <button type="submit">Submit</button>
</form>

The following example shows how you can use the data-ph-capture-attribute attribute dynamically in a React component. The product-name property will be sent with the form submission event.

import { useState } from 'react'

const MyForm = () => {
  const [productName, setProductName] = useState('')
  return (
    <form
        data-ph-capture-attribute-name={productName}
    >
        <input name="product-name" onChange={(e) => setProductName(e.target.value)} value={productName}/>
        <button type="submit">Submit</button>
    </form>
  )
}

Autocaptured events

Autocaptured events include:

• $autocapture: Clicks, taps, inputs, typing, form submissions, and more.
• $pageview: Triggers on page load. You might need to manually capture these in single-page apps like React, Next.js or Vue.
• $pageleave: Triggers on onpagehide when a user navigates away from a page.
• $rageclick: A second click within 1000ms within 30px of the first click.
• $screen: When a user navigates on a mobile app.
• Application lifecycle events like Application Opened, Application Became Active, Application Backgrounded, Application Installed, and Application Updated for mobile SDKs like React Native.

Note: Since pageview autocapture relies on the browser page load events, it captures the initial pageview but not subsequent ones. You might need to implement your own pageview capture using custom events. See our guides for doing this in Next.js, React, Vue, and Angular.

Autocaptured properties

Autocaptured events (and client-side custom events) have many default properties. These are distinguished by $ prefix in their name, the PostHog logo next to them in the activity tab, and the verified event logo.

You can see a full list in PostHog or in GitHub, but the most important ones include:

Notes:

• If enabled, GeoIP data is added also as properties.
• Many of these are also captured as session properties.
• Mobile libraries capture additional properties like $app_build, $app_name, $app_namespace, and $app_version.
• These properties can be hidden in activity by checking the "Hide PostHog properties" box.

Analyzing autocaptured events and properties

Autocapture events and properties can be used like any other event type. You can use them in trends, funnels, cohorts, surveys, and more. Beyond this, they come with some special features:

• When using the autocapture event series, you can filter by the autocaptured element's tag name, text, href target, and/or CSS selector.

• Autocapture events can be organized and renamed using actions.

• You can query autocapture elements_chain using SQL.

Clipboard autocapture

You can configure posthog-js to autocapture information that users copy or cut on your page with the capture_copied_text config option.

posthog.init('<ph_project_api_key>', {
    api_host: 'https://us.i.posthog.com',
    defaults: '2025-05-24',
    autocapture: {
        capture_copied_text: true,
        // any other autocapture config
    },
})

We then report the copied or cut text as a "Clipboard autocapture" event. You can use the $selected_content property in analysis or use the activity page to view the copied content in context.

Clipboard autocapture respects other privacy settings. For example, won't capture content from a password field.

Note: Browsers don't directly allow access to copied data for privacy reasons so when posthog-js sees a clipboard event, we capture any text currently selected in the browser.import { useSelector } from 'react-redux'

Dead clicks autocapture

A dead click (or slow click) is a click which isn't followed by a change to the page.

Dead clicks are a great way to identify opportunities to improve your UI, showing you where your users expect to be able to interact with the page but cannot.

You can collect dead clicks with the Web SDK by enabling them in PostHog settings.

Or by setting your config:

posthog.init('<ph_project_api_key>', {
    api_host: 'https://us.i.posthog.com',
    defaults: '2025-05-24',
    capture_dead_clicks: true,
    // any other config
})

Note: The PostHog heatmap captures dead clicks for free, collecting only the coordinates of dead clicks to display in heatmaps. Enabling the autocapture of dead clicks here allows for deeper analysis and is priced as a standard product analytics event.