Analytics: Tracking Co-Staking Modal Engagement

by Admin 48 views
Analytics: Tracking Co-Staking Modal Engagement

Hey guys! Today, let's dive into implementing analytics for our co-staking features. We're going to use Sentry to track how users interact with the Co-Staking Boost Modal, which will help us understand user engagement and optimize the experience.

Overview

The primary goal here is to implement a robust analytics infrastructure using Sentry. We'll be tracking user engagement with the Co-Staking Boost Modal, focusing on how long users view it and how they interact with the call-to-action (CTA) elements. This data will provide valuable insights into user behavior and help us make informed decisions about improving the co-staking feature.

Background

We already have Sentry integrated into our infrastructure for error tracking, which is a great start. Now, we need to extend this capability to track user engagement metrics specifically for our co-staking features. We'll be leveraging Sentry's breadcrumbs and custom contexts to capture detailed interaction data, giving us a comprehensive view of how users are using the Co-Staking Boost Modal.

Goals

Here's what we aim to achieve:

  1. Create a reusable analytics utility service: This will provide a consistent and efficient way to track events across our application.
  2. Track Co-Staking Boost Modal viewing time: Understanding how long users spend on the modal will help us gauge their interest and comprehension of the presented information.
  3. Track modal CTA clicks: We'll monitor clicks on various CTAs, such as close, submit/boost, and dismiss, to understand user intent and optimize the modal's effectiveness.

Technical Implementation

Let's break down the technical steps to achieve these goals.

Step 1: Create Analytics Service

First, we'll create a reusable analytics utility service to streamline our tracking efforts. This service will provide a consistent interface for tracking various events and interactions within our application.

Create a new file: services/simple-staking/src/ui/common/utils/analytics.ts

import * as Sentry from "@sentry/react";

/**
 * Analytics event categories for co-staking features
 */
export enum AnalyticsCategory {
  MODAL_VIEW = "modal.view",
  MODAL_INTERACTION = "modal.interaction",
  FORM_INTERACTION = "form.interaction",
  CTA_CLICK = "cta.click",
  NAVIGATION = "navigation",
}

/**
 * Track a custom analytics event using Sentry breadcrumbs
 */
export function trackEvent(
  category: AnalyticsCategory,
  message: string,
  data?: Record<string, any>
) {
  Sentry.addBreadcrumb({
    category,
    message,
    level: "info",
    data: {
      timestamp: new Date().toISOString(),
      ...data,
    },
  });
}

/**
 * Track modal viewing time
 * Returns a function to call when modal closes to log duration
 */
export function trackModalView(modalName: string) {
  const startTime = performance.now();

  trackEvent(
    AnalyticsCategory.MODAL_VIEW,
    `${modalName} opened`,
    { modalName, action: "open" }
  );

  return () => {
    const duration = Math.round(performance.now() - startTime);
    trackEvent(
      AnalyticsCategory.MODAL_VIEW,
      `${modalName} closed`,
      {
        modalName,
        action: "close",
        durationMs: duration,
        durationSeconds: Math.round(duration / 1000),
      }
    );
  };
}

/**
 * Track CTA button clicks
 */
export function trackCTAClick(
  ctaName: string,
  context?: Record<string, any>
) {
  trackEvent(
    AnalyticsCategory.CTA_CLICK,
    `CTA clicked: ${ctaName}`,
    {
      ctaName,
      ...context,
    }
  );
}

This code defines an AnalyticsCategory enum to categorize our events, along with functions to track events, modal viewing time, and CTA clicks. The trackEvent function is the core of our analytics service, adding breadcrumbs to Sentry with relevant data. The trackModalView function records when a modal is opened and closed, calculating the viewing duration. The trackCTAClick function tracks clicks on specific call-to-action buttons, providing context about the user's interaction. By using these functions, we can easily integrate analytics tracking into our components and gain valuable insights into user behavior. This utility service ensures consistency and reduces code duplication, making it easier to maintain and extend our analytics capabilities in the future. Additionally, the clear categorization of events allows for more effective analysis and reporting, enabling us to identify areas for improvement and optimize the user experience. The use of Sentry breadcrumbs provides a detailed audit trail of user interactions, facilitating debugging and troubleshooting.

Step 2: Update CoStakingBoostModal Component

Next, we'll update the CoStakingBoostModal component to utilize our new analytics service. This will involve adding hooks to track modal viewing time and CTA clicks within the modal.

File: services/simple-staking/src/ui/common/components/Modals/CoStakingBoostModal.tsx

