# Crazy Egg

- Tool: Bubble
- Difficulty: Beginner
- Time required: 30–60 minutes
- Last updated: July 2026

## TL;DR

Crazy Egg integrates with Bubble almost entirely via a script tag in the HTML header — paste the async tracking script using your public Account ID and heatmap capture starts immediately. The critical Bubble-specific step: enable Single Page Application (SPA) mode in the Crazy Egg dashboard, otherwise all Bubble pages collapse into one heatmap. Crazy Egg's API is limited and undocumented for most plans — treat this as a script-injection integration.

## The #1 Bubble + Crazy Egg mistake: missing SPA mode

Crazy Egg was designed for traditional websites where each page has a unique URL that triggers a full browser reload. Bubble apps are single-page applications — when a user navigates from the dashboard to a settings page, the browser URL may change but the page never reloads. Without Crazy Egg's SPA tracking mode enabled, every interaction across every Bubble page is merged into a single heatmap under the root URL, making the data completely meaningless.

Once SPA mode is enabled, Crazy Egg tracks the window.location URL on each navigation event, giving each distinct Bubble page or state its own heatmap. The integration itself is simple — paste a script tag, enable SPA mode, create Snapshots for each page you want to track, and drive real traffic. Crazy Egg does not require any Bubble workflow setup, custom events, or authentication configuration for basic heatmap capture. The Account ID in the script URL is public by design.

## Before you start

