Woopra Event Tracking Setup

Overview

Event tracking in Woopra allows you to capture specific user actions and behaviors beyond pageviews. This enables you to understand how users interact with your application and make data-driven decisions.

Basic Event Tracking

Track Custom Events

Use woopra.track() to send custom events:

woopra.track('event_name', {
  property: 'value'
});

Real-World Examples

// Button click
woopra.track('button_click', {
  button_name: 'Sign Up CTA',
  page: window.location.pathname,
  position: 'header'
});

// Video interaction
woopra.track('video_played', {
  video_title: 'Product Demo',
  duration: 120,
  percentage_watched: 0.75
});

// Purchase event
woopra.track('purchase', {
  product_name: 'Pro Plan',
  price: 99.99,
  currency: 'USD',
  transaction_id: 'TXN_12345'
});

// Feature usage
woopra.track('feature_used', {
  feature_name: 'Export Data',
  file_format: 'CSV',
  row_count: 1500
});

Automatic Tracking

Form Tracking

Automatically track form submissions:

// Track form by ID
woopra.trackForm('contact-form', 'form_submit');

// Track with custom event name and properties
woopra.trackForm('newsletter-form', 'newsletter_signup', {
  source: 'blog_sidebar',
  campaign: 'spring_2024'
});

Link Tracking

Track outbound link clicks:

// Track specific link
woopra.trackClick('download-button', 'file_download', {
  file_name: 'whitepaper.pdf',
  file_size: '2.5MB'
});

// Track all outbound links automatically
document.querySelectorAll('a[href^="http"]').forEach(link => {
  link.addEventListener('click', function(e) {
    woopra.track('outbound_click', {
      url: this.href,
      text: this.textContent
    });
  });
});

Element Click Tracking

Track clicks on any element:

woopra.trackClick('element-id', 'element_clicked', {
  element_type: 'button',
  element_text: 'Get Started'
});

Advanced Event Tracking

Event Chaining

Send multiple events in sequence:

// User completes onboarding flow
woopra.track('onboarding_started');

// Step 1
woopra.track('onboarding_step', {
  step: 1,
  step_name: 'profile_creation'
});

// Step 2
woopra.track('onboarding_step', {
  step: 2,
  step_name: 'preferences_set'
});

// Completion
woopra.track('onboarding_completed', {
  total_steps: 2,
  time_spent: 180
});

Conditional Event Tracking

Track events based on conditions:

// Track only for specific user segments
if (user.plan === 'enterprise') {
  woopra.track('enterprise_feature_accessed', {
    feature: 'advanced_analytics'
  });
}

// Track based on user behavior
const timeOnPage = Date.now() - pageLoadTime;
if (timeOnPage > 30000) {  // 30 seconds
  woopra.track('engaged_user', {
    time_on_page: timeOnPage,
    page: window.location.pathname
  });
}

Event Timing

Track how long actions take:

// Start timing
const startTime = Date.now();

// User performs action
performAction().then(() => {
  const duration = Date.now() - startTime;

  woopra.track('action_completed', {
    action: 'data_export',
    duration_ms: duration,
    duration_seconds: Math.round(duration / 1000)
  });
});

E-commerce Tracking

Product Views

woopra.track('product_viewed', {
  product_id: 'PROD_123',
  product_name: 'Wireless Headphones',
  category: 'Electronics',
  price: 79.99,
  currency: 'USD'
});

Add to Cart

woopra.track('add_to_cart', {
  product_id: 'PROD_123',
  product_name: 'Wireless Headphones',
  quantity: 1,
  price: 79.99
});

Checkout Events

// Checkout started
woopra.track('checkout_started', {
  cart_value: 159.98,
  item_count: 2,
  currency: 'USD'
});

// Checkout completed
woopra.track('checkout_completed', {
  transaction_id: 'TXN_789',
  revenue: 159.98,
  tax: 12.80,
  shipping: 5.00,
  total: 177.78,
  currency: 'USD',
  payment_method: 'credit_card'
});

Event Properties Best Practices

Naming Conventions

Use clear, consistent naming:

// Good - descriptive and consistent
woopra.track('video_played', { video_id: 'VID_123' });
woopra.track('video_paused', { video_id: 'VID_123' });
woopra.track('video_completed', { video_id: 'VID_123' });

// Avoid - inconsistent naming
woopra.track('play_video', { id: 'VID_123' });
woopra.track('VideoPause', { videoId: 'VID_123' });
woopra.track('Complete', { vid: 'VID_123' });

Property Types

Include appropriate data types:

woopra.track('purchase', {
  // Strings
  product_name: 'Pro Plan',
  currency: 'USD',

  // Numbers
  price: 99.99,
  quantity: 1,

  // Booleans
  is_first_purchase: true,
  used_discount: false,

  // Timestamps
  timestamp: Date.now()
});

Required vs Optional Properties

Structure events with core and optional properties:

// Core properties always included
woopra.track('file_upload', {
  file_name: 'document.pdf',  // Required
  file_size: 1048576,         // Required
  file_type: 'pdf',           // Required

  // Optional contextual data
  upload_source: 'drag_drop',
  folder: '/documents',
  is_public: false
});

Testing Events

Debug Mode

Enable debug mode to see events in console:

woopra.config({ debug: true });

// Track event
woopra.track('test_event', {
  property: 'value'
});

// Check browser console for event details

Verify Event Delivery

Check that events are being sent:

// Track and log
woopra.track('button_click', {
  button: 'signup'
});

console.log('Event tracked:', {
  name: 'button_click',
  properties: { button: 'signup' }
});

Common Use Cases

User Engagement

// Feature adoption
woopra.track('feature_discovered', {
  feature: 'keyboard_shortcuts',
  discovery_method: 'tooltip'
});

// Help content accessed
woopra.track('help_viewed', {
  article_title: 'Getting Started',
  search_query: 'how to export data'
});

Error Tracking

// Track errors and issues
window.addEventListener('error', function(e) {
  woopra.track('javascript_error', {
    error_message: e.message,
    error_file: e.filename,
    error_line: e.lineno
  });
});

// Track user-facing errors
woopra.track('form_validation_error', {
  form_name: 'signup',
  field: 'email',
  error: 'invalid_format'
});

Performance Monitoring

// Track page load performance
window.addEventListener('load', function() {
  const perfData = performance.timing;
  const loadTime = perfData.loadEventEnd - perfData.navigationStart;

  woopra.track('page_performance', {
    load_time_ms: loadTime,
    page: window.location.pathname
  });
});

Troubleshooting

Events Not Appearing

If events aren't showing up in Woopra:

1. Check that Woopra is initialized before tracking
2. Verify event names don't have special characters
3. Ensure property values are valid JSON types
4. Check browser console for errors

// Wait for Woopra to be ready
if (typeof woopra !== 'undefined') {
  woopra.track('event_name', { prop: 'value' });
} else {
  console.error('Woopra not loaded');
}

Event Timing Issues

Ensure events fire at the right time:

// For events that occur on page unload
document.addEventListener('beforeunload', function() {
  // Send event synchronously
  woopra.track('page_exit', {
    time_on_page: Date.now() - pageStartTime
  });

  // Force immediate send
  woopra.push();
});

Related Resources

• Woopra Data Layer Setup
• Woopra Installation Guide
• Woopra Cross-Domain Tracking