Add analytics tracking hooks to monitor how users interact with the CoStakingBoostModal. Specifically, we want to track when the modal is opened and closed, how long users spend viewing the modal, and which call-to-action buttons they click. To achieve this, we will use the trackModalView function from our analytics service to record the modal's open and close events, along with the viewing duration. We will also use the trackCTAClick function to track clicks on the "Stake X BABY to Boost APR" button and the close (X) button. By implementing these tracking hooks, we can gather valuable data about user behavior within the modal. This data will help us understand how effective the modal is in communicating the benefits of co-staking and driving user engagement. For example, if we find that users are spending a significant amount of time on the modal but not clicking the "Stake X BABY to Boost APR" button, it may indicate that the modal's content is not clear or compelling enough. Similarly, if we find that many users are closing the modal without interacting with it, it may suggest that the modal is disruptive or irrelevant to their current task. By analyzing these metrics, we can identify areas for improvement and optimize the modal to better meet user needs and achieve our desired outcomes.

Step 3: Update CoStakingBoostSection Component

Finally, we'll update the CoStakingBoostSection component to track when users dismiss the boost section. This will provide insights into whether users find the boost section relevant and helpful.

File: services/simple-staking/src/ui/baby/components/CoStakingBoostSection/index.tsx

Track dismissal of the boost section to understand user engagement. We want to know how often users are dismissing the CoStakingBoostSection and why. To do this, we will add a tracking event when the user clicks the dismiss (X) button on the section. This event will be tracked using the trackEvent function from our analytics service, with the category set to AnalyticsCategory.MODAL_INTERACTION and the message set to "dismiss_boost_section". We will also include context data such as the user's current APR and the potential boost they could receive by co-staking. By tracking dismissals, we can gain insights into whether the boost section is perceived as valuable and relevant to users. If we see a high rate of dismissals, it may indicate that the section is intrusive or that the potential boost is not significant enough to warrant their attention. This information can then be used to optimize the section and make it more appealing to users. For example, we could try highlighting the benefits of co-staking more prominently or adjusting the frequency with which the section is displayed. By continuously monitoring and analyzing user interactions, we can ensure that the CoStakingBoostSection is providing value and contributing to a positive user experience.

Testing Criteria

To ensure our analytics implementation is working correctly, we'll perform the following manual tests.

Manual Testing

  1. Open browser DevTools → Console
  2. Open Sentry breadcrumbs in the Sentry dashboard
  3. Test the following scenarios:

Modal View Tracking:

  • [ ] Trigger CoStakingBoostModal to open
  • [ ] Wait 5 seconds
  • [ ] Close the modal
  • [ ] Verify breadcrumb logged with ~5 second duration

CTA Click Tracking:

  • [ ] Click "Stake X BABY to Boost APR" button
  • [ ] Verify breadcrumb with boost_apr_stake_baby event
  • [ ] Verify context includes: babyAmount, aprBoostPercent, currentApr, boostApr

Dismiss Tracking:

  • [ ] Click X button to close modal
  • [ ] Verify breadcrumb with close_modal event
  • [ ] Verify context includes modalName: "CoStakingBoostModal"

Boost Section Tracking:

  • [ ] Click formatted amount link in CoStakingBoostSection
  • [ ] Verify prefill_costaking_amount event
  • [ ] Click dismiss (X) on CoStakingBoostSection
  • [ ] Verify dismiss_boost_section event

Privacy Considerations

We've taken several steps to ensure user privacy in our analytics implementation.

  1. No PII Collection: Analytics only tracks interaction patterns, not user identities.
  2. Already Redacted: Wallet addresses are redacted via existing redactTelemetry() utility, i.e. we already have a NEXT_PUBLIC_REDACT_TELEMETRY and you can check out how we trim pk and address
  3. Numerical Data Only: APR percentages and amounts are non-sensitive business metrics
  4. Sentry Configuration: Uses existing privacy-safe Sentry setup with:
    • maskAllText: isProductionEnv() for session replays
    • blockAllMedia: true

These measures ensure that we're collecting valuable data while respecting user privacy.

Files to Modify

Here's a summary of the files we'll be working with:

  1. Create new file: services/simple-staking/src/ui/common/utils/analytics.ts
  2. Edit: services/simple-staking/src/ui/common/components/Modals/CoStakingBoostModal.tsx
  3. Edit: services/simple-staking/src/ui/baby/components/CoStakingBoostSection/index.tsx

Success Metrics

Once we've implemented the analytics, we'll be able to answer the following questions:

  • How long do users view the CoStakingBoostModal on average?
  • What percentage of users click "Boost APR" vs dismiss the modal?
  • How often is the CoStakingBoostSection dismissed vs clicked?
  • What are typical APR boost amounts users are offered?

These insights will help us optimize the co-staking experience and improve user engagement.

References

That's it, guys! By following these steps, we'll have a robust analytics system in place to track user engagement with our co-staking features. This data will be invaluable in helping us optimize the user experience and drive adoption of co-staking.