LogRocket Event Tracking

Overview

LogRocket's event tracking approach is different from traditional analytics platforms. Rather than focusing on high-volume event collection and aggregation, LogRocket prioritizes contextual tracking that enriches session replays and helps you find specific user experiences.

The core philosophy is simple: track events that help you understand user journeys and find relevant sessions quickly. Custom events, user identification, and properties work together to make sessions searchable and actionable. This makes LogRocket exceptionally powerful for debugging, support triage, and understanding specific user experiences.

Event Model

How LogRocket Events Work

LogRocket automatically captures many events (page views, clicks, network requests, errors) but also allows you to track custom events that are meaningful to your application.

Events in LogRocket consist of:

1. Event Name: What happened (e.g., "Purchase Completed", "Feature Enabled")
2. Properties: Key-value pairs providing context (e.g., {plan: "Pro", amount: 99})
3. User Context: Who the user is (set via identify)
4. Session Context: Automatic capture of browser, device, location
5. Timestamp: When the event occurred (auto-captured)

Event Structure:

LogRocket.track('Purchase Completed', {
  plan: 'Pro',
  amount: 99,
  billing_cycle: 'annual',
  payment_method: 'stripe'
});

Key Concepts

• Automatic Events: Page views, clicks, errors, network requests (captured automatically)
• Custom Events: Application-specific actions you define with LogRocket.track()
• User Identity: Persistent user identification across sessions
• Session URL: Unique URL to view any session replay
• Event Properties: Attributes that make sessions searchable

Event Limits and Best Practices

• Event name: Keep under 100 characters
• Property keys: Keep under 100 characters
• Property values: Strings, numbers, booleans (objects will be stringified)
• Events per session: No hard limit, but prioritize quality over quantity
• Don't track PII: LogRocket redacts sensitive data automatically, but avoid explicitly tracking passwords, SSNs, credit cards

Standard Events

LogRocket automatically captures these events without configuration:

Automatically Captured Events

Page Navigation:

• Page View: Every page or route change
• Page Load: Initial page load with timing metrics
• Route Change: SPA route transitions

User Interactions:

• Click: All clickable element interactions
• Input: Form field interactions (values auto-sanitized)
• Scroll: Scroll position changes

Technical Events:

• Error: JavaScript errors and unhandled rejections
• Console: Console logs, warnings, errors
• Network Request: All fetch/XHR requests with status and timing

Performance Events:

• Core Web Vitals: LCP, FID, CLS measurements
• Resource Timing: Load times for scripts, images, fonts

Implementation Examples

These events are captured automatically once LogRocket is initialized:

// Initialize LogRocket - automatic events start capturing
LogRocket.init('your-app/project-name');

// No additional code needed for automatic events
// But you can identify users to enrich them
LogRocket.identify('user-123', {
  name: 'Jane Doe',
  email: 'jane@example.com',
  subscriptionType: 'pro'
});

Custom Events

Custom events are how you track application-specific actions that matter to your product.

Creating Custom Events

Basic JavaScript SDK:

// Simple event
LogRocket.track('Button Clicked');

// Event with properties
LogRocket.track('Video Played', {
  videoId: 'intro-tutorial',
  videoLength: 180,
  quality: '1080p',
  autoplay: false
});

// Event with user context
LogRocket.track('Feature Enabled', {
  featureName: 'Dark Mode',
  enabledFrom: 'settings',
  subscriptionTier: 'Pro'
});

React Applications:

import LogRocket from 'logrocket';

function CheckoutButton() {
  const handleCheckout = () => {
    LogRocket.track('Checkout Started', {
      cartTotal: 99.99,
      itemCount: 3,
      paymentMethod: 'stripe'
    });

    // Continue with checkout logic
  };

  return <button onClick={handleCheckout}>Checkout</button>;
}

Vue Applications:

export default {
  methods: {
    completeOnboarding() {
      LogRocket.track('Onboarding Completed', {
        stepsCompleted: 5,
        timeSpent: 180,
        skippedSteps: []
      });

      this.$router.push('/dashboard');
    }
  }
}

