Tracking user behaviours in a React web application
An article by Sri Linga
Every business deals with data. For any data driven business Analytics plays crucial role than anything else, it always supercharge business.
Data analytics is the process of how you mine, model and extract data to generate powerful insights that can help the business find efficiencies, uncover opportunities, and solve problems didn’t even know you had.
There are great tools on the market that give you the depth and quality of information to understand how users actually use your site versus how you wanted them to. This is a critical aspect to know and interpret from the data you can collect from the tools.
At GRAD4, we strive to create a product that is simple and easy to use. To achieve that goal, tracking user behavior is crucial to understand which features are most likely to lead to adoption, retention and customer satisfaction. For that reason, we need to know what path user took to achieve a specific action, how long a page takes to render, where they stumble, and where they eventually drop off the page and leave the application.
One of the common issues in a typical client/server architecture such as a web application is the lack of information on how users are interacting with the user interface. Unlike the server, client interface such as the web browser has no user interaction logs and developing such feature require extra work and might become intrusive to the codebase if you don’t get it right. For that reason, we looked into many existing tracking solutions for React application and we stumbled into React-tracking, a user interaction tracking library for React brought to us by the New York Times developers.
In this short blog entry, we will give you a walkthrough on how to integrate this library into your react application.
react-tracking
It’s a react specific tracking library which provides a rich, declarative API to embed tracking information within your app, it’s easy to use and easy to integrate in react application.
There are two ways to track user behavior in your site using this library:
- @decorator — Ejecting the app is the clean way to use decorators in create-react-app
- Using useTracking hook — You need to install latest versions of React i.e 16.8.0+ to use hooks
The decorator can be used on React Classes and on methods in class components. Find more information about the library and tracking with decorators in the official blog post.
As we have latest version of React in our project, we choose to implement tracking using hooks without ejecting app.
Library installation and usage with hooks:
To install the react-tracking library simply run
npm install — save react-tracking
You can track events by importing track() and wrapping App component inside track()
import track from “react-tracking”;
Once the component is wrapped with track() we can access a tracking object via the useTracking hook from anywhere in the sub-tree.
useTracking is React hook that supports in latest versions of React.
Import hook in the component.
import { useTracking } from ‘react-tracking’;
const tracking = useTracking()
Send required tracking object to trackEvent from specific click method.
tracking.trackEvent(trackEventObject)
Track events
Once you have tracking information of user interactions like click events, in the top-level dispatch you can determine where your tracking object needs to go like making an API call with the tracking data.
From the API, Logstash will collect data and you can create effective reporting and dashboards with the tracking data using open source dashboard tools like Kibana.
Logstash is an open-source tool for collecting, parsing and storing logs for future use.
Kibana is an open-source data visualization and exploration tool used for log and time-series analytics, application monitoring, and operational intelligence use cases. It can be used to search and view the logs that Logstash has indexed. It offers powerful and easy-to-use features such as histograms, line graphs, pie charts, heat maps, and built-in geospatial support.
Conclusion
Analytics can help us to understand the customers we work with and to identify our true target audience so that we can take our companies to new heights of success.
At GRAD4 we believe customer satisfaction is our success, Analytics is one of the great initiatives that we made towards customer satisfaction improvement.
Advantages of tracking:
- Know your visitors and user behavior : You can identify the geographical information of your website visitors using their IP address. By discovering where your visitors are located, you can target the appropriate areas for example if you notice a high amount of traffic from countries whose primary language does not match your website, there is an opportunity to start translating into that language
- Know exactly what your customers are looking for: you can see which parts of the page are getting the most attention, reveal things that are getting clicked but are not clickable.
- See where you are losing customers.
About Grad4
GRAD4 is a remote-friendly objective oriented company founded in Montreal. It is an innovative technology company that standardizes and automates the outsourcing process for buyers and suppliers in the manufacturing sector. It has developed the best technological solution for all companies that have needs or manufacturing capabilities in CNC, sheet metal and welded assembly. We are always looking for a passionate software artisan that is a great team player, avid self-learner and that likes to work in high trust environment.
Our tech stack consists of React + Redux on the frontend and Django-Rest-Framework in the backend. We are also leveraging computer vision methodology in our research and development division to enhance the user experience in our core application
If you want to learn more about what we do check out our website www.grad4.com and don’t hesitate to contact us at info@grad4.com .
About the author
SriCharani Linga is a senior frontend developer at GRAD4 having 6 years of experience in web development with various web technologies React, Angular and Javascript as primary skill set, her main responsibilities at GRAD4 are features development, creating rich UI, ensuring the quality of deliverables and supporting the frontend team. She has profound working experience in different domains in her past including e-commerce and HR domain in both India and Canada. She has a bachelors degree from JNTU in electronics and communication engineering.
