Crazy Egg Setup & Implementation

How Crazy Egg Works

Crazy Egg records visual user behavior data — where people click, how far they scroll, and what they look at. Unlike traditional analytics (GA4, Adobe) that track events and dimensions, Crazy Egg generates visual overlays on your actual pages.

Core features:

• Heatmaps — Click density visualization showing where users click most.
• Scroll maps — Color gradient showing how far down the page users scroll before leaving.
• Confetti reports — Individual clicks broken down by referral source, search term, or device.
• Session recordings — Full video playback of individual user sessions.
• A/B testing — Visual editor for testing page variations without code changes.

Installation

Script Deployment

Add the Crazy Egg tracking script before </head>. The script is unique per account — copy yours from Crazy Egg Dashboard → Install Script:

<script type="text/javascript">
  setTimeout(function(){
    var a=document.createElement("script");
    var b=document.getElementsByTagName("script")[0];
    a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/XXXX/XXXX.js";
    a.async=true;a.type="text/javascript";
    b.parentNode.insertBefore(a,b)
  }, 1);
</script>

The setTimeout wrapper delays loading by 1ms so the script doesn't compete with critical page resources. Crazy Egg's script is ~20KB and loads asynchronously, so performance impact is minimal.

Replace XXXX/XXXX with your account-specific path — this is provided in your Crazy Egg dashboard, not a universal snippet.

Google Tag Manager

1. In GTM → Tags → New → Custom HTML.
2. Paste the Crazy Egg script (without <script> tags — GTM wraps them).
3. Set trigger to All Pages (or specific page groups for targeted tracking).
4. Preview and test — verify the script loads using Crazy Egg's bookmarklet checker.
5. Publish.

GTM advantage: You can trigger Crazy Egg only on pages you're actively studying (e.g., landing pages, checkout flows) to stay within your plan's pageview limits.

WordPress

Install the Crazy Egg for WordPress plugin from the WordPress plugin directory. Enter your Crazy Egg account number in Settings → Crazy Egg. The plugin automatically injects the script on all pages.

Configuring Snapshots

Snapshots are the core unit of measurement in Crazy Egg. Each snapshot tracks one specific page URL and generates heatmap, scroll map, and confetti data.

Creating a Snapshot

1. Go to Dashboard → Snapshots → New Snapshot.
2. Enter the exact URL to track (e.g., https://example.com/pricing).
3. Configure snapshot settings:
   • Name: Descriptive label (e.g., "Pricing Page - March 2025").
   • Pageviews to track: How many visits to record before the snapshot completes (default: 5,000). More visits = more statistically reliable data.
   • Duration: Set an end date or let it run until the pageview target is reached.
4. Click Start — data begins collecting immediately.

Snapshot Best Practices

• Track high-impact pages first: Homepage, pricing page, signup flow, checkout, and landing pages for active campaigns.
• Use enough pageviews: 1,000 visits minimum for heatmap reliability. For A/B tests, follow standard sample size calculations (typically 2,500–10,000 per variant).
• Avoid tracking every page: Crazy Egg plans have pageview limits. Focus snapshots on pages where you're making design decisions.
• Name consistently: Use a format like "Page Name - Date - Context" (e.g., "Checkout - 2025-03 - Post-redesign") so you can compare snapshots over time.

Dynamic Page Tracking

For pages with variable content (search results, product pages, user dashboards):

https://example.com/products/*

Use wildcard URLs in snapshot configuration to aggregate heatmap data across all pages matching the pattern. This is useful for category pages, product detail pages, or any template-driven content.

Session Recordings

Session recordings capture full mouse movement, scroll behavior, clicks, and page transitions for individual visitors.

Setup: Dashboard → Recordings → enable recording for your site. Configure:

• Recording sample rate: Record a percentage of visits to stay within plan limits.
• Page targeting: Record only specific pages (recommended) or all pages.
• Minimum session length: Filter out bounces by setting a minimum duration (e.g., 5 seconds).

Privacy: Crazy Egg automatically masks form input fields (passwords, credit cards). For additional privacy, add the data-recording-sensitive attribute to any element you want masked:

<div data-recording-sensitive>
  This content will be hidden in recordings
</div>

A/B Testing

Crazy Egg's A/B testing uses a visual editor — no code required for basic tests.

Creating a Test

1. Dashboard → A/B Test → New Test.
2. Enter the page URL to test.
3. Use the visual editor to create a variant:
   • Change text, colors, button labels, images.
   • Move, hide, or resize elements.
   • Add custom CSS or JavaScript for advanced changes.
4. Set traffic split (default: 50/50).
5. Choose a goal: clicks on a specific element, page visits, or external URL visits.
6. Start the test.

A/B Test Considerations

• Statistical significance: Crazy Egg shows a confidence percentage. Wait for 95%+ confidence before declaring a winner (99% for high-stakes changes).
• Test duration: Run tests for at least 2 full business cycles (typically 2–4 weeks) to account for day-of-week and time-of-day variations.
• One change per test: Changing multiple elements simultaneously makes it impossible to attribute the result. Use multivariate testing (not available in Crazy Egg) for multiple simultaneous changes.
• Don't peek: Checking results daily and stopping early inflates false positive rates. Set a sample size target and let it run.

SPA Tracking

Single-page applications (React, Vue, Angular) require manual page tracking since Crazy Egg's script only fires on full page loads:

// After each client-side route change:
if (typeof CE2 !== 'undefined') {
  CE2.refresh();
}

// React Router example
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function CrazyEggTracker() {
  const location = useLocation();
  useEffect(() => {
    if (typeof CE2 !== 'undefined') CE2.refresh();
  }, [location]);
  return null;
}

Detailed Guides

• Install Tracking Code — deployment methods and environment configuration
• Event Tracking Setup — custom event tracking beyond snapshots
• Data Layer Setup — integrating with data layer for enriched tracking
• Server-Side vs Client-Side — architectural considerations

Verification

After installation, verify Crazy Egg is working:

1. Bookmarklet checker: Dashboard → Install → "Check Installation" bookmarklet. Drag it to your bookmarks bar, then visit your site and click it. It reports whether the script loaded correctly.
2. Browser DevTools: Network tab → filter for crazyegg → verify the script loads with a 200 response.
3. Dashboard activity: Within minutes of visiting a tracked page, you should see pageview counts increasing in your snapshot or recording dashboard.
4. Common failure: The script loads but the snapshot URL doesn't match your actual page URL (trailing slashes, www vs. non-www, HTTP vs. HTTPS). Crazy Egg is exact-match on URLs unless you use wildcards.