KPI cards based on user activity

Key Performance Indicators (KPIs) are essential metrics that provide valuable insights into the performance of specific business activities. By tracking user activity in real-time, businesses can display KPI cards that reflect how users interact with a system, product, or service. This allows organizations to make informed decisions and improve user experience. Below is a guide on how to build KPI cards based on user activity, from data collection to displaying these metrics on the front end.

---

Step 1: Defining User Activity Metrics

To create KPI cards, first, identify what aspects of user activity you want to measure. Some common KPIs based on user activity include:

• Active Users: The number of users who have interacted with the platform within a given time frame (e.g., daily, weekly, monthly).
• New Registrations: The number of new users who sign up during a specific period.
• Engagement: The number of actions a user performs on the platform, such as clicks, likes, or posts.
• Conversion Rate: The percentage of users who take a specific action, such as completing a purchase or subscribing to a service.
• Session Duration: The average time users spend interacting with the platform.

Step 2: Collecting User Activity Data

To track user activity, you need to collect data in real-time. There are various ways to capture this data, depending on the system you’re using.

1. Tracking User Activity in Dataverse:
   • If you’re using Microsoft Dataverse, you can store user activity data in custom tables, such as “User Activity” or “User Sessions.”
   • You can track activities like login events, clicks, form submissions, and more using Dataverse Auditing or custom triggers.
   • Using the Power Automate platform, you can automate the capture of user activities by linking actions (e.g., a user registration) to Dataverse or any other external system.
   Example:
   • User Table: UserId, FirstName, LastName, LastLoginDate, TotalPurchases.
   • Activity Table: ActivityId, UserId, ActivityType, Timestamp.
2. Integrating with Analytics Tools:
   • If you’re using web-based platforms, you can integrate tools like Google Analytics, Mixpanel, or Hotjar to track user activity.
   • You can send the data to a backend server or store it in a database to generate real-time KPIs.

---

Step 3: Calculating KPIs

Once you’ve set up data collection, the next step is to calculate the KPIs based on the user activity data. These calculations are typically done on the server-side, where you aggregate data, filter it based on time intervals, and compute the necessary metrics.

Here are some example calculations:

1. Active Users:
   • You can calculate the number of users who have logged in or interacted within the last 24 hours or any specific time frame.
   Example:
   SELECT COUNT(DISTINCT UserId) FROM UserActivity WHERE Timestamp >= DATEADD(day, -1, GETDATE());
2. New Registrations:
   • Calculate the number of users who registered within the last week.
   Example: SELECT COUNT(UserId) FROM Users WHERE RegistrationDate >= DATEADD(week, -1, GETDATE());
3. Engagement:
   • This can be tracked by counting specific actions like clicks or form submissions within a time frame.
   Example:
   SELECT COUNT(ActivityId) FROM UserActivity WHERE ActivityType = 'Click' AND Timestamp >= DATEADD(day, -1, GETDATE());
4. Conversion Rate:
   • Calculate the percentage of users who completed a desired action (e.g., purchase).
   Example:
   SELECT (COUNT(PurchaseId) / COUNT(UserId)) * 100 AS ConversionRate FROM UserPurchases WHERE PurchaseDate >= DATEADD(day, -30, GETDATE());
5. Session Duration:
   • Calculate the average time users spend on the platform by comparing login and logout times.
   Example:
   SELECT AVG(DATEDIFF(second, LoginTime, LogoutTime)) AS AverageSessionDuration FROM UserSessions WHERE SessionStart >= DATEADD(day, -1, GETDATE());

These calculations will be done on the server-side, and the results will be used to populate the KPI cards.

---

Step 4: Displaying KPI Cards in the Front End

Once you’ve calculated the KPIs, it’s time to display them to users on the front end. KPI cards are often displayed in a dashboard or at the top of a web page to give a snapshot of the data.

You can use any front-end technology (e.g., React, Angular, or simple HTML/CSS) to create the UI for your KPI cards. Below is an example using HTML/CSS and JavaScript to create KPI cards that dynamically update based on the data retrieved from the server.

1. HTML Structure: Here’s the basic HTML structure for the KPI cards:
   <div class="kpi-card" id="active-users"> <h3>Active Users</h3> <p id="active-users-value">Loading...</p> </div> <div class="kpi-card" id="new-registrations"> <h3>New Registrations</h3> <p id="new-registrations-value">Loading...</p> </div> <div class="kpi-card" id="conversion-rate"> <h3>Conversion Rate</h3> <p id="conversion-rate-value">Loading...</p> </div> <div class="kpi-card" id="average-session"> <h3>Average Session Duration</h3> <p id="average-session-value">Loading...</p> </div>
2. CSS Styling: Here’s the basic CSS to style the KPI cards:
   .kpi-card { background-color: #f3f4f6; padding: 20px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin: 10px; text-align: center; } .kpi-card h3 { font-size: 1.5rem; margin-bottom: 10px; } .kpi-card p { font-size: 2rem; font-weight: bold; }
3. JavaScript to Fetch and Update Data: Use JavaScript to fetch the KPIs from the backend and update the card values. Example:
   async function fetchKPIData() { const response = await fetch('/api/kpi-data'); const data = await response.json(); document.getElementById('active-users-value').innerText = data.activeUsers; document.getElementById('new-registrations-value').innerText = data.newRegistrations; document.getElementById('conversion-rate-value').innerText = data.conversionRate + '%'; document.getElementById('average-session-value').innerText = data.averageSessionDuration + ' mins'; } // Fetch data every 10 seconds setInterval(fetchKPIData, 10000); // Initial load fetchKPIData();

In this example, the fetchKPIData() function fetches the data from an API endpoint (which you would configure on your backend to retrieve the calculated KPIs), and updates the content of the HTML elements with the correct data.

---

Step 5: Performance Considerations

When working with KPI cards based on user activity, consider the following:

1. Caching: To reduce the load on your server, you might want to cache the KPI data for a short period (e.g., 30 seconds or 1 minute). This way, the system doesn’t need to constantly query the database for every request.
2. Efficient API Design: Design your API to only return the data needed for the KPI cards. Avoid loading unnecessary information to reduce latency.
3. Real-Time Updates: You can implement WebSockets or Server-Sent Events (SSE) for pushing updates in real time to the front end, rather than polling every few seconds.