How to Integrate Lovable with Crazy Egg

Crazy Egg's heatmap tracking starts with a single script tag in your HTML head. Log in to your Crazy Egg account at app.crazyegg.com. To find your Account ID, click your name in the top-right corner and select Account Settings, then look for the 'Tracking Code' or 'Installation Code' section. You will see a script tag that looks like this: script type='text/javascript' src='//script.crazyegg.com/pages/scripts/0012/3456.js' async='async' — the numbers in the URL path (0012/3456 in this example) form your Account ID. The format is a 4-digit number followed by another 4-digit number, separated by a slash. In your Lovable project, ask Lovable to add the Crazy Egg script to your index.html file. The script must be placed in the HTML head section for reliable loading. The script tag should use the async attribute to prevent blocking page rendering. Use the VITE_CRAZY_EGG_ACCOUNT_ID environment variable if you want to configure the Account ID through environment variables, though since it is a public identifier, hardcoding it in the script URL is also acceptable. After adding the script, go to your Lovable project's Cloud tab, click Secrets, and add VITE_CRAZY_EGG_ACCOUNT_ID with your Account ID value. For API access (used in the Edge Function for programmatic data access), also add CRAZY_EGG_API_KEY if you have one from account settings. Verify the script is loading correctly by opening your app in the browser and checking the Network tab in developer tools — you should see a request to script.crazyegg.com that returns HTTP 200. In Crazy Egg's dashboard, go to Snapshots → Add New Snapshot and enter your app's URL. Crazy Egg will begin recording visitor clicks when users visit the page, building up the heatmap data over time.

1// src/types/crazyegg.d.ts
2declare global {
3  interface Window {
4    CE2?: {
5      set: (key: string, value: string | number | boolean) => void;
6      identify: (email: string) => void;
7      event: (event_name: string) => void;
8    };
9    ce2?: {
10      ready: (callback: () => void) => void;
11    };
12  }
13}
14
15export {};

Crazy Egg's default behavior tracks a new 'page view' when the browser URL changes via a full page reload. In a React Router single-page application, route changes happen without full page reloads — Crazy Egg needs to be notified of route changes to correctly separate heatmap data by route, rather than aggregating all clicks into a single snapshot for the initial page load URL. Crazy Egg has built-in SPA support that can be enabled in your snapshot settings. In Crazy Egg's dashboard, go to your snapshot and look for 'Advanced Settings' or 'SPA Tracking' options. Enable the 'Track SPA' or 'Hash and History URL changes' option. This instructs the Crazy Egg script to listen for History API pushState events (which React Router uses for navigation) and automatically start a new snapshot session when the path changes. If automatic SPA detection does not work for your specific React Router configuration, you can manually notify Crazy Egg of route changes using the CE2 JavaScript API. Create a React hook that listens to React Router's location changes and calls the Crazy Egg API method to signal a new page view. This is similar to the GA4 pageview hook pattern. For apps with dynamic routes (like /projects/123 versus /projects/456 — different projects but the same component), you may want to configure Crazy Egg snapshots to use URL patterns rather than exact URLs. In Crazy Egg's snapshot configuration, you can set the URL to include wildcards like /projects/* to aggregate heatmap data across all project pages into a single snapshot. This gives more clicks per snapshot for better heatmap accuracy, at the cost of not differentiating between specific dynamic pages. Create separate snapshots for each important page in your Lovable app: the landing page, the main feature page, the pricing page, the settings page, and the checkout flow steps. Configure each snapshot with the correct URL, enable SPA tracking, and set a meaningful name so you can identify them in the dashboard.

1// src/hooks/useCrazyEgg.ts
2import { useEffect } from 'react';
3import { useLocation } from 'react-router-dom';
4
5export function useCrazyEgg() {
6  const location = useLocation();
7
8  useEffect(() => {
9    // Notify Crazy Egg of SPA route changes
10    // CE2 may not be initialized on first load — the async script handles the initial page
11    if (typeof window !== 'undefined' && window.CE2) {
12      window.CE2.event('SPA Page View');
13    }
14  }, [location.pathname]);
15}
16
17// Optional: identify authenticated users in Crazy Egg recordings
18export function identifyCrazyEggUser(email: string) {
19  if (typeof window !== 'undefined' && window.CE2) {
20    window.CE2.identify(email);
21  }
22}

Crazy Egg's A/B testing feature allows you to test visual variations of page elements — button text, colors, sizes, positions — without modifying your Lovable codebase. Crazy Egg injects the variation JavaScript through its own CDN, and your Lovable app only needs the tracking script to be installed. To create an A/B test in Crazy Egg, go to app.crazyegg.com → A/B Tests → Create New Test. Select the URL of the page you want to test. Crazy Egg opens a visual editor showing your page as it would appear to visitors. Use the editor to select an element — for example, the main CTA button — and define the variation: change the button text from 'Start Free Trial' to 'Get Started Free', or change the button color from gray to blue. Define your test goal: typically a click on the CTA button itself, a form submission, or navigation to a specific URL (like a signup confirmation page). Crazy Egg will track which variant achieves higher goal completion rates. Set the traffic split — the default 50/50 split is recommended for most tests. Crazy Egg A/B tests are activated and deactivated entirely from Crazy Egg's dashboard — no code changes are needed in your Lovable app after the initial script installation. This is the key advantage: your development team does not need to create feature flags or deploy code changes for each marketing test. When a test concludes, implement the winning variant permanently in Lovable. For monitoring A/B test results inside your Lovable app (without opening Crazy Egg's dashboard), create a Supabase Edge Function that fetches test performance data from Crazy Egg's API. This is only available on certain Crazy Egg plan tiers — check whether your plan includes API access before building this.

1// supabase/functions/crazy-egg-data/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9serve(async (req) => {
10  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
11
12  try {
13    const apiKey = Deno.env.get('CRAZY_EGG_API_KEY');
14    if (!apiKey) {
15      return new Response(JSON.stringify({ error: 'CRAZY_EGG_API_KEY not configured' }), {
16        status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
17      });
18    }
19
20    const { resource = 'snapshots' } = req.method === 'POST'
21      ? await req.json().catch(() => ({}))
22      : {};
23
24    // Crazy Egg API uses Basic auth with API key
25    const credentials = btoa(`${apiKey}:`);
26    let apiUrl = 'https://app.crazyegg.com/api';
27
28    if (resource === 'snapshots') {
29      apiUrl += '/snapshots';
30    } else if (resource === 'abtests') {
31      apiUrl += '/abtests';
32    } else {
33      return new Response(JSON.stringify({ error: 'Invalid resource' }), {
34        status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
35      });
36    }
37
38    const response = await fetch(apiUrl, {
39      headers: {
40        'Authorization': `Basic ${credentials}`,
41        'Accept': 'application/json',
42      },
43    });
44
45    if (!response.ok) {
46      const errorText = await response.text();
47      console.error('Crazy Egg API error:', response.status, errorText);
48      return new Response(
49        JSON.stringify({ error: `Crazy Egg API returned ${response.status}`, detail: errorText }),
50        { status: response.status, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
51      );
52    }
53
54    const data = await response.json();
55    return new Response(JSON.stringify(data), {
56      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
57    });
58  } catch (error) {
59    return new Response(JSON.stringify({ error: String(error) }), {
60      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
61    });
62  }
63});