When it comes to web applications, there’s a vast range of topics that can be explored. One of the most relevant is tracking, which involves systematically monitoring key application metrics, including performance, user behavior, and other critical aspects like request performance, response times, and user actions within your platform. In some cases, it even includes identifying the areas with the highest user visual engagement when interacting with your content.

Why should we monitor?

The specific answer to this question is clear: to have control over your business (~or your client’s business~). Monitoring an application and its users may seem simple, but it requires strategy and the right tools. There are various specialized tools available, but it is crucial to know how to leverage them.

Identifying peak user times, performance bottlenecks, and even knowing access metrics for your application’s pages can directly affect user experience, client satisfaction, and company finances. This optimization of costs increases sales through more attractive banners, and ultimately generates more product value based on the collected data

Useful Tools

Although tracking is a topic in the context of web applications, it subdivides into several niches: performance tracking, error tracking, user behavior tracking, event tracking, and even tracking user actions within your app using various collected and analyzed metadata.

Performance and Error Monitoring

You may have heard of NewRelic, Datadog, or Sentry: tools that are very useful for assessing application bottlenecks, such as intermittent errors in scenarios like slow database queries or broken links within the app domain. With the recorded information, it’s possible to identify critical points requiring attention and avoid undesired situations.

Another practical use case for these tools is monitoring errors in more complex environments, such as an API request that fails during background asynchronous service processing.

If the system is designed to handle such failures, the service may attempt retries until completion. However, if your app depends on a third-party system that’s unavailable or returns unexpected data, you might lose hours identifying the problem’s source.

If this critical scenario occurs in a production environment, locating the specific log may be difficult or nearly impossible, depending on the server infrastructure, data volume, and the time it takes your team to investigate after a client reports the issue.

Since these scenarios are difficult to replicate, monitoring application logs is the best approach, and that’s where these tools prove their value. These tools function as external APIs that can be invoked at any point within your code to record events with request-related information, allowing developers to more accurately identify when, how, and why the failure occurred.

User Actions and Event Monitoring

When an application operates in marketing or online sales (promoting products, conducting surveys, offering coupons), monitoring only performance and errors is not enough for successful outcomes.

Tools like HotJar, fullStory, and Mouseflow help track the user’s experience by recording full interaction cycles with your application: monitoring mouse position, text selections, copies, and identifying where users spent more time interacting based on scroll bar movement, page time, and other relevant metrics.

These tools provide valuable insights that can guide company strategy by allowing optimization of banners and ads based on user behavior, validating A/B campaigns with real metrics, and identifying usability issues across devices. For example, a button that is not being clicked because it’s out of view on mobile.

Another set of tools dynamically monitors user actions in the app, registering events, custom metadata, user information, session details, and other business-relevant data.

Such tracking is common in multi-platform apps, third-party integrations, or scenarios requiring many variables for a specific action.

Tracking these events can reveal detailed insights about users and their devices, such as timezone, IP, cookies, browser, OS, as well as application-specific data like form inputs or user preferences.

These data are typically stored in a data warehouse, a centralized repository for integrated data from multiple sources. This allows for the input of distinct datasets and, thanks to its query-oriented structure, lets users efficiently and flexibly customize reports. Some tools include Heap Analytics, MixPanel, and Amplitude.

Structuring Collected Data

The first step toward useful tracking is carefully planning which user data to collect to extract meaningful insights. If you’re unsure where to start, here are some suggestions:

• Visited pages
• Performed actions (clicks, form submissions, element interactions)
• Device and browser
• Approximate geolocation
• Uploads / Downloads

Let’s explore how to structure tracked data using metadata to enrich reports.

Visited Pages

The “Page Viewed” event is fundamental to any tracking strategy, as it enables the construction of a general view of the user journey. The key to successful tracking lies in standardizing these events. Well-structured data is the foundation for consistent dashboards and clear insight reports.

Best practices for structuring “Page Viewed” data:

• Use a consistent pattern for the page_name field.
• Avoid using full URLs as identifiers to reduce cardinality and simplify segmentation.
• Prefer semantic and static names like homepage, project_details, checkout_success.
• Instead of page_name: project?id=123, store: page_name: "project_details", { project_id: 123 }, with attributes as complementary metadata.
• Include context info:
  • referrer_url, origin_url
  • utm_campaign, utm_source, utm_medium (if applicable)
  • locale, timezone, platform
  • user_type (guest, authenticated, admin, etc.)
• Include a session_id or visitor_id to connect this event to others in the same session.
• Ensure all events have a UTC timestamp field.

Advantages:

This structure allows generating dashboards for page views by page, date/time, campaign, or traffic source. Lower cardinality reduces computational cost and improves performance in tools like Looker, Metabase, etc. It also enables event correlation, like a newsletter sign-up, with the exact page context where it happened (covered in the next topic).

Performed Actions

Interaction events, such as clicks, form submissions, or interactions with visual elements, represent the user’s intent. Capturing these actions is the foundation for understanding user behaviors and measuring conversion rates. Read more at Amplitude Interaction Data Tracking Guide.

Best practices for structuring performed action events:

1. Origin and destination context: Always record the event’s origin page origin_url and, when applicable, the destination page target_url. This is very important for mapping navigation flows and ensuring users are reaching the correct campaign pages.
2. Interaction type: Categorize the action with an action_type, such as click, submit, hover, play_video, dismiss_banner, among others. This field allows for granular segmentation of behaviors.
3. Element identifier: Use a standardized element_name or element_id that semantically describes the triggered element, such as cta_register, banner_promo, form_contact, video_ad.
4. Contextual metadata: Include relevant data to enrich the analysis:
   • form_fields_filled, form_errors, video_duration, video_position
   • button_label, banner_campaign_id, checkout_step
5. Session correlation: As with ‘page views’, these events should contain session_id or visitor_id as well as timestamp and received_at, allowing for temporal sequence analysis and correlation with users in your application.

Advantages of this structure:

This structuring enables analyses such as conversion rate by element, banner efficiency, form abandonment rate, and video retention. It also allows modeling the user experience in a data-driven way, facilitating A/B testing and interface optimization based on real behavior.

Navigation Flow

Understanding how users navigate between pages allows you to map the flow of the experience and identify routes that may require attention. Tracking the pages visited by the user should be recorded sequentially, including both intentional actions and eventual interruptions, such as error pages, unexpected redirects, or unauthorized accesses.

Best practices for structuring navigation data:

1. Navigation sequence: Record events with the fields origin_url and target_url, correlated by the same session_id, to reconstruct the navigation trail.
2. Error logging:
   • Use events like page_error with attributes such as error_code (e.g., 403, 404, 500), error_message, and referrer_url.
   • Include URL parameters and query string data that indicate the error’s origin.
3. Redirects and blocks:
   • For pages resulting in a redirect, record the reason (redirect_reason) and destination (redirect_to_url).
   • For unauthorized pages, record the type of block (auth_required, role_denied, etc.).
4. Time on page: When possible, calculate the time between consecutive pageview events to estimate the time spent at each step.

Consider a three-step registration and payment form in which the user completed the first two steps but abandoned the process at the final step. It is important to record this event for later analysis and re-engagement..

{
  "event": "form_abandonment",
  "page_name": "registration_step_3",
  "origin_url": "http://example.com/checkout",
  "form_progress": {
    "current_step": "payment",
    "steps_completed": ["identification", "plan_selection"]
  },
  "form_data": {
    "full_name": "John Doe",
    "email": "john.doe@example.com",
    "plan_selected": "premium_monthly",
    "price": 99.99,
    "currency": "USD",
    "billing_cycle": "yearly"
  },
  "duration_seconds": 182,  
  "reason": "closed_tab",
  "session_id": "xyz789",
  "timestamp": "2025-05-28T13:22:15Z"
}

This type of structure allows calculating the time spent on each step and understanding where users are most likely to abandon the process and why.

It’s important to highlight that although we can implement event tracking with so much information, it’s necessary to understand the side effects that may occur, such as server performance penalties and, consequently, the user’s experience in the application; the registration and massive consumption of logs without an objective purpose; the costs involved with the services and servers to re-track all the metrics of your application.

Even so, if this is relevant to your business, particularly if there are logs from multiple pages in specific scenarios, don’t hesitate to implement re-tracking of the information. However, it’s important to optimize the tracking process and ensure the protection and privacy of user data are taken into account.

Uploads and Downloads

