# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.humblytics.com/how-to-get-started/bubble.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.