Lucky Orange Event Tracking

Event Tracking Overview

Lucky Orange automatically captures most user interactions including clicks, form submissions, and page navigations. However, you can enhance your analytics by adding custom events, visitor tags, and ratings to track specific business goals and segment your audience for more targeted analysis.

Automatic Event Tracking

Lucky Orange automatically tracks these interactions without additional code:

Clicks: All click events on buttons, links, and interactive elements
Form Interactions: Form field focus, input, validation errors, and submissions
Page Views: Navigation between pages and single-page app route changes
Rage Clicks: Repeated rapid clicks indicating frustration
Dead Clicks: Clicks on non-interactive elements
Scroll Events: Scroll depth and pattern on each page
Mouse Movement: Cursor movement patterns for heatmaps

Custom Event Tracking

Track specific business events using the Lucky Orange queue:

Basic Event Syntax

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

// Track a simple event
_loq.push(['tag', 'Event Name']);

// Track with a value
_loq.push(['tag', 'Purchase', 99.99]);

Common Event Patterns

Conversion Events:

// Signup completed
_loq.push(['tag', 'Signup Completed']);

// Purchase
_loq.push(['tag', 'Purchase', orderTotal]);

// Trial started
_loq.push(['tag', 'Trial Started', 'Pro Plan']);

// Subscription
_loq.push(['tag', 'Subscription', 'Monthly']);

Engagement Events:

// Video playback
_loq.push(['tag', 'Video Played', 'Product Demo']);

// Download
_loq.push(['tag', 'Download', 'Whitepaper.pdf']);

// Feature usage
_loq.push(['tag', 'Feature Used', 'Export']);

// Share action
_loq.push(['tag', 'Content Shared', 'Twitter']);

Form Events:

// Form started
_loq.push(['tag', 'Form Started', 'Contact Sales']);

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

// Form abandoned
_loq.push(['tag', 'Form Abandoned', 'Contact Sales']);

Visitor Tagging

Tag visitors to segment them for filtering sessions and creating targeted analyses:

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

// Tag by user type
_loq.push(['tag', 'Premium User']);
_loq.push(['tag', 'Trial User']);
_loq.push(['tag', 'Free Plan']);

// Tag by behavior
_loq.push(['tag', 'Repeat Visitor']);
_loq.push(['tag', 'High Value Customer']);
_loq.push(['tag', 'Support Ticket Open']);

// Tag by characteristics
_loq.push(['tag', 'Enterprise Client']);
_loq.push(['tag', 'Power User']);
_loq.push(['tag', 'At Risk']);

Using Tags for Filtering

Once tagged, filter recordings and heatmaps to view only:

Sessions from premium users
Recordings of users who encountered errors
Heatmaps from trial users
Visitors who completed specific actions

Star Ratings

Add visitor ratings to track sentiment or importance:

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

// Rate visitor from 1-5 stars
_loq.push(['star', 5]); // High value visitor
_loq.push(['star', 1]); // Low engagement visitor

// Use in session recordings to prioritize which sessions to review

Custom Data and Attributes

Pass custom data to enrich visitor profiles:

// Set custom visitor data
window._loq = window._loq || [];
_loq.push(['custom', {
  user_id: '12345',
  plan: 'Enterprise',
  signup_date: '2024-01-15',
  mrr: 299,
  role: 'Admin'
}]);

// This data appears in session recordings and can be used for filtering

E-commerce Tracking

Track e-commerce events for conversion analysis:

// Product viewed
_loq.push(['tag', 'Product Viewed', productName]);

// Added to cart
_loq.push(['tag', 'Add to Cart', productName, price]);

// Removed from cart
_loq.push(['tag', 'Remove from Cart', productName]);

// Checkout started
_loq.push(['tag', 'Checkout Started', cartTotal]);

// Purchase completed
_loq.push(['tag', 'Purchase Completed', orderTotal]);

Event Timing

Track events at specific moments in the user journey:

// On page load
window._loq = window._loq || [];
_loq.push(['tag', 'Page Loaded', window.location.pathname]);

// On user action
document.getElementById('cta-button').addEventListener('click', function() {
  _loq.push(['tag', 'CTA Clicked', 'Homepage Hero']);
});

// On form submission
document.getElementById('signup-form').addEventListener('submit', function(e) {
  _loq.push(['tag', 'Signup Form Submitted']);
});

// On exit intent
document.addEventListener('mouseout', function(e) {
  if (e.clientY < 0) {
    _loq.push(['tag', 'Exit Intent Triggered']);
  }
});

Integration with Live Chat

Track chat interactions as events:

// Chat initiated
_loq.push(['tag', 'Chat Started']);

// Chat message sent
_loq.push(['tag', 'Chat Message Sent']);

// Chat ended
_loq.push(['tag', 'Chat Ended', chatDuration]);

Best Practices

Event Naming Conventions

// Good - Descriptive and consistent
_loq.push(['tag', 'Newsletter Subscription']);
_loq.push(['tag', 'Premium Upgrade']);
_loq.push(['tag', 'Report Downloaded']);

// Avoid - Vague or inconsistent
_loq.push(['tag', 'click']);
_loq.push(['tag', 'event1']);
_loq.push(['tag', 'Thing']);

Strategic Event Placement

// Track micro-conversions leading to main conversion
_loq.push(['tag', 'Pricing Page Visited']);
_loq.push(['tag', 'Plan Comparison Viewed']);
_loq.push(['tag', 'FAQ Expanded']);
_loq.push(['tag', 'Signup Button Clicked']);
_loq.push(['tag', 'Account Created']); // Main conversion

Viewing Event Data

Access tracked events in Lucky Orange:

Recordings: See events as markers in session recordings timeline
Conversions: Filter recordings by events to see visitor journeys
Funnels: Build conversion funnels with custom events
Dashboards: Add event metrics to custom dashboards
Filters: Filter sessions by specific events or tags

Event Validation

Test that events are firing correctly:

// Add console logging during development
window._loq = window._loq || [];
console.log('Tracking event:', 'Purchase Completed');
_loq.push(['tag', 'Purchase Completed', orderTotal]);

// Check browser network tab for requests to Lucky Orange
// Events should appear in recordings within seconds

Common Use Cases

A/B Testing:

// Track which variant user sees
const variant = getABTestVariant();
_loq.push(['tag', 'AB Test', variant]);
_loq.push(['tag', 'Variant ' + variant + ' Shown']);

Error Tracking:

// Track errors users encounter
window.addEventListener('error', function(e) {
  _loq.push(['tag', 'JavaScript Error', e.message]);
});

// Form validation errors
_loq.push(['tag', 'Form Error', fieldName]);

Feature Flags:

// Track which features users have enabled
if (hasFeatureAccess('advanced_reports')) {
  _loq.push(['tag', 'Advanced Reports Enabled']);
}

Related Resources: