loading

v33.3.1

select option

Analytics

ink components come with built-in analytics setup - it's just a question of activating them.

General

data-track attributes

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

AttributeDescription
data-track-name *Unique identifier for tracking. If omitted, this element will not be tracked.
data-track-eventsArray of HTML event strings. We track some events by default, which are listed in each component prop table.
data-track-payloadExtra 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>
);
}

Is this page helpful?