Angular Applications:

import LogRocket from 'logrocket';

export class FeatureComponent {
  enableFeature(featureName: string) {
    LogRocket.track('Feature Toggled', {
      featureName,
      enabled: true,
      source: 'settings-page'
    });
  }
}

Event Naming Best Practices

✅ Good Event Names:

• Subscription Upgraded (clear action, past tense)
• Search Performed (specific behavior)
• Checkout Completed (descriptive outcome)

❌ Bad Event Names:

• click (too generic, use automatic click tracking)
• event_1 (meaningless)
• user_clicked_on_the_upgrade_button_in_settings (too verbose)

Conventions:

• Use Title Case: "Feature Enabled" not "feature_enabled"
• Use past tense: "Purchased" not "Purchase"
• Be specific but concise: "Trial Extended" not "Extended Trial Period By 7 Days"

User Identification

User identification is critical for LogRocket to tie sessions to real users and make support workflows seamless.

Identifying Users

Basic Identification:

// Identify after login/signup
LogRocket.identify('user-123', {
  name: 'Jane Doe',
  email: 'jane@example.com',

  // Custom properties
  subscriptionType: 'professional',
  accountCreated: '2024-01-15',
  companySize: '50-100'
});

Identification with Rich Properties:

LogRocket.identify('user-456', {
  name: 'John Smith',
  email: 'john@example.com',

  // Subscription info
  plan: 'Enterprise',
  planAmount: 499,
  billingCycle: 'annual',
  trialEnd: '2024-02-01',

  // Segmentation
  role: 'Admin',
  companyName: 'Acme Corp',
  industry: 'SaaS',

  // Behavior
  totalLogins: 47,
  lastActive: '2024-01-20',
  featuresUsed: ['reporting', 'api', 'webhooks']
});

Identification in Auth Workflows:

// After successful login
async function handleLogin(email, password) {
  const user = await authService.login(email, password);

  // Identify immediately after authentication
  LogRocket.identify(user.id, {
    name: user.name,
    email: user.email,
    plan: user.subscription.plan,
    role: user.role
  });

  // Track login event
  LogRocket.track('User Logged In', {
    method: 'email',
    mfaEnabled: user.mfaEnabled
  });
}

Anonymous to Identified Transition:

// Before signup - sessions are anonymous
LogRocket.track('Landing Page Viewed');

// After signup - identify the user
function handleSignup(userData) {
  const userId = userData.id;

  LogRocket.identify(userId, {
    name: userData.name,
    email: userData.email,
    signupDate: new Date().toISOString(),
    source: 'organic'
  });

  LogRocket.track('Signup Completed', {
    method: 'email',
    referrer: document.referrer
  });
}

User Properties

Standard Properties:

• name: User's full name
• email: Email address (used in LogRocket UI and integrations)

Custom Properties: You can add any properties relevant to your business:

LogRocket.identify('user-789', {
  // Identity
  name: 'Sarah Johnson',
  email: 'sarah@startup.io',

  // Account details
  accountId: 'acc-456',
  accountType: 'team',
  seats: 5,

  // Subscription
  planName: 'Growth',
  planPrice: 199,
  mrr: 199,
  subscriptionStatus: 'active',

  // Segmentation
  segment: 'high-value',
  lifetimeValue: 2388,
  nps: 9,

  // Flags/experiments
  betaFeatures: true,
  experimentGroup: 'variant-b'
});

Best Practices for User Identification

✅ Do:

• Call identify() on every page load for authenticated users
• Include email to make sessions searchable by user in LogRocket
• Add properties that help segment or triage (plan, role, account type)
• Update properties when they change (e.g., after upgrade)

❌ Don't:

• Include PII like SSN, credit card numbers, passwords
• Send inconsistent user IDs (use a stable identifier)
• Skip identification for logged-in users
• Overload with unnecessary properties (keep it focused)

