# Component analytics

Some of the design system components come with built-in analytics functionality that can be opted into. The following components are capable of reporting analytics data:

- [Alert](/components/alert/)
- [Button](/components/button/)
- [Modal Dialog](/components/modal-dialog/)
- [Help Drawer](/components/drawer/)
- [Header](/components/header/healthcare-header/) (HealthCare.gov)
- [Footer](/components/footer/healthcare-footer/) (HealthCare.gov)
- [Third Party External Link](/components/third-party-external-link/)
- [Tooltip](/components/tooltip/)

## Turning it on and off

Analytics event tracking is **disabled by default**, except for the HealthCare.gov header. There are two ways you can enable or disable analytics in your application:

1. At the application level, globally for all instances of a component with the [config function](/components/config/)
2. At the component-instance level by using the `analytics` prop

The `analytics` prop on a particular component instance will always override the global setting. For instance, you can turn on analytics globally for all alerts but turn it off for a particular `Alert` on a particular page by setting `analytics={false}` on that `Alert` (or `analytics="false"` on a `ds-alert` web component). It works the other way around too where analytics are turned off globally but turned on for a particular `Alert` instance.

As an example, to turn analytics on globally for alerts, [call the config function](/components/config/) from somewhere universal to your application, like this:

```js
// Import from the package that corresponds to your theme (one of these):
import { config } from '@cmsgov/design-system';
import { config } from '@cmsgov/ds-cms-gov';
import { config } from '@cmsgov/ds-healthcare-gov';
import { config } from '@cmsgov/ds-medicare-gov';

// Then call the config function with your configuration settings
config({ alertSendsAnalytics: true });
```

Here is the list of each component config property for analytics:

- `alertSendsAnalytics`
- `buttonSendsAnalytics`
- `dialogSendsAnalytics`
- `helpDrawerSendsAnalytics`
- `headerSendsAnalytics` (HealthCare.gov)
- `footerSendsAnalytics` (HealthCare.gov)
- `thirdPartyExternalLinkSendsAnalytics`
- `tooltipSendsAnalytics`

## Handling the events

We currently provide two ways of handling analytics events in the design system:

1. Through a global default event handler function, which can be changed
2. Through a function provided to a component instance via the `onAnalyticsEvent` prop (React) or `ds-analytics-event` event listener (web components)

For the global default handler, the design system will currently attempt to pass all events to the `window.utag.link` function if it exists. If this is not the desired analytics behavior for your application, you can provide your own default analytics event handler by setting the [`defaultAnalyticsFunction` global config setting](/components/config/) with your custom implementation, or you can pass a handler to each component instance with the `onAnalyticsEvent` prop.

If you wish to override the analytics event handling for a particular web component instance by listening to the `ds-analytics-event`, simply listening to the event will not override the default behavior. If you want to keep the component from calling the `defaultAnalyticsFunction` with its events, you must call the `event.preventDefault()` function within your event handler.

## Overriding logged data

When you need to prevent sensitive personal information from being passed to analytics trackers from a particular component instance, you can either override the content that contains sensitive information using the `analyticsLabelOverride` prop, or you can disable tracking on that component instance entirely by setting `analytics={false}`.