# Bubble

## Add Humblytics Analytics to Bubble

### 1 · Sign up (or log in)

Visit humblytics.com → Start Free Trial. Finish signup—or log in to your existing workspace.

### 2 · Add your website in Humblytics

In the sidebar, click **Add Website**.

* **Domain** – enter `your-domain.com` (omit `https://` and `www`)
* **Site Name** – internal label (e.g. `Marketing-Prod`)

Copy the snippet from **Install Tracking Code**:

html

```html
<!-- Start Humblytics Tracking Code -->
<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
<!-- End Humblytics Tracking Code -->
```

Keep this tab open—we'll return and click **Verify Website** once the tag is live.

### 3 · Add the script to your Bubble app

#### Option 1: Site-wide tracking (recommended)

**Best for:** Tracking all pages in your Bubble app

1. In the Bubble editor, click **Settings** tab at the top
2. Select **SEO / metatags** from the left sidebar
3. Scroll down to **Script/meta tags in header**
4. Paste your Humblytics script:

html

```html
<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
```

5. The script will automatically be added to every page in your app

**Note**: No need to click a separate "Save" button—Bubble auto-saves as you type.

#### Option 2: Single page tracking

**Best for:** Tracking specific landing pages or flows only

1. Open the page you want to track in the Bubble editor
2. Click the **page element** in the element tree (top-left, labeled with page name like "index")
3. In the Property Editor (left panel), find **Page HTML header**
4. Paste your Humblytics script:

html

```html
<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
```

5. Repeat for each page you want to track

**Note**: Replace `YOUR_ID_HERE` with your actual project ID from Humblytics.

### 4 · Deploy to live

⚠️ **Critical**: Humblytics only tracks your **live (production)** site, not the development version.

1. Click **Deploy** button in the top right of the Bubble editor
2. Choose **Deploy to live** (not "Deploy to test")
3. Wait for deployment to complete (usually 30-60 seconds)
4. Confirm deployment with the green success message

**Common mistake**: Testing on `yourapp.bubbleapps.io/version-test` won't work—you must test on your live URL.

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your **live** Bubble site in a private/incognito window and refresh once
   * Custom domain: `yourdomain.com`
   * Bubble domain: `yourapp.bubbleapps.io` (without `/version-test`)
3. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**Bubble-specific issues:**

* You deployed to **live**, not test/development
* You're testing the correct URL:
  * ✓ `yourapp.bubbleapps.io` or `yourdomain.com`
  * ✗ `yourapp.bubbleapps.io/version-test`
* Script is in **Script/meta tags in header** (site-wide) or **Page HTML header** (page-specific)
* Wait 2-3 minutes after deploying—Bubble's CDN may need time to update

**General issues:**

* Script ID matches your project in Humblytics
* Open Developer Tools (F12) → **Network** tab, refresh page, and search for `hmbl.min.js` to confirm it loads
* View page source (right-click → View Page Source) and search for "humblytics"
* No ad-blockers or browser extensions are blocking the script

**Still not working?**

* Clear your browser cache and try again
* Try a different browser or device
* Check Bubble's debugging console for JavaScript errors

### 6 · Explore & optimize

* **Dashboard** – see traffic, top pages, and referrers
* **Heatmaps** – auto-generated to reveal click hotspots and scroll depth
* **Experiments** – run A/B tests without extra libraries (Experiments → New Test)