How to Track User Interactions in React with a Custom Event Logger

In today’s data-driven world, understanding how users interact with your application is no longer optional , it’s essential. Every scroll, click, and form submission tells a story, a story about what your users care about, what they ignore, and where they might be facing friction.

This is where event tracking and analytics come into play.

Traditionally, developers and product teams rely on third-party tools like Google Analytics, Log rocket, or Hot-jar to collect and analyse user behaviour. These tools are powerful, but they come with trade-offs:

• Privacy concerns : You may not want to share user data with external services.
• Cost : Premium analytics platforms can be expensive.
• Limited customization : You’re often restricted to predefined event types and dashboards.

 What Is Event Tracking?

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

Event tracking is the process of capturing and analyzing specific user interactions within a website or application. These events help you understand how users engage with your product.

 Common Events to Track:

• Page Views – When a user visits a page
• Button Clicks – Interactions with CTAs or navigation
• Scroll Events – How far users scroll down a page
• Form Submissions – When users submit data
• Text Inputs – Typing in search bars or forms
• Mouse Movements – Hovering or navigating with the cursor

Why Is It Important?

The primary goal of event tracking is to:

• Understand user behaviour
• Identify friction points in the UI/UX
• Make data-informed decisions for product improvements
• Measure feature adoption and conversion rates

Whether you’re a developer, product manager, or designer, having access to this data empowers you to build better, more user-centric applications.

In this blog, I’ll give you a high-level overview of a custom Event Tracker POC built with React.js and Bootstrap—highlighting only the key snippets and how user interactions are tracked.

1. Reusable Event Tracker Utility:
   Plain text

   Copy to clipboard

   Open code in new window

   EnlighterJS 3 Syntax Highlighter

   const eventTracker = (eventName, eventData = {})=>{

   const key = 'eventCounts';

   const existing = JSON.parse(localStorage.getItem(key)) || {};

   existing[eventName] = (existing[eventName] || 0) + 1;

   localStorage.setItem(key, JSON.stringify(existing));

   const event = {

   name: eventName,

   data: eventData,

   timestamp: newDate().toISOString(),

   };

   console.log('Tracked Event:', event);console.log('Event Counts:', existing);};

   const eventTracker = (eventName, eventData = {}) => { const key = 'eventCounts'; const existing = JSON.parse(localStorage.getItem(key)) || {}; existing[eventName] = (existing[eventName] || 0) + 1; localStorage.setItem(key, JSON.stringify(existing)); const event = { name: eventName, data: eventData, timestamp: new Date().toISOString(), }; console.log('Tracked Event:', event);console.log('Event Counts:', existing);};

   const eventTracker = (eventName, eventData = {}) => {
     const key = 'eventCounts';
     const existing = JSON.parse(localStorage.getItem(key)) || {};
     existing[eventName] = (existing[eventName] || 0) + 1;
     localStorage.setItem(key, JSON.stringify(existing));
     const event = {
       name: eventName,
       data: eventData,
       timestamp: new Date().toISOString(),
     };
     console.log('Tracked Event:', event);console.log('Event Counts:', existing);};
   

    

2. Wherever event happen add in below format(e.g: form submit)
   Plain text

   Copy to clipboard

   Open code in new window

   EnlighterJS 3 Syntax Highlighter

   eventTracker('Form Submitted', { name, email });

   eventTracker('Form Submitted', { name, email });

   eventTracker('Form Submitted', { name, email });

    

3. To view any event tracker count and which event it is, we can do as per below code.
   Plain text

   Copy to clipboard

   Open code in new window

   EnlighterJS 3 Syntax Highlighter

   exportconst getEventCount = (eventName)=>{

   const counts = JSON.parse(localStorage.getItem('eventCounts')) || {};

   return counts[eventName] || 0;

   };

   export const getEventCount = (eventName) => { const counts = JSON.parse(localStorage.getItem('eventCounts')) || {}; return counts[eventName] || 0; };

   export const getEventCount = (eventName) => {
     const counts = JSON.parse(localStorage.getItem('eventCounts')) || {};
     return counts[eventName] || 0;
   };
   
   

    

4. Usage in dashboard
   Plain text

   Copy to clipboard

   Open code in new window

   EnlighterJS 3 Syntax Highlighter

   import{ getEventCount } from '../utils/eventTracker';

   const formSubmitCount = getEventCount('Form Submitted');

   const inputChangeCount = getEventCount('Input Changed');

   const pageViewCount = getEventCount('Page Viewed');

   const scrollEventCount = getEventCount('Scroll Event');

   import { getEventCount } from '../utils/eventTracker'; const formSubmitCount = getEventCount('Form Submitted'); const inputChangeCount = getEventCount('Input Changed'); const pageViewCount = getEventCount('Page Viewed'); const scrollEventCount = getEventCount('Scroll Event');

   import { getEventCount } from '../utils/eventTracker';
   
   const formSubmitCount = getEventCount('Form Submitted');
   const inputChangeCount = getEventCount('Input Changed');
   const pageViewCount = getEventCount('Page Viewed');
   const scrollEventCount = getEventCount('Scroll Event');
   
   

   This allows you to monitor how many times each event has occurred during the users session  (if local storage is retained).

Advantages of Custom Event Tracker:

1. Full Control – Track only what matters, with custom data structure
2. Data Privacy – No third-party servers, easier GDPR/CCPA compliance
3. Cost Effective – No subscription, suitable for POCs and internal tools
4. Custom UI – Fully customizable dashboard with React and Bootstrap
5. No External Dependencies – Works offline or in secure environments
6. Easy Debugging – Transparent logic and flexible debugging process

Conclusion:

1. If your focus is flexibility, cost-saving, and data ownership, a custom event tracker built in any framework or library (like your POC) is a powerful choice—especially for MVPs, internal dashboards, and privacy-conscious applications.
2. However, for quick setup, advanced analytics, and visual insights, third-party tools are better suited—particularly in production-scale apps where speed and insights for non-developers matter most.

• Use custom tracking when you want control.
• Use third-party tools when you need speed.