Events of upload and download are especially relevant in applications that deal with user-generated content, such as media, documents, or files. Besides the volume, it’s important to track the origin, content type, and metadata for general analyses.

Best practices for structuring upload and download data:

1. File Identification

   • file_id or asset_id: unique identifier of the file.
   • file_type: file type/extension (e.g., mp3, pdf, csv).
   • content_category: content category (e.g., music, video, document).
   • file_size: applicable to uploads.
   • upload_status and validation_errors: for upload control and diagnosis.

2. Action Metadata

   • action_type: upload or download.
   • timestamp: date and time of the action.
   • user_id: identifier of the responsible user.
   • platform: system or device used (e.g., iOS, Android, Web).
   • locale, country, region: location for geographical and language analyses.
   • timezone: useful for analysis by time slot.

3. Origin and Context

   • origin_page: page where the action was initiated.
   • referrer_url: referrer URL.
   • utm_*: campaign parameters (e.g., utm_source, utm_campaign).
   • campaign: name or id of the associated campaign (if any).

Example:

In a platform that hosts music content, the download event may be:

{
  "event": "download",
  "action_type": "file_download",
  "asset_id": "track_9821",
  "file_type": "mp3",
  "file_size": 5120000,
  "content_category": "music",
  "user_id": "u567",
  "platform": "ios",
  "locale": "pt-BR",
  "country": "BR",
  "region": "Southeast",
  "timezone": "America/Sao_Paulo",
  "timestamp": "2025-05-28T17:42:10Z",
  "origin_url": "https://example.com/album/4312",
  "referrer_url": "https://example.com/releases",
  "utm_source": "newsletter",
  "utm_medium": "email",
  "utm_campaign": "weekly_releases",
  "campaign": "Q2_promo_downloads"
}

This type of structure allows answering questions such as: popularity of downloads based on demographic data, effectiveness of marketing campaigns, problem diagnostics, usage patterns of the platform by operating system, device, location, and time, and content consumption trends, whether by any attribute you want to track, such as, for example, files with the .flac extension downloaded in recent months from a specific category.

Privacy and Ad-Blockers

Now that you know some ways to monitor your application, we need to talk about the tools that do the opposite, that is, that try to prevent the collection of this type of information and seek to keep the user anonymous, applying various strategies to do so.

These tools can act on different barriers of the application. Some operate at the network level, such as VPNs and firewall policies that block access to tracking servers and third-party sites. Others work at the navigation level, primarily focusing on blocking ads, trackers, and tracking scripts that attempt to identify your device and access user cookies in a ‘Cross-Site’ environment, which happens when one webpage tries to read cookies or browser information that belong to a different domain. This situation is often associated with public networks or general user behavior monitoring tools, rather than being limited to a specific application.

Well, how do we deal with blockers while trying to collect information about users? The truth is that it’s not always possible to do this as we would like; however, some strategies may be relevant.

Privacy and Ad-Blockers – Cartoonify by Sora

Tips and Recommendations

When implementing tracking in web applications, it’s essential to clearly define the monitoring objectives, prioritizing the metrics that truly impact the business and user experience. Avoid collecting excessive data, as this can overload the system and hinder analysis.

Use tools that integrate performance monitoring, errors, and user behavior to get a complete view of the application. Implement a continuous review process of the collected data, with alerts configured to quickly identify anomalies. Also, respect privacy and data protection standards, ensuring transparency with users about the use of collected information.

Dealing with blockers and privacy

Tools like VPNs, firewalls, and ad-blocker extensions can prevent the loading of tracking scripts. To mitigate:

1. Use server-side tracking whenever possible.
2. Implement fallback local logs that are sent as soon as the connection allows.
3. Be transparent: update privacy policies and request explicit consent with the software that is blocking tracking.

Conclusion

Tracking is an essential practice to ensure the healthy growth of modern web applications. Strategic data collection and proper analysis allow identifying critical points, optimizing resources, and improving user experience, directly contributing to business success. Choosing the right tools, defining relevant metrics, and acting based on the generated insights are indispensable steps to transform data into a sustainable competitive advantage.

Moreover, the continuous generation of data and structured reports provides a valuable history that can be easily integrated with artificial intelligence agents, enabling integration and automation of analyses, pattern detection, and process optimization, based on the collected and interpreted metrics.

We want to work with you. Check out our Services page!