Lucky Orange Event Tracking Setup

Event Tracking Overview

Lucky Orange tracks visitor behavior primarily through session recordings and heatmaps. While it doesn't have traditional "event tracking" like analytics platforms, you can use visitor tagging and custom data to mark important user actions and segment recordings for analysis.

Tracking Methods

Visitor Tags

Tag visitors when they perform specific actions:

window._loq = window._loq || [];

// Tag when button clicked
_loq.push(['tag', 'Clicked CTA Button']);

// Tag when form submitted
_loq.push(['tag', 'Submitted Contact Form']);

// Tag when purchase completed
_loq.push(['tag', 'Completed Purchase']);

Custom Data for Events

Record event-related information:

// Track cart activity
_loq.push(['custom', {
  last_action: 'added_to_cart',
  cart_value: 149.99,
  cart_items: 3,
  timestamp: new Date().toISOString()
}]);

// Track feature usage
_loq.push(['custom', {
  feature_used: 'advanced_search',
  usage_count: user.searchCount,
  last_used: Date.now()
}]);

Common Event Patterns

Button Click Tracking

document.querySelectorAll('button.track').forEach(button => {
  button.addEventListener('click', function() {
    window._loq = window._loq || [];
    _loq.push(['tag', 'Clicked: ' + this.textContent]);
  });
});

// Example: Track specific button
document.getElementById('signup-btn').addEventListener('click', function() {
  _loq.push(['tag', 'Signup Button Clicked']);
  _loq.push(['custom', { signup_intent: true }]);
});

Form Submission Tracking

document.querySelector('form#contact').addEventListener('submit', function(e) {
  window._loq = window._loq || [];

  _loq.push(['tag', 'Contact Form Submitted']);
  _loq.push(['custom', {
    form_id: 'contact',
    form_type: 'lead_generation',
    submitted_at: new Date().toISOString()
  }]);
});

Page Interaction Tracking

// Track video play
document.querySelector('video').addEventListener('play', function() {
  _loq.push(['tag', 'Video Played']);
  _loq.push(['custom', { video_title: this.title }]);
});

// Track file downloads
document.querySelectorAll('a[download]').forEach(link => {
  link.addEventListener('click', function() {
    _loq.push(['tag', 'Downloaded File']);
    _loq.push(['custom', {
      file_name: this.download,
      file_type: this.href.split('.').pop()
    }]);
  });
});

E-commerce Tracking

// Add to cart
function trackAddToCart(product) {
  _loq.push(['tag', 'Added to Cart']);
  _loq.push(['custom', {
    product_id: product.id,
    product_name: product.name,
    price: product.price,
    cart_total: getCartTotal()
  }]);
}

// Checkout started
function trackCheckoutStart() {
  _loq.push(['tag', 'Checkout Started']);
  _loq.push(['custom', {
    cart_value: cart.total,
    item_count: cart.items.length,
    checkout_step: 1
  }]);
}

// Purchase completed
function trackPurchase(order) {
  _loq.push(['tag', 'Purchase Completed']);
  _loq.push(['custom', {
    order_id: order.id,
    order_total: order.total,
    items: order.items.length,
    payment_method: order.paymentMethod
  }]);
}

Integration with Form Analytics

Lucky Orange automatically tracks form fields. Enhance with custom events:

// Track form abandonment
let formStarted = false;

document.querySelector('form').addEventListener('focus', function() {
  if (!formStarted) {
    _loq.push(['tag', 'Form Started']);
    _loq.push(['custom', { form_start_time: Date.now() }]);
    formStarted = true;
  }
}, true);

// Track specific field interactions
document.getElementById('email').addEventListener('blur', function() {
  if (this.value) {
    _loq.push(['custom', { email_entered: true }]);
  }
});

Advanced Event Tracking

Time-Based Events

// Track time on page
let pageLoadTime = Date.now();

window.addEventListener('beforeunload', function() {
  let timeOnPage = (Date.now() - pageLoadTime) / 1000;

  _loq.push(['custom', {
    time_on_page_seconds: timeOnPage
  }]);

  if (timeOnPage > 180) {
    _loq.push(['tag', 'Long Page Visit']);
  }
});

Scroll Depth Tracking

let maxScroll = 0;
let scrollMilestones = [25, 50, 75, 100];
let trackedMilestones = [];

window.addEventListener('scroll', function() {
  let scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;

  maxScroll = Math.max(maxScroll, scrollPercent);

  scrollMilestones.forEach(milestone => {
    if (scrollPercent >= milestone && !trackedMilestones.includes(milestone)) {
      _loq.push(['tag', `Scrolled ${milestone}%`]);
      _loq.push(['custom', { max_scroll_depth: milestone }]);
      trackedMilestones.push(milestone);
    }
  });
});

Error Tracking

window.addEventListener('error', function(e) {
  _loq.push(['tag', 'JavaScript Error']);
  _loq.push(['custom', {
    error_message: e.message,
    error_file: e.filename,
    error_line: e.lineno
  }]);
});

Use Case Examples

SaaS Application

// Feature activation
function trackFeatureActivation(featureName) {
  _loq.push(['tag', `Activated: ${featureName}`]);
  _loq.push(['custom', {
    feature_name: featureName,
    activated_at: new Date().toISOString()
  }]);
}

// Trial conversion
function trackTrialConversion(plan) {
  _loq.push(['tag', 'Trial Converted']);
  _loq.push(['custom', {
    converted_to_plan: plan,
    trial_duration_days: calculateTrialDuration(),
    conversion_date: new Date().toISOString()
  }]);
}

Content Site

// Article read completion
function trackArticleRead(article) {
  _loq.push(['tag', 'Article Read']);
  _loq.push(['custom', {
    article_id: article.id,
    article_title: article.title,
    read_time_seconds: article.readTime
  }]);
}

// Newsletter signup
document.querySelector('#newsletter-form').addEventListener('submit', function() {
  _loq.push(['tag', 'Newsletter Signup']);
  _loq.push(['custom', {
    signup_location: window.location.pathname,
    signup_source: 'inline_form'
  }]);
});

Viewing Event Data

In Lucky Orange Dashboard

1. Recordings Section:

   • Filter by tags to find specific events
   • Tags appear as labels on recordings
   • Search for tagged sessions

2. Visitor Profiles:

   • View all custom data for visitor
   • See tags applied to sessions
   • Track visitor behavior over time

3. Form Analytics:

   • Automatic form interaction tracking
   • See abandonment points
   • View field-level analytics

Best Practices

1. Descriptive Tags: Use clear, consistent tag names
2. Avoid Over-Tagging: Tag only meaningful actions
3. Combine with Custom Data: Add context to tags
4. Test Implementation: Verify tags appear in dashboard
5. Document Events: Maintain list of tracked events
6. Privacy Compliance: Don't tag sensitive actions
7. Use Recordings: Watch sessions to understand context

Troubleshooting

Summary

Lucky Orange focuses on session recordings rather than discrete event tracking. Use tags and custom data to:

1. Mark important visitor actions
2. Segment recordings for analysis
3. Add context to visitor sessions
4. Filter and search recordings
5. Track conversion points
6. Monitor user engagement

For traditional event analytics, combine Lucky Orange with dedicated analytics platforms like Google Analytics or Mixpanel.