- A Crazy Egg account — Basic plan starts at $29/month; heatmaps and recordings are available on all paid plans
- Your Crazy Egg Account ID — visible in the tracking script URL in your Crazy Egg dashboard under Account → Tracking Code
- A published Bubble app with a live URL (Crazy Egg does not record data in Bubble's editor preview mode)
- Meaningful URL paths in your Bubble app for each page you want to track separately (Bubble's URL routing must produce distinct paths per page)

## Step-by-step guide

### 1. Copy the Crazy Egg tracking script from your dashboard

In your Crazy Egg account, navigate to Account (top-right avatar) → Tracking Code. You will see the asynchronous JavaScript snippet that loads the Crazy Egg recording library. The script src URL contains your unique Account ID in the format: //script.crazyegg.com/pages/scripts/{ACCOUNT_ID}.js. Your Account ID is the numeric or alphanumeric string in that URL — it is visible in the source of any page where the script is installed and is intentionally public. Copy the full script tag, which should be wrapped in async='async' to ensure it loads without blocking your Bubble app's rendering. Do not confuse the Account ID with the Crazy Egg API key (which is a separate credential available only on Plus and higher plans, used for programmatic snapshot data access). The Account ID in the script tag is all you need for heatmap and recording capture.

```
<script type="text/javascript" src="//script.crazyegg.com/pages/scripts/YOUR_ACCOUNT_ID.js" async="async"></script>
```

**Expected result:** You have the tracking script tag copied with your actual Account ID. The format should be a single script tag referencing crazyegg.com with your ID in the URL.

### 2. Add the tracking script to Bubble's HTML header

In your Bubble editor, go to Settings (gear icon in the left sidebar) → SEO / metatags → Script / meta tags in header. In the large text area at the bottom of this section, paste the Crazy Egg script tag you copied in the previous step. This section accepts raw HTML, so paste the complete script tag. Bubble injects this script on every page of your app automatically — you do not need to add it to each Bubble page individually. The script loads asynchronously so it does not delay your Bubble app's rendering. Click Save. Important: the header script only runs in the published (live) app. Bubble's editor preview mode does not execute header scripts in the same environment as the deployed app. After saving, you must publish your Bubble app (click the Publish button) before Crazy Egg can start recording. After publishing, visit the live app URL (not the Bubble editor URL), interact with the page for 30 seconds, and then check Crazy Egg's dashboard. You should see your domain appear in the Snapshots section or the site overview.

**Expected result:** The Crazy Egg script is saved in Bubble's HTML header settings. After publishing and visiting the live app, the script loads successfully as confirmed by browser developer tools.

### 3. Enable Single Page Application (SPA) tracking mode — the critical Bubble step

This step is the most important configuration step for Bubble apps and is the single most common reason Crazy Egg heatmaps are meaningless for Bubble builders. Because Bubble is a single-page application, navigating between pages does not trigger a full browser page load — Crazy Egg's default recording mode assumes each page view is a full reload and collapses all Bubble pages into a single heatmap. In your Crazy Egg account, go to your site settings. Look for the Single Page Application or SPA tracking option. Enable it for your Bubble app's domain. SPA mode instructs Crazy Egg to monitor window.location changes and attribute interactions to the current URL at the time of each click, rather than the initial page URL when the recording session started. After enabling SPA mode, navigate through your Bubble app and verify in Crazy Egg's dashboard that different page URLs appear as separate recording sessions. Without SPA mode, a user who visits your home page, clicks to the dashboard, then clicks a button on the dashboard will show all three interactions as clicks on the home page.

**Expected result:** SPA mode is enabled for your Bubble app's domain in Crazy Egg. Navigating between Bubble pages in the live app creates distinct tracking sessions attributed to each page's URL, rather than all interactions collapsing under the root URL.

### 4. Create Crazy Egg Snapshots for each Bubble page you want to track

Crazy Egg does not automatically create heatmaps for every URL on your site. You must create a Snapshot for each specific URL or URL pattern you want to track. In your Crazy Egg dashboard, click Add New Snapshot. Enter the URL of the Bubble page you want to track — use the exact URL path as it appears in the browser when that page is active. For Bubble apps that use URL paths for navigation (e.g., /dashboard, /settings, /billing), create one Snapshot per path. For Bubble apps that use URL query parameters for page state (e.g., ?page=dashboard), you can match by query parameter. Crazy Egg shows a minimum visit threshold before heatmap data appears — typically 100 visits for a meaningful click map. Create Snapshots proactively for your highest-traffic pages and leave them running for 1-2 weeks before reviewing. Snapshots can be scheduled to record for a fixed time period or continuously. For A/B testing layouts, use scheduled snapshots to compare the 'before' and 'after' periods.

**Expected result:** Snapshots are created for your key Bubble pages. After driving real traffic to the published app, heatmap data begins populating in each Snapshot after 100+ visits.

### 5. Drive real traffic and review heatmap results

Crazy Egg heatmaps require real visitors to your published app — they do not record in Bubble's editor, preview mode, or local testing. For development and validation, you can test by visiting the live published URL yourself, but a single visitor produces limited data. For meaningful heatmaps, you need 100 or more unique visits per Snapshot. Share the live URL with real users, run a small ad campaign, or use a testing service to generate controlled traffic. In Crazy Egg's dashboard, open a Snapshot after traffic accumulates. Switch between the different heatmap views: Click Map (shows where users click), Scroll Map (shows how far users scroll), Confetti (shows individual clicks colored by traffic source or device), and Overlay (shows click counts on each element). For Bubble apps with Repeating Groups, note that Crazy Egg aggregates clicks at the element level but may not distinguish between individual rows in a list — individual row interactions are better tracked with event analytics tools like Mixpanel or Amplitude.

**Expected result:** Crazy Egg Snapshots show populated heatmaps for your Bubble pages after sufficient traffic accumulates. You can identify which elements users click most, where they stop scrolling, and which areas of the page receive no engagement.

### 6. Optional: add an API Connector group for snapshot data access

This step applies only to Crazy Egg Plus plan accounts and above, and only if an API key appears in your Crazy Egg account settings. Crazy Egg's API is not publicly documented on their developer portal — availability and endpoints must be verified in your specific account. If your account includes API access, navigate to your Crazy Egg account settings and look for an 'API' or 'API Keys' section. If it exists, generate an API key. In your Bubble editor, open Plugins → API Connector plugin. Click Add another API and name it 'Crazy Egg API'. Set the base URL to 'https://api.crazyegg.com/v1/' (verify this URL in your account documentation as it is not publicly confirmed). Add a shared header: key 'x-api-key' (or 'Authorization: Bearer' — verify the exact header name in your account documentation), value is your API key, mark as Private. Add a call: GET /snapshots to list all snapshots; GET /snapshots/{id}/data for click data. If the API key section does not appear in your account, do not attempt to integrate via API — treat the integration as script-injection only and use Crazy Egg's dashboard for all data analysis.

```
{
  "method": "GET",
  "url": "https://api.crazyegg.com/v1/snapshots",
  "headers": {
    "x-api-key": "<private: your_crazy_egg_api_key>"
  }
}
```

**Expected result:** If API access is available, the Get Snapshots call initializes successfully and returns a list of your Crazy Egg snapshots. If initialization fails or the API section is absent from your account, skip this step and use Crazy Egg's dashboard directly.

## Best practices

- Enable SPA tracking mode in Crazy Egg before you start any meaningful data collection — doing it after will require you to delete and recreate Snapshots with potentially contaminated data.
- Use meaningful URL paths in your Bubble app for each distinct page. Bubble can be configured to use clean URL paths (e.g., /dashboard, /settings) rather than relying on query parameters, which makes Crazy Egg Snapshot management much simpler.
- Create Snapshots before driving traffic, not after. Crazy Egg only collects data after a Snapshot is created for a specific URL. Pages visited before their Snapshot is created will not have historical heatmap data.
- Wait for at least 100 visits per Snapshot before making layout decisions based on heatmap data. Heatmaps from fewer visits may not represent typical user behavior and can be misleading.
- Use Crazy Egg's Confetti heatmap to segment clicks by traffic source, device type, or new vs. returning visitors. Bubble app users on mobile may interact with your layout very differently than desktop users — review both segments before making changes.
- Do not use Crazy Egg as your only analytics tool. Crazy Egg shows where users click (aggregate) but not who they are or what path they took through your app. Complement Crazy Egg heatmaps with event analytics (Mixpanel, Amplitude) for funnel and cohort analysis.
- If your Bubble app has Repeating Groups that load dynamic data, be aware that Crazy Egg click maps show clicks on the element area but may not clearly distinguish between individual rows. For Repeating Group interaction analysis, custom event tracking is more precise.
- Review Crazy Egg data at regular intervals (weekly or bi-weekly) rather than continuously monitoring. Heatmaps are most valuable after a change is deployed — compare the 'before' Snapshot to the 'after' Snapshot to measure the impact of layout improvements.

## Use cases

### Onboarding flow optimization with heatmaps

Create a Crazy Egg Snapshot for each step of your Bubble onboarding flow (e.g., /step-1, /step-2, /step-3). After accumulating traffic (100+ visits per step), review the click maps to see which onboarding elements users engage with and where they miss the 'Next' button. Combine with scroll maps to see if users are scrolling past critical information. Iterate on layout changes and compare snapshots before and after to measure improvement.

### Landing page conversion analysis

Embed Crazy Egg on your Bubble marketing landing page or pricing page to see where visitors click before converting (or abandoning). The scroll map shows how far down the page visitors read before leaving, revealing whether your value proposition or CTA is below the fold for most visitors. Confetti maps show clicks from different traffic sources (organic, paid, direct) overlaid on the same heatmap.

### Dashboard usability audit

Install Crazy Egg on your Bubble app's main dashboard page and run a Snapshot for two to four weeks. The click heatmap reveals which dashboard elements users interact with most and which are ignored. Scroll maps show whether users are scrolling to content lower on the page. Use this data to prioritize which elements to move above the fold and which to remove or consolidate.

## Troubleshooting

### All Bubble pages show the same heatmap — clicks from the dashboard appear on the home page

Cause: Single Page Application (SPA) mode is not enabled in Crazy Egg for your domain. Bubble is an SPA and Crazy Egg's default mode attributes all interactions during a session to the initial page URL.

Solution: Enable SPA tracking in your Crazy Egg site settings. If you cannot find the option, contact Crazy Egg support and request SPA mode activation for your domain. After enabling, delete and recreate your existing Snapshots to ensure clean data collection — existing snapshots may have contaminated data from before SPA mode was active.

### No heatmap data appears in Crazy Egg even after publishing the Bubble app and visiting it

Cause: Crazy Egg only records in the published live app, not in Bubble's editor or preview environment. Alternatively, the tracking script may have a typo in the Account ID, the script may not be loading (blocked by an ad blocker or browser extension), or the Snapshot URL does not match the actual page URL.

Solution: Confirm the script is loading by opening your live app in a fresh browser tab (not incognito — some ad blockers activate in incognito), pressing F12, going to the Network tab, and filtering for 'crazyegg'. A 200 response confirms loading. If blocked, test in a browser without extensions. Verify your Snapshot URL in Crazy Egg exactly matches the URL shown in the browser address bar when on that Bubble page — including query parameters if your Bubble app uses them.

### Crazy Egg is recording sessions but the Snapshot shows a screenshot of a blank page instead of the actual Bubble app

Cause: Crazy Egg takes a screenshot of the page at the time of the first visit for that Snapshot. If the screenshot was captured before Bubble's app rendered completely (during the loading spinner phase), the screenshot shows the loading state rather than the actual page.

Solution: In Crazy Egg, open the Snapshot settings and request a new screenshot. Some Crazy Egg plans allow manual screenshot capture — take a screenshot from the Crazy Egg dashboard after the app is fully loaded. Alternatively, Crazy Egg's newer plans use a rendering engine that waits for the page to fully load before screenshotting.

### The API Connector 'There was an issue setting up your call' error when trying to initialize the Crazy Egg API

Cause: The Crazy Egg API is not publicly documented and may not be available on your account tier. The base URL or authentication header format may differ from what is expected, or the API endpoint may have changed.

Solution: Contact Crazy Egg support to confirm your plan includes API access and to obtain the correct base URL and authentication header format. Do not attempt to guess the API structure — treat the integration as script-injection-only if API documentation is not provided with your account. The JavaScript snippet provides full heatmap functionality without API access.

### Crazy Egg session recordings show garbled or incomplete screenshots of Bubble pages

Cause: Bubble apps use complex CSS layouts and dynamic content rendering that may not capture perfectly in Crazy Egg's screenshot engine. Repeating Groups with dynamic content and absolute positioning are particularly prone to screenshot issues.

Solution: This is a known limitation of JavaScript-based screenshot tools with dynamic SPAs. For layout analysis, the click heatmap overlay on the live page (viewed in Crazy Egg's built-in browser) is more reliable than the static screenshot. Use Crazy Egg's 'Confetti' view which overlays clicks on a live rendering of the current page rather than a static screenshot.

## Frequently asked questions

### Does the Crazy Egg Account ID in the script need to be kept secret?

No. The Crazy Egg Account ID in the tracking script URL is intentionally public. It is a send-only capture identifier, similar to a Google Analytics Measurement ID. Anyone who views your page source can see it, but they can only send heatmap data to your Crazy Egg account — they cannot read your heatmap data, access your recordings, or modify your account settings. Your Crazy Egg password and API key (if available) are the credentials that require protection.

### Why is my Crazy Egg heatmap showing all my Bubble pages merged into one?

This happens because SPA (Single Page Application) tracking mode is not enabled in Crazy Egg for your domain. Bubble is an SPA — navigating between pages does not trigger a browser reload, so Crazy Egg's default mode attributes all clicks to the initial URL. Go to your Crazy Egg site settings and enable SPA tracking. After enabling, delete your existing Snapshots and recreate them to start fresh data collection.

### Can Crazy Egg record in Bubble's editor preview mode?

No. Crazy Egg only records sessions on your published live app URL. The tracking script in Bubble's Settings → SEO / metatags is applied to the published app, not the editor preview. You must click Publish in Bubble and then test on the live URL to generate Crazy Egg heatmap data.

### Does Crazy Egg have an API I can use from Bubble's API Connector?

Crazy Egg has a limited API that is not publicly documented in their developer portal. API access appears on Plus plan and higher accounts, but availability varies and the API documentation is provided only within the account. If API access is available in your Crazy Egg account settings (look for an 'API Keys' section), it can be configured in Bubble's API Connector with the API key as a Private header. If the API section is absent from your account, treat the integration as script-injection-only and use Crazy Egg's dashboard for all data analysis.

### Do I need a paid Bubble plan to use Crazy Egg?

No. The Crazy Egg tracking script runs from the user's browser, not from Bubble's server, so it does not require any Bubble server-side features. It works on the free Bubble plan. A paid Bubble plan is only needed if you want to use Backend Workflows (API Workflows) to make server-side Crazy Egg API calls — which is an advanced and rarely needed use case given Crazy Egg's limited API.

### How many visits do I need before Crazy Egg heatmaps are useful?

Crazy Egg typically shows a minimum of 100 visits before a heatmap is considered statistically meaningful. For low-traffic pages, you may need to run Snapshots for several weeks before accumulating enough data. For high-traffic pages (1,000+ daily visitors), you can get meaningful data within 24-48 hours. Crazy Egg's dashboard shows data quality indicators — rely on patterns visible with at least 100+ clicks per element rather than sparse data from fewer visits.

---

Source: https://www.rapidevelopers.com/bubble-integrations/crazy-egg
© RapidDev — https://www.rapidevelopers.com/bubble-integrations/crazy-egg