Can mixpanel filter events by hour?

Yes, Mixpanel can filter data by hour. You can use the Segmentation feature to break down events by different properties, including time intervals such as the hour of the day. For example, you can analyze how often an event like a "pageview" occurred each hour and compare it across different properties such as browser types or devices.

In the Insights or Segmentation tools, you can select an event and then filter or break it down by hour. This allows you to see how often an event occurred at specific times, which can be particularly useful for identifying trends or user behavior at different times of the day​.

How to implement Event Tracking in React Native for Mixpanel with Hour Filtering?

To enable filtering by hour in Mixpanel, you need to ensure that events from your React Native app are tracked with accurate timestamps. Mixpanel automatically includes a timestamp with each event, but you might want to customize or ensure proper implementation. Here's a step-by-step guide on how to implement event tracking in React Native for Mixpanel:

Step 1: Setup Mixpanel with React Native.

Follow this guide to integrate Mixpanel with React.

Step 2: Track Events with Automatic Timestamps

When you track events, Mixpanel automatically includes a timestamp. Here's how to track an event:

mixpanel.track('Event Name');

Example:

mixpanel.track('Article Read');

Step 3: Add Custom Properties to Events (Optional)

You can add properties to provide more context to the events:

mixpanel.track('Article Read', { 'Article ID': '12345', 'Category': 'Technology', });

Step 4: Use Custom Timestamps (If Necessary)

If you need to track events that occurred at a different time than when they are sent (e.g., offline events), you can include a $time property with the event:

const eventTime = new Date().toISOString(); 
mixpanel.track('Event Name', 
               {   
                 'Property Key': 'Property Value',   
                 '$time': eventTime, 
               }
              );

Ensure that $time is in ISO 8601 format and in UTC.

Step 5: Tracking Events in React Native Components

Here's how you might track an event when a user performs an action, such as clicking a button:

import React from 'react';
import { Button, View } from 'react-native';
import { Mixpanel } from 'mixpanel-react-native';
const mixpanel = new Mixpanel('YOUR_PROJECT_TOKEN');
const MyComponent = () => {
  const handleButtonPress = () => {
    mixpanel.track('Button Pressed', {
      'Button Name': 'Purchase Button',
    });
  };
  return (
    <View>
      <Button title="Purchase" onPress={handleButtonPress} />
    </View>
  );
};
export default MyComponent;

Step 6: Ensure Correct Timezone Handling

Mixpanel uses UTC time by default. If your app or users operate in different timezones, make sure to handle timezone conversions if necessary.

• Server-Side Timezone Settings: You can set the project's timezone in Mixpanel settings to match your primary user base.

• Client-Side Timezone Offset: Include the user's timezone offset as a property if you need to analyze data based on local times.

const timezoneOffset = new Date().getTimezoneOffset(); // in minutes 
mixpanel.track('Event Name', {   'Timezone Offset': timezoneOffset, });

Step 7: Filter Events by Hour in Mixpanel

After implementing event tracking, you can filter and analyze events by hour within the Mixpanel dashboard.

1. Navigate to Insights or Segmentation:

   • Log in to your Mixpanel account.

   • Go to Insights or Segmentation from the left-hand menu.

2. Select the Event to Analyze:

   • Click on "Add Event" and choose the event you want to analyze (e.g., "Button Pressed").

3. Break Down the Event by Hour:

   • Click on "Breakdown by" and select "Time".

   • Choose "Hour of Day". This will aggregate event counts based on each hour (0-23).

4. Apply Filters (Optional):

   • Use filters to narrow down data (e.g., by user properties or additional event properties).

5. Adjust Date Range:

   • Set the desired date range for your analysis using the date picker.

6. Visualize the Data:

   • Choose the preferred chart type (line, bar, table) to display your data.

Example: Analyzing Button Press Events by Hour

Suppose you want to see when users are most active in pressing the "Purchase" button:

1. Select "Button Pressed" Event.

2. Break Down by "Hour of Day".

3. Filter by "Button Name" equals "Purchase Button".

4. Set Date Range to the Last 7 Days.

5. View the Chart to see peak hours of user activity.

Additional Tips

• Handling Offline Events: If your app records events while offline, ensure they are queued and sent to Mixpanel when the device reconnects. The Mixpanel SDK handles this by default.

Monitoring and Debugging

• Check Event Delivery: Use Mixpanel’s Live View to ensure events are being received.

Logging: Enable verbose logging during development to troubleshoot:
mixpanel.setLoggingEnabled(true);

Conclusion

By implementing the Mixpanel SDK as shown, your React Native app will send events with accurate timestamps, allowing you to filter and analyze user actions by hour in the Mixpanel dashboard. This setup is crucial for understanding user behavior patterns and optimizing your app accordingly.

Bonus Read: How to integrate Mixpanel with Sentry.