Lucky Orange Setup | Blue Frog Docs

Lucky Orange Setup

Set up Lucky Orange analytics.

Implementation Overview

Lucky Orange is a comprehensive conversion optimization and customer experience platform featuring session recordings, heatmaps, live chat, form analytics, and visitor tracking. This guide walks you through implementing Lucky Orange to gain deep insights into visitor behavior and improve website performance.

 

 

What Lucky Orange Provides

Core Features

  • Session Recordings: Watch full visitor sessions to understand behavior
  • Heatmaps: Visualize clicks, scrolls, and mouse movements
  • Form Analytics: Identify form abandonment and friction points
  • Live Chat: Engage visitors in real-time
  • Conversion Funnels: Track user journeys through your site
  • Visitor Profiles: View individual visitor history and data
  • Polls & Surveys: Collect direct user feedback
  • Announcements: Display targeted messages to visitors

 

 

Prerequisites

Before implementing Lucky Orange:

  • Lucky Orange Account: Sign up at luckyorange.com
  • Site ID: Located in Settings → Code Installation
  • Website Access: Ability to add JavaScript to your site
  • Domain Verification: Ensure domain is added to your account
  • Plan Selection: Choose appropriate plan for your traffic volume

 

 

Quick Start

Step 1: Create Account

  1. Visit luckyorange.com
  2. Click Sign Up or Start Free Trial
  3. Enter your business email
  4. Complete registration process
  5. Verify your email address

Step 2: Add Your Website

  1. Log into Lucky Orange dashboard
  2. Click Add Site or navigate to Settings
  3. Enter your website URL
  4. Select your website platform (WordPress, Shopify, Custom, etc.)
  5. Copy your unique Site ID

Step 3: Install Tracking Code

Add the Lucky Orange script before the closing </head> tag:

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

Replace YOUR_SITE_ID with your actual Site ID.

Step 4: Verify Installation

  1. Save and publish your website changes
  2. Visit your website in a browser
  3. Navigate to Lucky Orange dashboard → Recordings
  4. Your visit should appear within minutes
  5. Check browser console for any errors

 

 

Installation Methods

Direct HTML Installation

For custom websites or platforms with direct HTML access:

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

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

WordPress Installation

Using Official Plugin:

  1. Go to Plugins → Add New in WordPress admin
  2. Search for "Lucky Orange"
  3. Install and activate the plugin
  4. Enter your Site ID in Settings → Lucky Orange
  5. Save changes

Manual Installation:

  1. Go to Appearance → Theme Editor
  2. Edit header.php
  3. Add Lucky Orange script before </head>
  4. Save changes

Shopify Installation

  1. From Shopify admin, go to Online Store → Themes
  2. Click Actions → Edit code
  3. Open theme.liquid
  4. Paste Lucky Orange script before </head>
  5. Save changes
  6. Or use Lucky Orange app from Shopify App Store

Google Tag Manager

  1. Create new Tag in GTM
  2. Choose Custom HTML tag type
  3. Paste Lucky Orange script
  4. Set trigger to All Pages
  5. Save and publish container
<!-- Lucky Orange via GTM -->
<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>

Other Platforms

Squarespace: Settings → Advanced → Code Injection → Header

Wix: Settings → Custom Code → Add Code to Header

Webflow: Project Settings → Custom Code → Head Code

BigCommerce: Storefront → Script Manager → Create Script

 

 

Configuration Options

Basic Configuration

Lucky Orange works immediately after installation with default settings. Optional configuration:

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

// Set visitor properties
_loq.push(['custom', {
  name: 'John Doe',
  email: 'john@example.com',
  plan: 'professional'
}]);

// Add tags
_loq.push(['tag', 'Premium Customer']);

// Trigger events
_loq.push(['track', 'Button Clicked']);

Privacy Settings

Configure privacy options in dashboard:

  1. Go to Settings → Privacy
  2. Configure:
    • IP Anonymization: Mask visitor IP addresses
    • Data Retention: Set recording retention period
    • Block Sensitive Data: Exclude form fields (credit cards, passwords)
    • GDPR Compliance: Enable consent management
    • Do Not Track: Respect DNT browser setting

 

 

Testing Your Implementation

Verify Tracking

Browser Console Check:

  1. Open browser DevTools (F12)
  2. Go to Console tab
  3. Look for Lucky Orange initialization messages
  4. No errors should appear

Network Tab Check:

  1. Open DevTools → Network tab
  2. Filter for "luckyorange"
  3. Verify lo.js loads successfully
  4. Check for 200 status code

Dashboard Verification:

  1. Visit your website
  2. Navigate to Lucky Orange dashboard
  3. Go to Recordings → Live
  4. Your current session should appear
  5. Verify recording is capturing properly

Test Core Features

Session Recordings:

  • Visit several pages on your site
  • Perform various actions (clicks, scrolls)
  • Check dashboard for recorded session

Heatmaps:

  • Generate several page views
  • Check Heatmaps section for data collection

Form Analytics:

  • Submit a form on your site
  • Verify form appears in Form Analytics

Live Chat:

  • Enable chat widget in settings
  • Verify chat appears on your site

 

 

Common Setup Issues

Issue Cause Solution
No recordings appearing Incorrect Site ID Verify Site ID in script matches dashboard
Script not loading Blocked by ad blocker Test in incognito mode
Recordings missing pages Tracking not on all pages Ensure script on all pages via master template
Chat not showing Chat widget disabled Enable in Settings → Chat
High bounce rate shown Immediate exits Normal for some traffic sources
Recordings stopped Plan limit reached Upgrade plan or adjust retention

 

 

Performance Considerations

Load Time Impact

Lucky Orange is optimized for minimal performance impact:

  • Async Loading: Script loads asynchronously
  • Deferred Execution: Non-blocking implementation
  • CDN Delivery: Fast global content delivery
  • Compressed Assets: Minimized file sizes

Best Practices

  1. Use Async/Defer: Already included in recommended script
  2. Header Placement: Install in <head> for full session capture
  3. Single Installation: Install once in master template
  4. Monitor Performance: Use browser tools to verify minimal impact
  5. Optimize Recording: Adjust recording quality if needed

 

 

Recording Limits

Plan-Based Limits

Recordings are limited based on your plan:

Plan Monthly Recordings Retention
Free Trial 500 7 days
Starter 5,000 30 days
Growth 25,000 60 days
Business 100,000 90 days
Enterprise Custom Custom

Note: Limits may vary. Check your plan details in Settings → Billing.

 

 

Privacy & Compliance

GDPR Compliance

  1. Enable Consent Mode in Settings → Privacy
  2. Only track visitors who consent
  3. Implement consent banner on your site
  4. Use Lucky Orange consent API:
// Grant consent
_loq.push(['consent', true]);

// Revoke consent
_loq.push(['consent', false]);

Data Protection

  • Sensitive Data Blocking: Automatically masks passwords, credit cards
  • Custom Field Blocking: Specify additional fields to block
  • IP Anonymization: Mask visitor IP addresses
  • Data Retention: Auto-delete old recordings
  • Data Export: Export or delete user data on request

 

 

Next Steps

After basic installation:

 

 

Getting Help

Support Resources

Additional Configuration

After verifying installation:

  1. Enable Features: Activate heatmaps, polls, chat
  2. Set Up Funnels: Define conversion paths
  3. Configure Filters: Organize recordings
  4. Customize Chat: Brand chat widget
  5. Integrate Tools: Connect CRM and marketing tools
↑ Back to top
// SYS.FOOTER