Autocapture on the Web

The Javascript, React, and Angular SDKs offer Autocaptured log events: We automatically track page views, clicks, form submission, performance and more, to limit the boilerplate code you have to write.

Attributes captured across all events:

Property	description	example value (strings)
value	Url of the current page	https://www.example.com/utm=FALL_2024
tagName	Tag name of the target element	button

"Click" events (auto_capture::click):

Property	description	example value (strings)
metadata.content	innerText value of the clicked element	Add to Cart
metadata.page_url	Current URL with path and parameters	https://www.example.com/?utm=FALL_2024
metadata.href	Link to url if tag is <a>	https://www.target-url.com/
metadata.[dataset keys]	Data set values expanded	metadata.attributionKey=demoLink

"Page View" events (auto_capture::page_view):

Property	description	example value (strings)
metadata.queryParams	A json representation of query string params	{\"utm\":\"FALL_2024\"}
metadata.referrer	URL of the prior page	https://www.google.com
metadata.title	Title of the current webpage from <title>	Homepage
metadata.screen_width	Width of the current screen in pixels	3440
metadata.screen_height	Height of the current screen in pixels	1440
metadata.viewport_width	Width of the browser window in pixels	960
metadata.viewport_height	Height of the browser window in pixels	600

"Page View End" events (auto_capture::page_view_end):

Property	description	example value (strings)
value	Current URL with path and parameters	https://www.FULL-URL.com/?utm=FALL_2024
metadata.pageViewLength	total number of milliseconds spent on the page	61370
metadata.scrollDepth	percentage of page scrolled (integer 0-100)	47

"Form Submit" events (auto_capture::form_submit):

Property	description	example value (strings)
value	Fixed string	"form"
metadata.action	action attribute on the form element	/submit.php
metadata.formId	id attribute on the form element	user-info
metadata.formName	name attribute on the form element	user-info
metadata.method	Http method on the form element	POST

"Performance" events (auto_capture::performance):

Property	description	example value (strings)
metadata.dom_interactive_time_ms	Time until DOM is qualified as interactive as implemented by browser performanceTiming API	1807.90
metadata.first_contentful_paint_time_ms	First contentful paint metric as implemented by browser performanceTiming API	1523.90
metadata.load_time_ms	Total load time as implemented by browser performanceTiming API	2766.90
metadata.page_url	Current URL with path and parameters	https://www.FULL-URL.com/?utm=FALL_2024
metadata.transfer_bytes	Total number of bytes transferred in document body as implemented by browser performanceTiming API	48360

Auto Capturing Data Attributes

Data attribute tags will automatically be added to the event metadata object. Note that this is available for click events only for now!

The metadata will be in the format of data-(camelCasedAttributeName). For example:

<button data-button-attribute="important button attribute">Add to Cart</button>
<a href="/checkout" data-a-tag-attribute="important a tag attribute">Checkout</a>

Metadata on the events tab will be

{
  "content": "Add to Cart",
  "data-buttonAttribute": "important button attribute",
  "page_url": "http://localhost:4200/",
  "sessionID": "7ccb4e03-3599-443e-8d41-4b89f7168728",
  "tagName": "button"
}

{
  "content": "Checkout",
  "data-aTagAttribute": "important a tag attribute",
  "href": "/checkout",
  "page_url": "http://localhost:4200/",
  "sessionID": "7ccb4e03-3599-443e-8d41-4b89f7168728",
  "tagName": "a"
}

Event Filtering

If you need to filter out specific auto capture events, you can use the eventFilterFunc option in the StatsigAutoCapturePlugin. This allows you to selectively disable certain events based on their properties.

For example, to disable page view events while keeping all other auto capture events:

const client = new StatsigClient(
  'client-key',
  { userID: 'a-user' },
  {
    plugins: [
      new StatsigAutoCapturePlugin({
        eventFilterFunc: (event) =>
          event.eventName !== AutoCaptureEventName.PAGE_VIEW,
      }),
    ],
  },
);

The eventFilterFunc receives the AutoCaptureEvent object and should return true to keep the event or false to filter it out. You can filter based on eventName, value, or any property in the metadata.