ink comes with built-in analytics in all of our interactive components.
The API is designed around data-attributes and the useAnalytics hook from the fep-analytics library

data-track attributes

Interactive ink components can receive data-track-* attributes that are used for the tracking behavior.

Attribute	Description
`data-track-name *`	Unique identifier for tracking. If omitted, this element will not be tracked.
`data-track-events`	Array of HTML event strings. We track some events by default, which are listed in each component prop table.
`data-track-payload`	Extra payload `Object` that can be added to the analytics call output. This `Object` will be merged with the surrounding context data and sent to the analytics provider.

Simple tracking

() => {
  const { Provider } = useAnalytics({ app: "MyApp" });

  return (
    <Provider>
      <Button data-track-name="my-button">Tracked Button</Button>
    </Provider>
  );
}

Tracking custom events

() => {
  const { Provider } = useAnalytics({ app: "MyApp" });

  return (
    <Provider>
      <Button data-track-name="my-button" data-track-events={["blur"]}>
        Tracked Button
      </Button>
    </Provider>
  );
}

Tracking custom payload

() => {
  const { Provider } = useAnalytics({ app: "MyApp" });

  return (
    <Provider>
      <Button data-track-name="my-button" data-track-payload={{ myData: "myData" }}>
        Tracked Button
      </Button>
    </Provider>
  );
}

Tracking page views

To track page views, you should utilize the built-in funcionality of the useAnalytics hook options that come from the fep-analytics library.

() => {
  const { Provider } = useAnalytics({ app: "MyApp" }, { dispatchOnMount: true });

  return (
    <Provider>
      <Bubble variant="feedback-informational">I've dispatched data when you entered this page!</Bubble>
    </Provider>
  );
}

Multiple Providers

The API of the useAnalytics hooks is made based on the assumpion that you would use multiple Providers to track multiple points in your application.

When events are emitted from elements with multiple Providers above them in them element tree, the context for each parent is merged together before the event is tracked.

This, together with the data - or payload - that the user provides in each tracking scenario, should give you enough information about each of your tracked nodes.

In the following example, the clicked Button will merge its tracked information with all of its parents Providers.

const InnerComponent = () => {
  const { Provider } = useAnalytics({ app: "InnerComponent" });

  return (
    <Provider>
      <Button data-track-name="my-button" data-track-payload={{ myData: "myData" }}>
        Tracked Button
      </Button>
    </Provider>
  );
};

() => {
  const { Provider } = useAnalytics({ app: "MyApp" });

  return (
    <Provider>
      <InnerComponent />
    </Provider>
  );
}