Component Analytics

Analyzing Parts of a Page or Components

SPA Frameworks like React, Angular, Vue have made it easier to build reusable components. Some of these components are keys to understanding user behavior and thereby conversions.

Browsee makes it easy to analyze click through rate and time spent in any component or any part of a page.

To get started all we need is a data attribute on the HTML tag enclosing the component, like

<div data-browsee-track="component-name">

And that is it. Browsee will now track all the views and clicks of this component and report your its performance.

If you are using React or any mechanism where this component is dynamically inserted in a page, we recommend using a component like below

First create a custom component like below

import React from 'react';
export class TrackedComponent extends React.Component {
componentDidMount(){
if (window && window._browsee && window._browsee.componentAnalytics) {
window._browsee.componentAnalytics.trackComponents();
}
}
render() {
return <div data-browsee-track={this.props.title}>{this.props.children}</div>;
}
};

and then in the render function of any component you want to track enclose it within TrackedComponent

render() {
return <TrackedComponent title={"Login"}>
... original render code
</TrackedComponent>
}

Once integrated, you can now see the performance of all tracked components in Heatmaps Tab

Heatmaps and Tracked Components

Clicking on any component will tell you its performance

Component Performance

Whats more, you can also see the performance of a component segmented by your Circles. In Circle Analytics screen, you will see the performance of all the tracked components that the users in that circle saw or interacted with.