Lucky Orange Tracking Approaches | Blue Frog Docs

Lucky Orange Tracking Approaches

Lucky Orange tracking methodology.

Tracking Approach Overview

Lucky Orange is exclusively a client-side tracking platform. Unlike traditional analytics platforms that offer both client and server-side SDKs, Lucky Orange requires browser execution to capture its core features: session recordings, heatmaps, and visual analytics.

 

 

Client-Side Only

Why Client-Side Only

Lucky Orange's primary features require browser execution:

Session Recordings:

  • Captures DOM interactions
  • Records mouse movements
  • Tracks scroll behavior
  • Monitors clicks and taps
  • Records form interactions

Heatmaps:

  • Maps click positions
  • Tracks mouse movement patterns
  • Records scroll depth
  • Captures touch interactions (mobile)

Form Analytics:

  • Monitors field interactions
  • Tracks abandonment points
  • Records field-level engagement

Live Chat:

  • Real-time visitor engagement
  • Proactive chat triggers
  • Visitor identification

All these features require JavaScript execution in the visitor's browser.

 

 

Implementation

Standard Installation

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>

  <!-- Lucky Orange - Client-Side Only -->
  <script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>
</head>
<body>
  <!-- Your content -->
</body>
</html>

With Custom Data (Still Client-Side)

<head>
  <script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=abc123"></script>

  <script>
    window._loq = window._loq || [];

    // Identify visitor (client-side)
    if (currentUser) {
      _loq.push(['custom', {
        user_id: currentUser.id,
        email: currentUser.email,
        plan: currentUser.plan
      }]);
    }
  </script>
</head>

 

 

No Server-Side SDK

Limitations

Lucky Orange does not provide:

  • Server-side tracking libraries
  • Backend SDKs (Node.js, Python, Ruby, PHP)
  • API for pushing events server-side
  • Mobile app SDKs (iOS, Android native)

Implications

Cannot Track:

  • Server-only events (cron jobs, background processes)
  • Backend API calls (without browser)
  • Mobile app interactions (native)
  • Webhook events
  • Server-side transactions

Must Use Client-Side For:

  • All visitor tracking
  • Session recordings
  • Heatmap generation
  • Form analytics
  • Live chat

 

 

Hybrid Approach with Other Tools

Combining with Analytics Platforms

Use Lucky Orange for visual analytics and other tools for comprehensive tracking:

Lucky Orange (Client-Side):

<!-- Session recordings & heatmaps -->
<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=abc123"></script>

<script>
  window._loq = window._loq || [];
  _loq.push(['tag', 'Premium User']);
</script>

Google Analytics (Client + Server):

// Client-side pageview
gtag('event', 'page_view');

// Server-side event (Node.js)
await analytics.track({
  userId: user.id,
  event: 'Purchase Completed',
  properties: { revenue: 99.99 }
});

Mixpanel (Client + Server):

// Client-side tracking
mixpanel.track('Button Clicked');

// Server-side tracking (Python)
mixpanel.track(user_id, 'Subscription Renewed')

 

 

When Lucky Orange Works Best

Ideal Use Cases

E-commerce Sites:

✓ Watch checkout process recordings
✓ Identify cart abandonment reasons
✓ Analyze product page engagement
✓ Monitor form completion rates
✓ Live chat with shoppers

Landing Pages:

✓ See where visitors click
✓ Track scroll depth with heatmaps
✓ Watch form interactions
✓ Identify conversion blockers
✓ A/B test visual elements

SaaS Applications:

✓ Watch user onboarding flows
✓ Identify UI/UX issues
✓ Monitor feature adoption
✓ Support users via live chat
✓ Track form completion

Content Websites:

✓ See reading patterns
✓ Monitor scroll engagement
✓ Track navigation clicks
✓ Analyze article performance
✓ Engage readers via chat

 

 

Alternative Solutions for Server-Side

For Backend Event Tracking

Use dedicated analytics platforms:

  1. Google Analytics 4

    • Measurement Protocol API for server events
    • Node.js, Python, PHP libraries

  2. Mixpanel

  3. Segment

    • Universal data pipeline
    • Server-side SDKs + Lucky Orange integration

  4. Amplitude

    • Server-side tracking
    • Behavioral analytics

Implementation Example

// Client-side: Lucky Orange for visual analytics
<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=abc123"></script>

// Server-side: Mixpanel for event analytics
const Mixpanel = require('mixpanel');
const mixpanel = Mixpanel.init('YOUR_TOKEN');

app.post('/api/purchase', async (req, res) => {
  // Process purchase server-side
  const order = await processOrder(req.body);

  // Track server-side event
  mixpanel.track('Purchase Completed', {
    distinct_id: req.user.id,
    order_id: order.id,
    revenue: order.total
  });

  // Client will track with Lucky Orange automatically
  res.json({ success: true });
});

 

 

Mobile App Considerations

Native Mobile Apps

Lucky Orange does not support native mobile apps (iOS/Android):

✗ No iOS SDK
✗ No Android SDK
✗ No React Native SDK
✗ No Flutter plugin

Alternative:

  • Use mobile-specific analytics (Firebase, Amplitude)
  • Consider Lucky Orange for mobile web only
  • Use web views with Lucky Orange for hybrid apps

Mobile Web

Lucky Orange does work on mobile browsers:

✓ Responsive website tracking
✓ Mobile browser recordings
✓ Touch interaction heatmaps
✓ Mobile form analytics
✓ Mobile-optimized chat widget

 

 

Performance Considerations

Client-Side Impact

Because Lucky Orange runs entirely client-side:

Pros:

  • No backend infrastructure needed
  • No server load
  • Simpler implementation
  • Automatic deployment with website

Cons:

  • Adds JavaScript to page load
  • Can be blocked by ad blockers
  • Requires browser execution
  • Subject to client-side limitations

Optimization:

<!-- Recommended: async and defer -->
<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=abc123"></script>

<!-- This ensures non-blocking load -->

 

 

Comparison with Other Platforms

Feature Lucky Orange Google Analytics Mixpanel Heap
Client-Side ✓ ✓ ✓ ✓
Server-Side ✗ ✓ ✓ ✓
Session Recordings ✓ ✗ ✗ ✓
Heatmaps ✓ ✗ ✗ ✓
Live Chat ✓ ✗ ✗ ✗
Mobile SDKs ✗ ✓ ✓ ✓
Backend Events ✗ ✓ ✓ ✓

 

 

Best Practices

  1. Use Lucky Orange for Visual Analytics: Focus on recordings, heatmaps, and chat
  2. Combine with Event Analytics: Use GA4/Mixpanel for comprehensive event tracking
  3. Client-Side Identification: Identify users in browser after authentication
  4. Optimize Loading: Use async/defer attributes
  5. Monitor Performance: Check page load impact
  6. Privacy Compliance: Configure GDPR settings in dashboard
  7. Test on Mobile: Verify mobile web tracking works correctly
  8. Plan for Scale: Consider recording limits on your plan

 

 

Summary

Lucky Orange is a client-side only platform optimized for:

  • Visual behavior analysis (recordings, heatmaps)
  • Real-time visitor engagement (live chat)
  • Form and conversion optimization
  • User experience insights

For comprehensive analytics including server-side events, backend tracking, and mobile apps, combine Lucky Orange with dedicated analytics platforms that offer both client and server-side capabilities.

↑ Back to top
// SYS.FOOTER