Session URL and Sharing

One of LogRocket's most powerful features is the ability to get a direct link to any user's session.

Getting Session URLs

Retrieve Current Session URL:

const sessionURL = LogRocket.sessionURL;
console.log('Current session:', sessionURL);
// Output: https://app.logrocket.com/your-app/sessions/abc123

Attach to Support Tickets:

function submitSupportTicket(message) {
  const sessionURL = LogRocket.sessionURL;

  // Send to your support system
  await supportAPI.createTicket({
    message: message,
    userId: currentUser.id,
    logRocketSession: sessionURL,
    timestamp: new Date()
  });

  LogRocket.track('Support Ticket Submitted', {
    category: 'bug-report'
  });
}

Include in Error Reports:

LogRocket.getSessionURL(sessionURL => {
  // Send to your error tracking service
  Sentry.configureScope(scope => {
    scope.setExtra('sessionURL', sessionURL);
  });

  // Or include in custom error handler
  errorTracker.report({
    error: 'Payment failed',
    sessionURL: sessionURL,
    userId: currentUser.id
  });
});

Add to Intercom/Zendesk:

// Include in Intercom user data
LogRocket.getSessionURL(sessionURL => {
  window.Intercom('update', {
    'LogRocket Session': sessionURL
  });
});

// Add to Zendesk tickets
LogRocket.getSessionURL(sessionURL => {
  zE('webWidget', 'updateSettings', {
    webWidget: {
      contactForm: {
        fields: [
          { id: 'session_url', prefill: { '*': sessionURL } }
        ]
      }
    }
  });
});

Properties and Metadata

Properties make sessions searchable and provide context in session replays.

Session-Level Properties

Set properties that apply to the entire session:

// Set after determining user context
LogRocket.identify('user-123', {
  name: 'User Name',
  email: 'user@example.com',
  plan: 'professional',

  // These apply to all events in this session
  experimentVariant: 'new-checkout',
  appVersion: '2.1.0',
  deploymentRegion: 'us-east-1'
});

Event-Specific Properties

Add context to individual events:

LogRocket.track('Purchase Completed', {
  // Transaction details
  orderId: 'ORD-12345',
  amount: 299.99,
  currency: 'USD',

  // Items
  itemCount: 3,
  productIds: ['prod-1', 'prod-2', 'prod-3'],

  // Context
  discountCode: 'SAVE20',
  discountAmount: 60,
  paymentMethod: 'stripe',

  // Metadata
  firstPurchase: true,
  checkoutDuration: 45
});

Searchable Properties

Any property you set can be used to search for sessions in LogRocket:

// Set searchable properties
LogRocket.identify('user-456', {
  email: 'jane@example.com',
  plan: 'enterprise',
  company: 'Acme Corp',
  industry: 'fintech',
  role: 'admin'
});

LogRocket.track('Feature Used', {
  featureName: 'advanced-reporting',
  usageCount: 5
});

// Later, in LogRocket UI, search for:
// - All sessions where plan = "enterprise"
// - All sessions where featureName = "advanced-reporting"
// - All sessions for user jane@example.com

Integration Patterns

With Redux

LogRocket's Redux middleware captures all actions and state:

import LogRocket from 'logrocket';
import { createStore, applyMiddleware } from 'redux';

const store = createStore(
  rootReducer,
  applyMiddleware(LogRocket.reduxMiddleware())
);

// All Redux actions are now captured
// Dispatch actions as normal
store.dispatch({
  type: 'USER_UPGRADED',
  payload: { plan: 'Pro' }
});

// Also track custom events for important actions
LogRocket.track('Subscription Upgraded', {
  oldPlan: 'Free',
  newPlan: 'Pro',
  amount: 99
});

With Vuex

import LogRocket from 'logrocket';
import Vuex from 'vuex';

const store = new Vuex.Store({
  plugins: [LogRocket.vuexPlugin()],
  // ... your store config
});

// Vuex mutations are automatically captured
// Also track custom events
LogRocket.track('Cart Updated', {
  itemCount: 3,
  total: 149.97
});

With NgRx (Angular)

import LogRocket from 'logrocket';
import { StoreModule } from '@ngrx/store';

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, {
      metaReducers: [LogRocket.ngrxMiddleware()]
    })
  ]
})
export class AppModule {}

// NgRx actions are automatically captured
// Track custom events as needed
LogRocket.track('Dashboard Loaded', {
  widgetsCount: 5,
  loadTime: 1200
});

Debugging & Validation

Console Verification

Enable debug mode to see tracking in console:

LogRocket.init('your-app/project', {
  console: {
    isEnabled: true
  }
});

// You'll see console logs when events are tracked
LogRocket.track('Test Event', { foo: 'bar' });
// Console: [LogRocket] Tracked "Test Event" with properties: {foo: "bar"}

Verify in LogRocket Dashboard

1. Navigate to LogRocket dashboard
2. Click on "Sessions" → "Live Sessions"
3. Perform actions in your app
4. See your session appear in real-time
5. Click on session to verify:
   • User identification worked
   • Custom events appear in timeline
   • Properties are attached correctly

Check Session URL

// Log session URL to verify tracking
console.log('LogRocket Session:', LogRocket.sessionURL);

// If null or undefined, check:
// - LogRocket.init() was called
// - Correct app ID was used
// - Network requests to LogRocket are not blocked

Network Tab Inspection

Look for requests to:

https://r.lr-ingest.com/i
https://r.lr-ingest.com/rec/...

If these are blocked, LogRocket may be blocked by ad blockers or network policies.

Best Practices

Event Design

✅ Do:

• Track meaningful user actions, not every click
• Use custom events for business-critical actions (signup, purchase, key feature usage)
• Include context in properties (amounts, IDs, status)
• Be consistent with naming conventions

❌ Don't:

• Track every mouse move or scroll (use automatic tracking)
• Create overly specific events: "HomePage_BlueButton_Clicked"
• Send PII in event properties
• Forget to identify users after authentication

Property Strategy

✅ Do:

• Use descriptive property names: subscriptionPlan not sp
• Keep property names consistent across events
• Use appropriate data types (numbers for amounts, booleans for flags)
• Include properties that help you search for sessions

❌ Don't:

• Send empty or null values
• Use inconsistent casing: userId vs user_id
• Exceed reasonable property counts (keep under 20 per event)
• Send large objects or arrays as properties

User Identity

✅ Do:

• Call identify() on every page load for logged-in users
• Include email for searchability
• Update properties when they change (e.g., after upgrade)
• Use stable, consistent user IDs

❌ Don't:

• Skip identification for authenticated users
• Send different IDs for the same user
• Include sensitive PII (SSN, full credit cards)
• Forget to identify after signup/login

Performance

• Initialize LogRocket early in application lifecycle
• Don't track excessive events (prioritize quality over quantity)
• Use sampling if needed for high-traffic applications
• Monitor bundle size impact (LogRocket SDK is ~30KB gzipped)

Privacy & Compliance

✅ Do:

• Configure sanitization for sensitive fields
• Implement opt-out mechanisms if required
• Document data retention policies
• Respect user privacy preferences

LogRocket.init('your-app/project', {
  // Sanitize additional inputs
  dom: {
    inputSanitizer: true,
    textSanitizer: true
  },

  // Network request/response sanitization
  network: {
    requestSanitizer: request => {
      // Redact authorization headers
      if (request.headers['Authorization']) {
        request.headers['Authorization'] = 'REDACTED';
      }
      return request;
    }
  }
});

❌ Don't:

• Record sessions without user consent in regulated industries
• Send passwords, credit cards, SSNs in events or properties
• Ignore GDPR, CCPA, or other privacy regulations

Additional Resources:

• LogRocket Documentation
• JavaScript SDK Reference
• Privacy and Security Guide