Analyzing Performance of Components for React, Vue, and Angular Made Easier

We use React for our frontend and had a simple need. Whenever we changed a component, we just wanted to know if it was doing better.

If you are building or planning to build your webapp or app in React, Vue or Angular, this this might interest you too from Analytics perspective. In this article, we will discuss component analytics in detail with respect to a react app but the same could be extended to Vue or Angular.

Whats Different About Components ?

While building your app in React, we think in terms of components. Components are reusable pieces of code which can be used anywhere in your app as long via a common interface.

Often it's imperative to understand how a component is performing in front of users at a cumulative level. What makes it difficult to analyze components is that sometimes components are present on a certain page but they are not in viewport. Also one has to explicitly assign all the clicks that happen inside the component to it.

Normally, we simply create heatmaps to understand how every part of a page is performing. Heatmaps give us click analysis, scroll and time analsis of a certain page type.

What about Heatmaps ?

Heatmaps don't quite give us full visibility in analyzing components for two reasons

1. As is often the case. Many components are dynamic and are only visible under certain circumstances. It's difficult to capture their analytics in a static heatmap.
2. Often the component we want to analyze appears on many different pages of different types. Aggregating heatmaps across different types beats the purpose of heatmap analysis.

A good example could be a Login modal. So, a lot of people use signup and login modal dyanamically across several pages. Now, you can create a single component for login and associate it from various buttons and actionables. To check the performance of that login or signup modal, you have to explicitly setup events.

Google's On-Site Promotions

Using GA and its Enhanced Ecommerce features you can set up a similar view/click analysis of a component or promotion. Here is a nice guide on how to set this up. However, its comparatively difficult to set up and its important to be careful about setting up the view and click tigger so that they are only triggered when the component is in viewport.

However, looking at it, our only thought was, there has to be an easier way ? And that's why we created our Component Analytics feature.

Browsee's Component Anlaytics

To integrate, simply add a data attribute to the enclosing div of the component.

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

For users of React, you can include a small component in your code and enclose your tracked component for easier integration. See our guide here.

Once integrated, Browsee's snippet does the rest and you can see component's performance in Browsee dashboard.

We would love your feedback to make this feature better and easier to use. Do let us know your feedback.