Woopra Server-Side vs Client-Side Tracking

Overview

Woopra supports both client-side and server-side tracking, each with distinct advantages. Understanding when to use each approach helps you capture accurate, comprehensive analytics data.

Client-Side Tracking

What It Is

Client-side tracking uses JavaScript loaded in the user's browser to capture events and user interactions.

Advantages

• Automatic Data Collection: Automatically captures pageviews, referrers, device info, and more
• Rich Context: Access to browser data, screen size, local time, and user behavior
• Easy Implementation: Simple script tag installation
• Session Management: Automatic session tracking and timeout handling
• User Identification: Built-in cookie management for returning visitors

Implementation

// Basic client-side setup
(function(){
  var t,i,e,n=window,o=document,a=arguments,s="script",r=["config","track","identify","visit","push","call","trackForm","trackClick"],c=function(){var t,i=this;for(i._e=[],t=0;r.length>t;t++)(function(t){i[t]=function(){return i._e.push([t].concat(Array.prototype.slice.call(arguments,0))),i}})(r[t])};for(n._w=n._w||{},t=0;a.length>t;t++)n._w[a[t]]=n[a[t]]=n[a[t]]||new c;i=o.createElement(s),i.async=1,i.src="//static.woopra.com/js/w.js",e=o.getElementsByTagName(s)[0],e.parentNode.insertBefore(i,e)
})("woopra");

woopra.config({
  domain: 'example.com'
});

woopra.track();

Use Cases

Perfect for:

• Website Analytics: Page views, bounce rates, navigation patterns
• User Interactions: Button clicks, form submissions, scroll depth
• E-commerce: Product views, cart additions, checkout flows
• Media Tracking: Video plays, audio interactions
• A/B Testing: Tracking experiment variants and conversions

Example: Tracking User Interactions

// Track button clicks
document.getElementById('signup-button').addEventListener('click', function() {
  woopra.track('signup_button_clicked', {
    button_location: 'header',
    page: window.location.pathname
  });
});

// Track form submissions
woopra.trackForm('contact-form', 'contact_form_submitted', {
  form_type: 'contact',
  page: window.location.pathname
});

// Track video engagement
videoPlayer.on('play', function() {
  woopra.track('video_played', {
    video_id: 'intro_video',
    video_title: 'Product Introduction'
  });
});

Server-Side Tracking

What It Is

Server-side tracking sends events directly from your backend servers to Woopra using HTTP API calls.

Advantages

• Secure Data: Keep sensitive information (revenue, PII) on your servers
• Reliable Delivery: Not affected by ad blockers or browser restrictions
• Backend Events: Track server-side actions (payment processing, API calls, cron jobs)
• Data Enrichment: Add context from your database before sending
• Complete Control: Full control over what data is sent and when

HTTP API Implementation

# Basic event tracking
curl "https://www.woopra.com/track/ce/" \
  -d "host=example.com" \
  -d "event=purchase" \
  -d "cv_email=user@example.com" \
  -d "ce_value=99.99" \
  -d "ce_product=Pro Plan"

Python Implementation

import requests

def track_woopra_event(email, event_name, properties=None):
    """Track server-side event to Woopra"""

    url = "https://www.woopra.com/track/ce/"

    # Build parameters
    params = {
        'host': 'example.com',
        'event': event_name,
        'cv_email': email
    }

    # Add custom event properties (prefixed with ce_)
    if properties:
        for key, value in properties.items():
            params[f'ce_{key}'] = value

    # Send to Woopra
    response = requests.post(url, data=params)
    return response.status_code == 200

# Usage
track_woopra_event(
    email='user@example.com',
    event_name='subscription_created',
    properties={
        'plan': 'enterprise',
        'price': 299.99,
        'billing_cycle': 'annual'
    }
)

Node.js Implementation

const axios = require('axios');

async function trackWoopraEvent(email, eventName, properties = {}) {
  const params = new URLSearchParams({
    host: 'example.com',
    event: eventName,
    cv_email: email
  });

  // Add custom event properties
  for (const [key, value] of Object.entries(properties)) {
    params.append(`ce_${key}`, value);
  }

  try {
    await axios.post('https://www.woopra.com/track/ce/', params);
    return true;
  } catch (error) {
    console.error('Woopra tracking error:', error);
    return false;
  }
}

// Usage
trackWoopraEvent('user@example.com', 'payment_processed', {
  amount: 99.99,
  currency: 'USD',
  transaction_id: 'TXN_12345',
  payment_method: 'stripe'
});

