Autocapture

Web interaction autocapture

The JavaScript web SDK captures the following events by default:

• Interactions like clicks with a tag like a, button, form, input, select, textarea, label
• Form submissions and form changes
• Changes on content with contenteditable="true".
• Copies from clipboard

Autocaptures are displayed with names like clicked span with text "Delete". You can filter for Autocapture events to see all interactions.

Configuring interaction autocapture

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

You can configure the following options:

Here's a full example of how to configure autocapture:

posthog.init('<ph_project_api_key>', {
    api_host: 'https://us.i.posthog.com',
    defaults: '2025-05-24',
    autocapture: {
        // URL filtering
        url_allowlist: ['https://example.com', 'test.com/.*'],
        url_ignorelist: ['https://example.com/admin', 'test.com/private/.*'],
        
        // Event filtering
        dom_event_allowlist: ['click', 'change', 'submit', 'input'],
        
        // Element filtering
        element_allowlist: ['a', 'button', 'form', 'input', 'select', 'textarea', 'label'],
        css_selector_allowlist: ['[ph-capture]', '[data-track]'],
        
        // Attribute filtering
        element_attribute_ignorelist: ['aria-label', 'data-attr-pii', 'data-sensitive'],
        
        // Copy/cut capture
        capture_copied_text: true,
    },
})

Disabling interaction autocapture

You can disable autocapture in two ways:

• In your project settings
• By setting autocapture: false in the config

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

// Or after initialization
posthog.set_config({ autocapture: false })

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).

Disabling autocapture does not disable capture of page views or page leaves. See navigation autocapture for more information.

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.

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>
  )
}

Rage clicks autocapture

A rage click is when a user clicks a button multiple times in quick succession, specifically more than 3 clicks in 1 second.

The event is captured as a $rageclick event. You can use this event to identify opportunities to improve your UI, as it shows where users are frustrated with your product.

Web navigation autocapture

PostHog automatically captures navigation events as $pageview and $pageleave events.

Configuring page navigation autocapture

You can configure the following options:

For example, your initialization code might look like this:

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

Disabling page navigation autocapture

You can disable $pageview and $pageleave autocapture in two ways:

• In your project settings
• By setting capturePageviews: false and capture_pageleave: false in the config

For example:

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

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 find them in PostHog or in the references.

Notes:

• If enabled, GeoIP data is added also as properties at ingestion.
• Many of these are also captured as session properties.
• These properties can be hidden in activity by checking the Hide PostHog properties box.