Use Cases

Perfect for:

• Payment Processing: Successful payments, refunds, chargebacks
• User Lifecycle: Account creation, upgrades, downgrades, cancellations
• Backend Operations: Scheduled tasks, batch processing, email sends
• API Usage: Track API calls, rate limits, errors
• Data Synchronization: Import historical events or bulk updates

Example: Payment Processing

def process_payment(user_id, amount, plan):
    # Process payment with Stripe
    charge = stripe.Charge.create(
        amount=int(amount * 100),
        currency='usd',
        customer=user_id
    )

    if charge.status == 'succeeded':
        # Track successful payment in Woopra
        track_woopra_event(
            email=user['email'],
            event_name='payment_successful',
            properties={
                'amount': amount,
                'plan': plan,
                'charge_id': charge.id,
                'is_first_payment': user['payment_count'] == 0
            }
        )

        # Update user subscription
        update_subscription(user_id, plan)

Hybrid Approach

Best of Both Worlds

Combine client-side and server-side tracking for comprehensive analytics:

// Client-side: Track user interaction
document.getElementById('checkout-button').addEventListener('click', function() {
  woopra.track('checkout_initiated', {
    cart_value: getCartTotal(),
    item_count: getCartItemCount()
  });

  // Submit to server
  submitCheckout();
});

# Server-side: Track payment completion
def complete_checkout(user_email, order_data):
    # Process payment
    payment = process_payment(order_data)

    if payment.successful:
        # Track on server (secure, guaranteed delivery)
        track_woopra_event(
            email=user_email,
            event_name='checkout_completed',
            properties={
                'order_id': payment.order_id,
                'total': payment.amount,
                'revenue': payment.amount - payment.tax - payment.shipping,
                'tax': payment.tax,
                'shipping': payment.shipping
            }
        )

User Identification Across Channels

Maintain consistent user identity:

// Client-side: Identify user when they log in
woopra.identify({
  email: 'user@example.com',
  name: 'John Doe',
  id: 'user_12345'
});

# Server-side: Use same identifier
track_woopra_event(
    email='user@example.com',  # Same email as client-side
    event_name='subscription_renewed',
    properties={
        'user_id': 'user_12345',  # Same ID as client-side
        'plan': 'pro'
    }
)

Comparison Table

Best Practices

When to Use Client-Side

1. User behavior tracking: Clicks, scrolls, form interactions
2. Page analytics: Views, time on page, navigation
3. Frontend events: Modal opens, tab switches, feature usage
4. A/B testing: Variant assignment and conversion tracking

When to Use Server-Side

1. Sensitive data: Payment amounts, personal information
2. Backend operations: Cron jobs, batch processing, email sends
3. API events: Rate limiting, authentication, errors
4. Critical events: Must guarantee delivery (not affected by ad blockers)
5. Historical data: Importing past events

Security Considerations

Client-side:

// Don't expose sensitive data in client-side events
// Bad:
woopra.track('purchase', {
  credit_card: '4111111111111111',  // Never send PII
  ssn: '123-45-6789'               // Never send sensitive data
});

// Good:
woopra.track('purchase', {
  amount: 99.99,
  product: 'Pro Plan'
});

Server-side:

# Secure server-side tracking with all details
track_woopra_event(
    email='user@example.com',
    event_name='purchase',
    properties={
        'amount': 99.99,
        'product': 'Pro Plan',
        'payment_method': 'stripe',
        'customer_lifetime_value': 1299.99,  # Safe on server
        'internal_user_id': '12345'          # Safe on server
    }
)

Troubleshooting

Client-Side Issues

Events not firing:

// Check if Woopra loaded
if (typeof woopra === 'undefined') {
  console.error('Woopra not loaded - check for ad blockers or script errors');
}

// Enable debug mode
woopra.config({ debug: true });

Ad blockers blocking tracking:

• Consider server-side for critical events
• Use first-party domain for Woopra script
• Implement server-side backup for important conversions

Server-Side Issues

Events not appearing:

# Verify API response
response = requests.post('https://www.woopra.com/track/ce/', data=params)
print(f"Status: {response.status_code}")
print(f"Response: {response.text}")

# Check parameters
print(f"Sent params: {params}")

User not identified:

# Always include visitor identifier
params = {
    'host': 'example.com',
    'cv_email': 'user@example.com',  # Required for user identification
    'event': 'purchase'
}

Related Resources

• Woopra Event Tracking
• Woopra Data Layer Setup
• Woopra Installation Guide