# Overview

Welcome to Humblytics — the all-in-one conversion rate optimization (CRO) platform.

## What is Humblytics?

Humblytics is an all-in-one CRO platform that replaces your heatmap, A/B testing, and analytics tools with one lightweight 36 KB script. It combines visual A/B testing, click and scroll heatmaps, conversion funnels, revenue attribution, and AI-powered agents — all without requiring developers or engineering tickets.

Launch experiments in 60 seconds with the visual editor, let AI agents analyze your funnels and tell you what to test next, and attribute every dollar back to the campaign, page, and variant that earned it. Cookie-free and GDPR compliant by design, no consent banners required.

***

## Key Features

### 1. Automatic & Custom Click Tracking

* **Click events and form events** are tracked automatically—view them under **Analytics** (Site Traffic, Pages, Clicks, Forms).
* **Add custom attributes** (e.g., `humblytics="signup-button"`) when you want to label specific click events for better visibility in the **Clicks** section.
* **No‑code & low‑code friendly** for platforms like Webflow, Framer, and Typedream.

### 2. Funnel Analysis

* **Multi‑step funnels**: map page views, clicks, form submissions—or any custom event—in a visual flow.
* **Conversion metrics at a glance**: see starting volume, drop‑off percentages, overall conversion rate, and per‑step value attribution.
* **Cross‑domain support**: switch between "primary domain only" or multiple domains to follow users across subdomains or checkout flows.
* **Segment & save funnels** for one‑click access during campaigns or A/B tests.

### 3. Click & Scroll Heatmaps

* **Dynamic heatmaps** overlay click density on live pages for desktop, tablet, and mobile views.
* **Scroll-depth insights** show where users lose interest on long pages.
* **Page‑level filtering** lets you compare different layouts or devices side‑by‑side.
* **No extra installation**—heatmaps activate automatically once the base script is on your site.
* **Heatmap history & versioning** - Track how your pages evolve over time with automatic version saving.

### 4. Experiments (A/B Testing)

* **One script, every test**: run split tests without adding extra libraries (1 live test on Plus, 5 on Business, unlimited on Scale and Enterprise).
* **SEO‑safe redirects** with canonical tags to avoid duplicate content penalties.
* **Cookie‑free audience assignment** using short‑lived query parameters.
* **External destination tracking** - Track successful transfers to partner sites and multi-domain checkouts.

### 5. Revenue Attribution & Payment Integrations

* **End-to-end attribution** - Connect sales to traffic sources, campaigns, and A/B test variants.
* **See which channels drive money** - Track revenue from marketing campaigns to understand true ROI.
* **Payment provider integrations**:
  * **Stripe** - Complete revenue tracking with automatic attribution
  * **Foxy** - Track Foxycart purchase events
  * **Other providers** - Custom purchase events where you control the confirmation page (hosted checkouts like Shop Pay are not supported)
* **Revenue as conversion goal** - Use completed purchases as A/B test goals.
* **Privacy-compliant tracking** - Cookie-free revenue attribution.
* **Real-time revenue data** - Sales appear in your dashboard within \~30 seconds.

### 6. Workflows & AI Chat

* **AI-powered workflows** automate recurring analysis tasks. Available workflows include:
  * **Weekly Growth Report** -- automated email summaries of your site performance
  * **Landing Page Audit** -- AI analysis of conversion opportunities
  * **A/B Test Ideas Generator** -- prioritized experiment hypotheses based on your data
  * **Traffic Alerts** -- email notifications for traffic spikes or drops
* **AI Chat** is available on every page via the right sidebar. Ask questions about your data in natural language, use quick action buttons like "Traffic insights" and "Test ideas", and get context-aware answers based on the analytics page you are viewing.

### 7. Data Connectors

* **Revenue connectors**: Stripe and Foxy integrate directly to attribute purchases to traffic sources.
* **Form connectors**: JotForm and Tally connect to track form submissions automatically.
* **Coming soon**: Meta Ads, Google Analytics 4, Google Search Console, Shopify, and more.
* Access connectors from the **Automate** section in the sidebar.

### 8. Export & Marketing Tools

* **CSV export** for all analytics data -- download traffic summaries, page breakdowns, device data, location data, channel data, referrals, UTM data, LLM referrals, click and form events, and A/B test results.
* **Marketing tools** available under Utilities in the sidebar:
  * **UTM Generator** -- create trackable campaign URLs
  * **A/B Test Planner** -- calculate sample sizes and test duration
  * **Significance Calculator** -- check if test results are statistically significant
  * **Conversion Rate Calculator** -- calculate and compare against benchmarks

### 9. Privacy & Performance

* **Cookie‑free by design**—no consent banners required under GDPR.
* **Lightweight** (\~36 KB) async‑loaded script served from regional CDNs.
* **Full GDPR compliance** - We've worked with Simpliant Legal to finalize privacy policies, data processing agreements, and EU residency requirements.
* **LLM referral tracking** - Automatically tracks traffic from ChatGPT, Perplexity, and other AI tools.

***

## Platform Integrations

Humblytics works seamlessly with all major website builders and frameworks:

* **Webflow**: add the script in *Site Settings → Custom Code → Head*
* **Framer**: paste the tag in *Site Settings → General → Custom Code*
* **Wix**: in the site editor go to *Settings → Custom Code*
* **Squarespace**: navigate to *Settings → Advanced → Code Injection*
* **WordPress**: use a header/footer plugin or edit `header.php`
* **Shopify**: open *Online Store → Themes → Edit Code*
* **And 15+ more platforms** - See our [Installation Guides](/how-to-get-started)

***

## Common Use Cases

| Goal                             | Humblytics Workflow                                                 |
| -------------------------------- | ------------------------------------------------------------------- |
| Improve landing page sign‑ups    | Heatmap → identify low‑click CTAs → A/B test hero copy              |
| Diagnose checkout drop‑off       | Funnel (Cart → Checkout → Thank You) → view step‑level conversion   |
| Attribute campaign ROI           | Custom click events on ads/UTM pages → Funnel value attribution     |
| Track AI referrals               | Dashboard → See ChatGPT and Perplexity traffic automatically        |
| See which channels drive revenue | Revenue tracking → Attribute sales to traffic sources and campaigns |
| Optimize for revenue, not clicks | A/B tests with revenue goals → Find variants that increase sales    |
| Automate weekly reporting        | Workflows → Weekly Growth Report → schedule email delivery          |
| Get AI-powered insights          | AI Chat → ask questions about your data in natural language         |
| Export data for analysis         | Export Data → select categories → download CSV files                |

***

## Privacy & Compliance

* **GDPR Compliance**: Full GDPR compliance is complete with privacy policies, data processing agreements, and EU residency requirements.
* **Personal Data Collection**: Collects name, email, and billing details during account creation.
* **Automatic Tracking**: Tracks IP, location, OS, and other metadata to improve user experience.
* **Data Security**: Employs industry-standard security measures.
* **Third-Party Services**: Integrates services like Webflow, Stripe, OpenAI, and GitHub.
* **Data Residency**: Complete privacy controls and data location options are available for EU compliance.

***

## Quick Links

### Resources

* 🏠 [Homepage](https://humblytics.com/)
* 📺 [YouTube Tutorials](https://www.youtube.com/@humblytics)
* 📖 [Guides](https://humblytics.com/guides)
* 🔧 [Tools and Calculators](https://humblytics.com/tools/free-humblytics-split-testing-and-analytics-tools)

### Getting Started

1. **Install Humblytics** - Choose your platform from our [Getting Started Guide](/how-to-get-started)
2. **Track Custom Events** - Learn about [Click Events](/how-to-track-custom-click-events), [Form Submissions](/how-to-track-custom-form-submissions), and [Purchase Events](/how-to-track-purchase-events)
3. **Connect Payment Providers** - Set up [Revenue Attribution](/how-to-track-purchase-events) to see which channels drive sales (Stripe and Foxy natively, other providers via custom purchase events)
4. **Optimize with Split Testing** - Set up [A/B tests](/split-testing-overview) to improve conversions and revenue
5. **Understand Your Data** - Explore your [Analytics Dashboard](/understanding-your-data)
6. **Automate with Workflows** - Set up [AI-powered workflows](/workflows) for automated reporting and insights
7. **Connect External Tools** - Integrate revenue and form providers via [Connectors](/connectors)
8. **Export Your Data** - Download analytics as CSV from [Export Data](/export-data)
9. **Ask AI** - Use [AI Chat](/ai-chat) to query your analytics in natural language
10. **Connect AI Agents** - Set up API keys and marketing skills via the [API Access & Agent Setup](/api-access-and-agents) guide

***

**Ready to dive in?** Install the single script, verify your site, and start exploring funnels, heatmaps, and real‑time events within minutes.

Need help? Check our [FAQ](/frequently-asked-questions) or contact support.


# Getting Started

Choose your platform below to add Humblytics analytics to your website. Each guide provides step-by-step instructions for installing the tracking script and verifying it works correctly.

## Supported Platforms

We support 20+ platforms and frameworks. Select yours from the list below:


# Astro

## Add Humblytics Analytics to an Astro Site

### 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. `Astro-Site`)

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 Astro project

#### Option 1: Direct script tag (simplest)

**Best for:** Quick setup, works with all Astro features

1. Open your main layout file:
   * `src/layouts/BaseLayout.astro`
   * Or `src/layouts/Layout.astro`
2. Add the script before `</head>`:

astro

```astro
---
// Your frontmatter
const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    
    <!-- Humblytics Analytics -->
    <script is:inline async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
  </head>
  <body>
    <slot />
  </body>
</html>
```

**Note**: `is:inline` prevents Astro from bundling/optimizing this script, ensuring it loads as-is.

#### Option 2: Using environment variables (recommended)

**Best for:** Managing different environments (dev, staging, production)

1. Add to `.env`:

env

```env
PUBLIC_HUMBLYTICS_ID=YOUR_ID_HERE
```

2. Update your layout:

astro

```astro
---
const { title } = Astro.props;
const humblytics = import.meta.env.PUBLIC_HUMBLYTICS_ID;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    
    <!-- Humblytics Analytics -->
    {humblytics && (
      <script is:inline async src={`https://app.humblytics.com/hmbl.min.js?id=${humblytics}`}></script>
    )}
  </head>
  <body>
    <slot />
  </body>
</html>
```

3. Add to `.env.production` (or your hosting platform's env vars):

env

```env
PUBLIC_HUMBLYTICS_ID=your_production_id_here
```

#### Option 3: Production-only tracking

**Best for:** Disabling analytics during development

astro

```astro
---
const { title } = Astro.props;
const isDev = import.meta.env.DEV;
const humblytics = import.meta.env.PUBLIC_HUMBLYTICS_ID;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    
    <!-- Humblytics Analytics (production only) -->
    {!isDev && humblytics && (
      <script is:inline async src={`https://app.humblytics.com/hmbl.min.js?id=${humblytics}`}></script>
    )}
  </head>
  <body>
    <slot />
  </body>
</html>
```

#### Option 4: With View Transitions (if using Astro's SPA mode)

**Best for:** Sites using View Transitions for SPA-like navigation

If you're using `<ViewTransitions />` in your layout:

astro

```astro
---
import { ViewTransitions } from 'astro:transitions';
const humblytics = import.meta.env.PUBLIC_HUMBLYTICS_ID;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <ViewTransitions />
    
    <!-- Humblytics Analytics -->
    {humblytics && (
      <script is:inline async src={`https://app.humblytics.com/hmbl.min.js?id=${humblytics}`}></script>
    )}
    
    <!-- Track page views on navigation -->
    <script is:inline>
      document.addEventListener('astro:page-load', () => {
        if (window.hmbl && window.hmbl.trackPageview) {
          window.hmbl.trackPageview();
        }
      });
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>
```

**Note**: The `astro:page-load` event ensures tracking works with client-side navigation.

#### Multiple layouts

If your site uses multiple layout files, either:

1. Add the script to each layout, or
2. Create a shared component:

**Create `src/components/Analytics.astro`:**

astro

```astro
---
const humblytics = import.meta.env.PUBLIC_HUMBLYTICS_ID;
const isDev = import.meta.env.DEV;
---

{!isDev && humblytics && (
  <script is:inline async src={`https://app.humblytics.com/hmbl.min.js?id=${humblytics}`}></script>
)}
```

**Use in layouts:**

astro

```astro
---
import Analytics from '../components/Analytics.astro';
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{title}</title>
    <Analytics />
  </head>
  <body>
    <slot />
  </body>
</html>
```

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

### 4 · Build and deploy

**Development:**

bash

```bash
npm run dev
# Humblytics won't track if using production-only setup
```

**Production:**

bash

```bash
npm run build
npm run preview  # Test production build locally
```

Deploy to your hosting platform:

* **Vercel**: `vercel --prod`
* **Netlify**: `netlify deploy --prod`
* **Cloudflare Pages**: Push to Git
* Or use Astro's adapters for SSR deployments

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your live Astro site in a private/incognito window
3. Refresh once
4. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**Astro-specific issues:**

* You built and deployed to production (not testing `npm run dev`)
* Environment variable is set correctly (check deployment platform)
* Script has `is:inline` directive (otherwise Astro may bundle it incorrectly)
* If using View Transitions, verify `astro:page-load` listener is present
* Check build output for errors: `npm run build`

**General issues:**

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

**Debug in Astro:**

bash

```bash
# Check environment variables
npm run build -- --verbose

# Test production build locally
npm run preview
```

### 6 · Explore & optimize

* **Dashboard** – view traffic, top pages, and referrers
* **Heatmaps** – auto-generated click and scroll insights
* **Experiments** – create A/B tests directly from Humblytics


# Bolt

## Add Humblytics Analytics to Bolt.new

**Note**: Bolt.new is an AI-powered web development tool that generates and modifies code for you.

### 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. `Bolt-Project`)

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 · Install using Bolt AI

In the Bolt.new chat interface, send this prompt:
```
Add Humblytics analytics to my site. Add this script to the <head> section of all pages:

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

Make sure it loads on every page.
````

Bolt AI will automatically:

* Detect your framework (React, Next.js, Vue, etc.)
* Add the script to the correct file
* Apply it site-wide

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

### 4 · Deploy your project

⚠️ **Important**: Bolt.new runs in preview mode. Deploy to a live URL for tracking.

1. Click **Deploy** (top right)
2. Choose a platform:
   * **Netlify** (recommended)
   * **Vercel**
   * Or export and deploy manually
3. Wait for deployment to complete
4. Copy your live URL (e.g., `yoursite.netlify.app`)

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your **deployed live site** in a private/incognito window
3. Refresh once
4. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails:**

* You're testing the **deployed URL**, not Bolt.new preview
* Script was added before deploying (if not, re-deploy)
* View page source and search for "humblytics"
* Check Developer Tools → Network tab for `hmbl.min.js`
* Wait 1-2 minutes after deployment

### 6 · Explore & optimize

* **Dashboard** – view traffic, top pages, and referrers
* **Heatmaps** – auto-generated for clicks and scroll depth
* **Experiments** – run A/B tests directly from Humblytics


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


# Django

## Add Humblytics Analytics to a Django Site

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

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 Django project

#### Option 1: Direct template integration (simple)

**Best for:** Quick setup, single environment

1. Open your base template file, typically:
   * `templates/base.html`
   * `templates/layout.html`
   * Or your project's main template that other templates extend
2. Add the Humblytics script just before `</head>`:

django

```django
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Site{% endblock %}</title>
    
    {% block extra_head %}{% endblock %}
    
    <!-- Humblytics Analytics -->
    {% if not debug %}
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
    {% endif %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>
```

3. Ensure child templates extend this base:

django

```django
{% extends 'base.html' %}

{% block content %}
    <!-- Your page content -->
{% endblock %}
```

**Note**: `{% if not debug %}` prevents tracking in development when `DEBUG = True`.

#### Option 2: Using Django settings (recommended)

**Best for:** Production/staging environments, cleaner configuration

1. Add to your `settings.py`:

python

```python
# settings.py

# Humblytics Analytics
HUMBLYTICS_ID = os.environ.get('HUMBLYTICS_ID', '')

# Only track in production
ENABLE_ANALYTICS = not DEBUG and HUMBLYTICS_ID
```

2. Add to `.env` file (for production):

env

```env
HUMBLYTICS_ID=YOUR_ID_HERE
```

3. Create a context processor to make settings available in templates:

python

```python
# your_app/context_processors.py

from django.conf import settings

def analytics(request):
    return {
        'HUMBLYTICS_ID': settings.HUMBLYTICS_ID,
        'ENABLE_ANALYTICS': settings.ENABLE_ANALYTICS,
    }
```

4. Register the context processor in `settings.py`:

python

```python
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'your_app.context_processors.analytics',  # Add this line
            ],
        },
    },
]
```

5. Update your base template:

django

```django
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Site{% endblock %}</title>
    
    {% block extra_head %}{% endblock %}
    
    <!-- Humblytics Analytics -->
    {% if ENABLE_ANALYTICS %}
    <script async src="https://app.humblytics.com/hmbl.min.js?id={{ HUMBLYTICS_ID }}"></script>
    {% endif %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>
```

#### Option 3: Template include (for multiple base templates)

**Best for:** Projects with multiple base templates (e.g., public site, admin, blog)

1. Create `templates/includes/analytics.html`:

django

```django
{% if not debug %}
<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
{% endif %}
```

2. Include it in each base template:

django

```django
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}My Site{% endblock %}</title>
    
    {% include 'includes/analytics.html' %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>
```

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

### 4 · Deploy and verify

1. **Clear Django caches** (if using template caching):

bash

```bash
   python manage.py clear_cache  # If using django-redis or similar
```

2. **Restart your Django server**:

bash

```bash
   # Development
   python manage.py runserver
   
   # Production (example with Gunicorn)
   sudo systemctl restart gunicorn
```

3. **If using static files CDN**, ensure changes are deployed
4. Return to Humblytics and click **Verify Website**
5. Open your live site in a private/incognito window and refresh once
6. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**Django-specific issues:**

* You're testing **production** environment, not development with `DEBUG = True`
* Template changes are deployed (check file timestamps on server)
* If using template caching, cache is cleared
* Context processor is registered (for Option 2)
* Environment variable is set correctly in production
* Django server was restarted after changes

**General issues:**

* Script ID matches your project in Humblytics
* View page source (right-click → View Page Source) and search for "humblytics"
* Check Django logs for template errors: `python manage.py check`
* Open Developer Tools (F12) → **Network** tab and search for `hmbl.min.js`
* No ad-blockers or browser extensions are blocking the script

**Debug in Django shell:**

python

```python
python manage.py shell

>>> from django.conf import settings
>>> print(settings.DEBUG)  # Should be False in production
>>> print(getattr(settings, 'HUMBLYTICS_ID', 'Not set'))
```

### 5 · 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 setup (Experiments → New Test)


# Framer

## Add Humblytics Analytics to Framer

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

1. Go to humblytics.com → **Start Free Trial** (14-day free trial, your card won't be charged until it ends)
2. Complete signup—or log in to your existing workspace

### 2 · Add your website in Humblytics

1. From the sidebar, click **Add Website**
2. **Domain** – enter `your-site.com` (omit `https://` and `www`)
   * Use your custom domain if connected
   * Or use Framer's free domain: `projectname.framer.website`
3. **Site Name** – internal label (e.g. `My Portfolio`)
4. Copy the unique script 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 -->
```

5. Keep this tab open—we'll return to click **Verify Website** after publishing

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

### 3 · Add the script in Framer

#### Method 1: Site-wide (recommended)

**Best for:** Tracking all pages including CMS collection pages

1. Open your Framer project
2. Click the **project name** dropdown (top-left, next to preview/device icons)
3. Select **Settings**
4. In the left sidebar, click **General**
5. Scroll down to **Custom Code** section
6. Under **Start of `<head>` tag**, paste your Humblytics script:

html

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

7. The changes save automatically

**Why Start of `<head>`?** This ensures the script loads before page content, capturing all visitor data from the moment the page begins loading.

#### Method 2: Page-specific tracking

**Best for:** Tracking only certain pages (landing pages, specific flows)

1. In Framer, open the **Pages panel** (left sidebar)
2. Select the page you want to track
3. Click the **gear icon** → **Page Settings**
4. Scroll to **Custom Code**
5. Under **Start of `<head>` tag**, paste your Humblytics script
6. Repeat for each page you want to track

**Limitation**: Page-specific code won't track CMS collection pages.

### 4 · Publish your site

⚠️ **Important**: Custom code only appears on published sites, not in Framer's preview mode.

1. Click **Publish** button (top-right)
2. Choose your publishing target:
   * **Custom domain** (if connected): `yourdomain.com`
   * **Framer domain**: `projectname.framer.website`
3. Wait for publishing to complete (usually 5-15 seconds)
4. Confirm with the "Site published" notification

**Note about Framer domains:**

* Free: `projectname.framer.website`
* Legacy: `projectname.framer.app` (old format, still works)
* Custom: Your own domain (requires paid plan)

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your **published** Framer site in a private/incognito window
   * Custom domain: `yourdomain.com`
   * Framer domain: `projectname.framer.website`
3. Refresh once
4. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**Framer-specific issues:**

* You clicked **Publish** after adding the code (not just saved in draft)
* You're testing the **published site**, not Framer's preview mode
* Domain in Humblytics matches exactly:
  * ✓ `projectname.framer.website` (current format)
  * ✓ `projectname.framer.app` (legacy format)
  * ✓ `yourdomain.com` (custom domain)
  * ✗ `framer.com/projects/...` (editor URL)
* Script is in **Start of `<head>` tag**, not End of `<body>` tag
* Custom code changes were made before publishing (not after)

**General issues:**

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

**Still not working?**

1. In Framer, remove the script and re-publish
2. Re-add the script and publish again
3. Wait 2-3 minutes for Framer's CDN to update
4. Test in a fresh incognito window

### 6 · Explore your data

* **Dashboard** – page views, unique visitors, and referrers
* **Heatmaps** – auto-populate after a few visits; perfect for analyzing hero sections and CTA placement
* **Experiments** – run A/B tests without extra scripts (Experiments → New Test)

**Works on all Framer pages:**

* Static pages
* CMS collection pages (blog posts, case studies, etc.)
* Dynamic CMS filtered pages
* Utility pages (404, etc.)


# Ghost CMS

## Add Humblytics Analytics to Ghost CMS

### 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. `Blog-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 Ghost site

#### Option 1: Code Injection (recommended)

**Best for:** Managed Ghost(Pro) or self-hosted Ghost without custom theme development

1. Go to your **Ghost Admin Dashboard**
2. In the sidebar, click **Settings → Code Injection**
3. Under **Site Header**, paste your Humblytics snippet:

html

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

4. Click **Save**

Ghost will automatically inject this into the `<head>` of every page.

#### Option 2: Theme Files

**Best for:** Custom themes or multiple environments (staging/production with different tracking IDs)

1. Download your active theme:
   * Go to **Settings → Design**
   * Click the **⋮** menu next to your active theme
   * Select **Download**
2. Extract the theme and open `default.hbs` (or your theme's main layout file)
3. Locate the closing `</head>` tag and paste your script just above it:

html

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

4. Zip the modified theme and re-upload:
   * Go to **Settings → Design**
   * Click **Upload theme**
   * Select your modified theme zip file

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

### 4 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your live Ghost site in a private/incognito window and refresh once
3. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

* Script ID matches your project in Humblytics
* You clicked **Save** in Code Injection (or uploaded the modified theme)
* You're testing on the correct domain (not localhost)
* No browser extensions or ad-blockers are interfering

### 5 · Explore & optimize

* **Dashboard** – view traffic, top posts, and referrers
* **Heatmaps** – auto-generated from real user interactions
* **Experiments** – run A/B tests on your Ghost pages (Experiments → New Test)


# Google Tag Manager

## Add Humblytics Analytics via Google Tag Manager

### 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 · Create the tag in Google Tag Manager

1. Go to your **Google Tag Manager workspace**
2. Click **New Tag** (top right or from Tags menu)
3. Click the tag name at the top and rename it to: **Humblytics Analytics**
4. Click **Tag Configuration** and select **Custom HTML**
5. Paste your Humblytics script:

html

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

6. Click **Triggering** and select **All Pages**
   * This fires the tag on every page load (recommended for analytics)
   * Alternative: Use specific page triggers if you only want tracking on certain pages
7. Click **Save**

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

### 4 · Test before publishing (recommended)

1. Click **Preview** in the top right of GTM
2. Enter your website URL and click **Connect**
3. Browse your site—GTM will show which tags fire on each page
4. Verify **Humblytics Analytics** appears under "Tags Fired" on page load
5. Click **Exit Preview Mode** when done testing

### 5 · Publish your container

1. Click **Submit** (top right)
2. Add a version name: `Add Humblytics Analytics`
3. Optionally add a description: `Installed Humblytics tracking script for analytics and A/B testing`
4. Click **Publish**

Your Humblytics tag is now live on all pages using this GTM container.

### 6 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your site in a private/incognito window and refresh once
3. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**GTM-specific issues:**

* Container is published (not just saved in draft)
* Your website has the GTM container snippet installed
* Tag is set to trigger on **All Pages** (or the current page you're testing)
* Use GTM Preview mode to confirm the Humblytics tag fires

**General issues:**

* Script ID matches your project in Humblytics
* No ad-blockers or browser extensions are blocking the script
* Check browser console for errors (F12 → Console tab)
* View page source (right-click → View Page Source) and search for "humblytics" to confirm script loads

**Debug in GTM:**

1. Click **Preview** mode in GTM
2. Browse to your site
3. Check if **Humblytics Analytics** appears in "Tags Fired"
4. If not firing, check the trigger configuration
5. If firing but not verifying, check the script ID

### 7 · Explore & optimize

* **Dashboard** – track traffic, top pages, and referrers
* **Heatmaps** – auto-generated click and scroll tracking
* **Experiments** – run A/B tests without extra setup (Experiments → New Test)


# Kajabi

## Add Humblytics Analytics to Kajabi

### 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. `Course-Site`)

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 Kajabi

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

**Best for:** Tracking all pages including courses, landing pages, and checkout

1. Log in to your **Kajabi Dashboard**
2. Go to **Settings → Site Details**
3. Scroll down to **Page Scripts** section
4. Paste your Humblytics script in the **Header Code** field:

html

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

5. Click **Save**

**Note**: In newer Kajabi versions, this may be under **Settings → Checkout Settings → Tracking Code** or **Settings → Code**. Look for "Header Code" or "Custom Code" fields.

#### Option 2: Single page tracking

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

1. Go to **Website → Pages** (or **Website → Landing Pages**)
2. Select the page you want to track
3. Click the **Settings icon (⚙️)** next to the page name
4. Go to **SEO & Tracking → Custom Code** (or **Page Details → Custom Code**)
5. Paste your Humblytics script in the **Header Code** field
6. Click **Save**

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

### 4 · Changes are live immediately

✓ **Good news**: Kajabi applies changes automatically. Unlike other platforms, you don't need to "publish" separately—your script is live as soon as you click Save.

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your live Kajabi site in a private/incognito window and refresh once
3. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**Kajabi-specific issues:**

* Script is in **Header Code** field, not Footer
* You clicked **Save** in Site Details or Page Settings
* You're testing your custom domain, not the default Kajabi subdomain (if applicable)
* Changes may take 1-2 minutes to propagate—try clearing your browser cache

**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

**Testing checkout pages:** If tracking checkout pages specifically, make sure you added the script in **Settings → Checkout Settings → Tracking Code** (some Kajabi plans have separate checkout tracking fields).

### 6 · Explore & optimize

* **Dashboard** – view traffic, top pages, and referrers
* **Heatmaps** – auto-generated for clicks and scroll depth (works on landing pages and sales pages)
* **Experiments** – run A/B tests on your Kajabi pages (Experiments → New Test)


# Laravel

## Add Humblytics Analytics to a Laravel Site

### 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 site's domain (omit `https://` and `www`)
* **Site Name** – internal label (e.g. `Marketing-Laravel`)

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 Laravel project

#### Option 1: Blade layout (recommended for most apps)

**Best for:** Traditional Blade template apps

1. Open your main layout file, typically:
   * `resources/views/layouts/app.blade.php`
   * Or `resources/views/layouts/master.blade.php`
2. Add your Humblytics script just before the closing `</head>` tag:

blade

```blade
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name', 'Laravel') }}</title>
    
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    
    <!-- Humblytics Analytics -->
    @production
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
    @endproduction
</head>
<body>
    @yield('content')
</body>
</html>
```

3. Ensure your pages extend this layout:

blade

```blade
@extends('layouts.app')

@section('content')
    <!-- Your page content -->
@endsection
```

**Note**: The `@production` directive ensures the script only loads in production, not during local development.

#### Option 2: Using environment variables (recommended)

**Best for:** Managing multiple environments (staging, production)

1. Add your Humblytics ID to `.env`:

env

```env
HUMBLYTICS_ID=YOUR_ID_HERE
```

2. In your layout file (`resources/views/layouts/app.blade.php`):

blade

```blade
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name', 'Laravel') }}</title>
    
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    
    <!-- Humblytics Analytics -->
    @if(config('app.env') === 'production' && env('HUMBLYTICS_ID'))
    <script async src="https://app.humblytics.com/hmbl.min.js?id={{ env('HUMBLYTICS_ID') }}"></script>
    @endif
</head>
<body>
    @yield('content')
</body>
</html>
```

3. Add to `.env.production` or your production environment

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

#### Option 3: Blade component (Laravel 8+)

**Best for:** Modern Laravel apps using Blade components

1. Create a new component:

bash

```bash
php artisan make:component Analytics
```

2. Edit `app/View/Components/Analytics.php`:

php

```php
<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Analytics extends Component
{
    public function render()
    {
        return view('components.analytics');
    }
    
    public function shouldRender(): bool
    {
        return app()->environment('production') && config('services.humblytics.id');
    }
}
```

3. Create `resources/views/components/analytics.blade.php`:

blade

```blade
<script async src="https://app.humblytics.com/hmbl.min.js?id={{ config('services.humblytics.id') }}"></script>
```

4. Add to `config/services.php`:

php

```php
'humblytics' => [
    'id' => env('HUMBLYTICS_ID'),
],
```

5. Add to your layout's `<head>`:

blade

```blade
<x-analytics />
```

#### Multiple layouts

If your app uses multiple layout files (e.g., `app.blade.php`, `guest.blade.php`, `admin.blade.php`), add the script to each layout file, or:

1. Create a partial: `resources/views/partials/analytics.blade.php`
2. Add the Humblytics script to this file
3. Include in each layout: `@include('partials.analytics')`

### 4 · Deploy and verify

1. **Clear Laravel caches**:

bash

```bash
   php artisan view:clear
   php artisan config:clear
   php artisan cache:clear
```

2. Deploy your changes to production
3. Return to Humblytics and click **Verify Website**
4. Open your live site in a private/incognito window and refresh once
5. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

* Script ID matches your project in Humblytics
* You deployed to production (not testing localhost)
* You cleared Laravel's view cache
* The `@production` or environment check allows the script to load
* View page source (right-click → View Page Source) and search for "humblytics"
* No ad-blockers or browser extensions are interfering

**Debug in Laravel:**

bash

```bash
# Check if views are cached
php artisan view:clear

# Check config cache
php artisan config:clear

# Verify environment
php artisan env
```

### 5 · Explore & optimize

* **Dashboard** – see traffic, top pages, and referrers
* **Heatmaps** – auto-generated scroll and click maps
* **Experiments** – run A/B tests directly from Humblytics


# Lovable

### Add Humblytics Analytics to a Lovable Site

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

Visit [humblytics.com](https://docs.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 in **Install Tracking Code**:

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

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

***

#### 3 · Paste the script into your Lovable site

Since Lovable is a no-code/low-code AI-powered platform, you will need to inject the script such that it appears in the `<head>` section of your deployed pages.

**Steps:**

1. Open your project in Lovable.
2. Navigate to the site settings or global code injection section. (If Lovable doesn’t expose a “custom ” input field, you may need to edit the project’s code export or use a custom HTML component).
3. Paste the tracking snippet above into the global header area so it loads on all pages.

   ```html
   <!-- Start Humblytics Tracking Code -->
   <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_SITE_ID"></script>
   <!-- End Humblytics Tracking Code -->
   ```
4. Save/publish your site on Lovable so the script becomes live.

**Tip:** Make sure the snippet is placed in—or injected into—the `<head>` section of every page you want to track. If you only place it on one page, only that page will send data.

***

#### 4 · Verify installation

Return to Humblytics and click **Verify Website** for your domain.\
Open your Lovable site in a private/incognito browser window and refresh once.\
Within \~30 seconds you should see a green **Verified** badge and live visitor count.

If verification fails, check:

* The script ID in the snippet matches the one issued for your domain.
* The domain you entered in Humblytics matches what the site is actually using (including subdomain vs root).
* The snippet is placed inside `<head>` and is not blocked by any site settings or by ad-blockers.

***

#### 5 · Explore & optimize

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


# Next.js

### 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 Next.js app

#### For Next.js 13+ (App Router)

1. Open `app/layout.tsx` (or `app/layout.js`)
2. Import the Next.js `Script` component and add before closing `</body>`:

tsx

```tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}
```

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

#### For Next.js 12 or older (Pages Router)

1. Open `pages/_app.tsx` (or `pages/_app.js`)
2. Add the script after your main component:

tsx

```tsx
import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"
        strategy="afterInteractive"
      />
    </>
  )
}
```

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

**Why `afterInteractive`?**\
Loads the script after the page becomes interactive—optimal for analytics without blocking initial page load.

### 4 · Deploy and verify

1. Deploy or restart your development server
2. Return to Humblytics and click **Verify Website**
3. Open your live site in a private/incognito window and refresh once
4. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

* Script ID matches your project
* You deployed the latest version
* Script isn't blocked by ad-blockers or browser extensions
* No Content Security Policy (CSP) blocking the script

### 5 · Explore & optimize

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


# Podia

## Add Humblytics Analytics to Podia

### 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. `Course-Site`)

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 Podia site

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

**Best for:** Tracking all pages including storefront, courses, downloads, and checkout

1. In your Podia dashboard, go to **Settings** (gear icon in top right)
2. Click **Advanced** in the left sidebar
3. Scroll down to **Custom code** section
4. Under **Header code**, paste your Humblytics script:

html

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

5. Click **Save changes**

This adds the script site-wide—it will run on every page of your storefront, courses, memberships, and checkout.

#### Option 2: Single page tracking

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

1. Go to **Site** in the left sidebar
2. Click **Pages** (or **Sales Pages** / **Landing Pages**)
3. Select the page you want to track
4. Click **Settings** (gear icon)
5. Scroll down to **Custom code**
6. Under **Header code**, paste your Humblytics script
7. Click **Save**

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

### 4 · Changes are live immediately

✓ **Good news**: Podia applies changes automatically. Your script is live as soon as you click Save—no separate publish step required.

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your live Podia site in a private/incognito window and refresh once
3. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**Podia-specific issues:**

* You clicked **Save changes** in the Advanced settings
* You're testing the correct domain:
  * If using custom domain: Test `yourdomain.com`
  * If using Podia subdomain: Test `yoursite.podia.com`
* Script is in **Header code** field, not Footer code
* Changes may take 1-2 minutes—try clearing your browser cache

**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

**Testing checkout pages:** Make sure to test on actual product pages and checkout flow—not just your homepage—to ensure tracking works throughout the purchase journey.

### 6 · Explore & optimize

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


# React Router

## Add Humblytics Analytics to a React Router Site

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

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 React Router app

⚠️ **Important for SPAs**: React Router doesn't reload the page on navigation, so you need to manually track route changes (see Option B).

#### Option A: Simple setup (tracks initial page load only)

**Best for:** Quick setup, or if you'll handle route tracking separately

**For Create React App:**

1. Open `public/index.html`
2. Add your Humblytics script just before `</head>`:

html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>React App</title>
  
  <!-- Humblytics Analytics -->
  <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>
```

**For Vite:**

1. Open `index.html` (in root directory, not `/public`)
2. Add the same script before `</head>`

**Limitation**: This only tracks the initial page load. Route changes won't be tracked automatically.

#### Option B: Full SPA tracking (recommended)

**Best for:** Tracking all route changes in your React Router app

**React Router v6 setup:**

Create a tracking component that listens to route changes:

jsx

```jsx
// src/components/Analytics.jsx
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export function Analytics() {
  const location = useLocation();

  useEffect(() => {
    // Load Humblytics script on mount
    const script = document.createElement('script');
    script.src = 'https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE';
    script.async = true;
    document.head.appendChild(script);

    return () => {
      // Cleanup on unmount
      document.head.removeChild(script);
    };
  }, []); // Empty array = run once on mount

  useEffect(() => {
    // Track route changes
    if (window.hmbl) {
      window.hmbl.trackPageview();
    }
  }, [location.pathname]); // Run on every route change

  return null; // This component doesn't render anything
}
```

Then add it to your app root:

jsx

```jsx
// src/App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Analytics } from './components/Analytics';

function App() {
  return (
    <BrowserRouter>
      <Analytics />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* your other routes */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;
```

#### Option C: Production-only tracking

**Best for:** Disabling analytics in development

jsx

```jsx
// src/components/Analytics.jsx
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export function Analytics() {
  const location = useLocation();

  useEffect(() => {
    // Only load in production
    if (process.env.NODE_ENV !== 'production') return;

    const script = document.createElement('script');
    script.src = 'https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE';
    script.async = true;
    document.head.appendChild(script);

    return () => {
      if (document.head.contains(script)) {
        document.head.removeChild(script);
      }
    };
  }, []);

  useEffect(() => {
    if (process.env.NODE_ENV !== 'production') return;
    
    if (window.hmbl) {
      window.hmbl.trackPageview();
    }
  }, [location.pathname]);

  return null;
}
```

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

### 4 · Verify installation

1. **Build and deploy** your app to production
2. Return to Humblytics and click **Verify Website**
3. Open your live site in a private/incognito window
4. Navigate between routes to test route change tracking
5. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**React Router-specific issues:**

* You deployed to production (not testing on localhost)
* If using Option B, verify `Analytics` component is mounted in your app
* Check browser console for errors (F12 → Console)
* Route changes should trigger `hmbl.trackPageview()` (check Network tab in DevTools)
* Script loads before route changes happen (use Option B for best results)

**General issues:**

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

**Debug route tracking:** Add console logs to verify tracking:

jsx

```jsx
useEffect(() => {
  console.log('Route changed:', location.pathname);
  if (window.hmbl) {
    console.log('Tracking pageview');
    window.hmbl.trackPageview();
  } else {
    console.log('Humblytics not loaded yet');
  }
}, [location.pathname]);
```

### 5 · Explore & optimize

* **Dashboard** – track traffic, top pages, and referrers (including all route changes)
* **Heatmaps** – auto-generated scroll and click tracking across all routes
* **Experiments** – run A/B tests powered directly by Humblytics


# Replit

## Add Humblytics Analytics to a Replit Site

### 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 Replit domain:
  * Default: `projectname.username.replit.dev`
  * Or your custom domain if configured
* **Site Name** – internal label (e.g. `Replit-App`)

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 Replit project

#### For Static HTML

**Best for:** HTML/CSS/JS template

1. Open your Replit project
2. Open `index.html` in the file tree
3. Add your Humblytics script before `</head>`:

html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Site</title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
```

4. Click **Run** at the top

#### For Node.js/Express

**Best for:** Node.js template with Express

1. Open your main template file (usually `views/index.ejs` or `views/layout.ejs`)
2. Add script before `</head>`:

html

```html
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
</head>
<body>
    <%- body %>
</body>
</html>
```

#### For React

**Best for:** React template

1. Open `public/index.html`
2. Add script before `</head>`:

html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
```

#### For Python/Flask

**Best for:** Python template with Flask

1. Open `templates/index.html` (or `templates/base.html`)
2. Add script before `</head>`:

html

```html
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Site{% endblock %}</title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>
```

#### Using Replit Secrets (recommended)

**Best for:** Keeping tracking ID secure and managing multiple environments

1. In your Replit, click **Tools** → **Secrets** (lock icon in left sidebar)
2. Add new secret:
   * **Key**: `HUMBLYTICS_ID`
   * **Value**: Your tracking ID (just the ID, not the full script)
3. Access in your code:

**Node.js/Express:**

javascript

```javascript
const humblytics = process.env.HUMBLYTICS_ID;

app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
    <head>
      <script async src="https://app.humblytics.com/hmbl.min.js?id=${humblytics}"></script>
    </head>
    <body>
      <h1>Hello World</h1>
    </body>
    </html>
  `);
});
```

**Python/Flask:**

python

```python
import os

@app.route('/')
def index():
    humblytics_id = os.environ.get('HUMBLYTICS_ID')
    return render_template('index.html', humblytics_id=humblytics_id)
```

Then in template:

html

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

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

### 4 · Deploy your Replit

⚠️ **Important**: Running in the Replit editor (dev mode) vs deploying are different.

#### Option 1: Run in development mode

* Click **Run** at the top
* Your site runs at `https://projectname.username.replit.dev`
* ⚠️ Site goes to sleep when you close the tab (unless you have Always On)

#### Option 2: Deploy (recommended for production)

1. Click **Deploy** button (rocket icon in top right)
2. Choose **Autoscale deployment** or **Static deployment**
3. Wait for deployment (1-2 minutes)
4. Your site gets a permanent URL: `https://projectname.username.replit.app`

**Always On (optional):**

* For dev mode to stay running 24/7
* Requires paid Replit plan
* Not needed if using Deployments

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your Replit site in a private/incognito window
   * Dev mode: `projectname.username.replit.dev`
   * Deployed: `projectname.username.replit.app`
3. Refresh once
4. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**Replit-specific issues:**

* You clicked **Run** (for dev mode) or **Deploy** (for production)
* Site is actually running (not sleeping)
* Testing correct URL:
  * ✓ `projectname.username.replit.dev` (dev)
  * ✓ `projectname.username.replit.app` (deployed)
  * ✗ `replit.com/@username/projectname` (editor URL)
* Domain in Humblytics matches your Replit URL exactly
* For dev mode: Repl hasn't gone to sleep (refresh if it has)

**General issues:**

* Script ID matches your project in Humblytics
* View page source (right-click → View Page Source) and search for "humblytics"
* Open Developer Tools (F12) → **Network** tab and search for `hmbl.min.js`
* Check Replit console for errors (in Shell or Console tab)
* No ad-blockers or browser extensions are blocking the script

**Replit sleeping issue:** If your dev repl keeps going to sleep:

* Use Replit Deployments instead (permanent, always on)
* Or upgrade to paid plan for Always On in dev mode

### 6 · Explore & optimize

* **Dashboard** – view real-time traffic and top pages
* **Heatmaps** – auto-generated visual insights
* **Experiments** – run A/B tests without extra libraries


# Shopify

## Add Humblytics Analytics to Shopify

{% hint style="info" %}
A dedicated Shopify app is coming soon and will make this a one-click install. Until then, installation is a one-line manual snippet in your theme code. It takes about 2 minutes.
{% endhint %}

### 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-store.com` (omit `https://` and `www`). If your store lives on `your-store.myshopify.com`, use that domain instead.
* **Site Name**: internal label (e.g. `Store-Prod`)

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

```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 Shopify theme

1. In your Shopify admin, go to **Online Store → Themes**
2. On your live theme, click the **three-dot menu (⋯) → Edit code**
3. In the file list, open **Layout → theme.liquid**
4. Find the closing `</head>` tag (usually near the top of the file)
5. Paste your Humblytics snippet on the line just before `</head>`
6. Click **Save**

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

{% hint style="warning" %}
The script lives in your published theme. If you switch or replace your theme later, you'll need to re-add the snippet to the new theme's `theme.liquid`.
{% endhint %}

### 4 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your live storefront in a private/incognito window and refresh once
3. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

* Script ID matches your project in Humblytics
* The domain you added in Humblytics matches the domain visitors actually land on (with or without `www`)
* The script appears in your page source (right-click → View Page Source, search for "humblytics")
* Open DevTools → **Network** tab, refresh, and filter for `hmbl.min.js`. A 200 status means the script is loading.
* Your dashboard says **Waiting for visitors**? That means the script is verified but no pageviews have arrived yet. Visit the site in an incognito window, or see [Verify & Troubleshoot Tracking](/how-to-get-started/verify-and-troubleshoot-tracking).

### 5 · Revenue tracking on Shopify

{% hint style="warning" %}
**Shop Pay and Shopify Payments checkout revenue is not tracked.** Humblytics revenue attribution natively supports **Stripe** and **Foxy**. Shopify's checkout runs on Shopify's own sandboxed domain, so purchase events there can't be captured by the tracking script.
{% endhint %}

What you can do today:

* **Storefront analytics, funnels, heatmaps, and A/B tests** all work normally on your store pages.
* If your store charges through **Stripe**, connect the [Stripe integration](/how-to-track-purchase-events/stripe) for full revenue attribution.
* For other setups, see [Other Payment Providers](/how-to-track-purchase-events/other-providers) for what's possible with custom purchase events, and the limitations that apply to hosted checkouts.

If Shop Pay revenue tracking matters to your business, email <support@humblytics.com>. We're gauging demand for deeper Shopify integrations.

### FAQ

**Does this work on Shopify Plus?**\
Yes. The same snippet works across all Shopify tiers, including Plus.

**Will it slow down my store?**\
No. The script is \~36 KB, loads asynchronously, and doesn't block page rendering.

**Are checkout pages tracked?**\
No. Shopify's checkout runs on a separate, sandboxed domain that doesn't load theme code. Storefront pages (home, collections, products, cart) are all tracked.


# SquareSpace

## Add Humblytics Analytics to Squarespace

**Note**: Code Injection requires a Squarespace **Business plan** or higher. If you're on a Personal plan, you'll need to upgrade to add custom code.

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

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

**Best for:** Tracking all pages on your site

1. In your Squarespace dashboard, go to **Settings → Advanced → Code Injection**
2. Under **Header**, paste your Humblytics script:

html

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

3. Click **Save**

This injects the script into the `<head>` of every page on your site.

#### Option 2: Single page tracking

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

1. In the page editor, click the **gear icon (⚙️)** next to the page name
2. Go to **Advanced → Page Header Code Injection**
3. Paste your Humblytics script:

html

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

4. Click **Save**

This limits tracking to that specific page only.

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

### 4 · Publish your changes

⚠️ **Important**: Saving the code doesn't make it live. You must publish your site.

1. Click **Save** in Code Injection settings
2. If changes aren't already published, you'll see a banner at the top
3. Click **Publish** or **Unsaved Changes → Review** and then **Publish**

Your Humblytics script is now live.

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your live Squarespace site in a private/incognito window and refresh once
3. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**Squarespace-specific issues:**

* You have a **Business plan or higher** (Code Injection isn't available on Personal plans)
* You clicked **Publish** after saving the code
* Script is in **Header** section, not Footer
* You're testing your live domain, not the Squarespace preview URL

**General issues:**

* Script ID matches your project in Humblytics
* View page source (right-click → View Page Source) and search for "humblytics" to confirm script loads
* No ad-blockers or browser extensions are blocking the script
* Try a different browser or device

**Can't find Code Injection?** If you don't see **Settings → Advanced → Code Injection**, you're likely on a Personal plan. You'll need to upgrade to Business, Commerce, or Enterprise to add custom code.

### 6 · Explore & optimize

* **Dashboard** – view traffic, top pages, and referrers
* **Heatmaps** – auto-generated for clicks and scroll depth
* **Experiments** – run A/B tests directly from Humblytics (Experiments → New Test)


# Vercel v0

## Add Humblytics Analytics to a Vercel-Hosted Site

**Note**: Vercel is a deployment platform that hosts many types of projects (Next.js, React, Vue, static HTML, etc.). Installation depends on your framework, not Vercel itself.

### 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. `Vercel-App`)

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 project

**First, identify your framework:**

In your Vercel dashboard, check **Project Settings → General** to see your framework preset, or look at your repository files.

#### For Next.js (most common on Vercel)

**App Router (Next.js 13+):**

Open `app/layout.tsx`:

tsx

```tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}
```

**Pages Router (Next.js 12 and older):**

Open `pages/_app.tsx`:

tsx

```tsx
import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"
        strategy="afterInteractive"
      />
    </>
  )
}
```

#### For React/Vite

Open `index.html` (in root or `/public`):

html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
```

#### For Vue

Open `index.html`:

html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App</title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
```

#### For Static HTML

Open your `index.html` or main HTML file:

html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Site</title>
    
    <!-- Humblytics Analytics -->
    <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
</head>
<body>
    <!-- Your content -->
</body>
</html>
```

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

#### Using Vercel Environment Variables (recommended)

1. In Vercel dashboard, go to **Project Settings → Environment Variables**
2. Add new variable:
   * **Key**: `NEXT_PUBLIC_HUMBLYTICS_ID` (or `VITE_HUMBLYTICS_ID` for Vite)
   * **Value**: Your Humblytics ID
   * **Environments**: Production (and Staging if needed)
3. Update your code to use the variable:

**Next.js:**

tsx

```tsx
<Script
  src={`https://app.humblytics.com/hmbl.min.js?id=${process.env.NEXT_PUBLIC_HUMBLYTICS_ID}`}
  strategy="afterInteractive"
/>
```

**Vite:**

html

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

### 4 · Deploy to Vercel

Push your changes to trigger a deployment:

bash

```bash
git add .
git commit -m "Add Humblytics analytics"
git push
```

Or deploy manually:

bash

```bash
vercel --prod
```

Wait for deployment to complete (usually 1-2 minutes).

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your live Vercel site in a private/incognito window
3. Refresh once
4. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**Vercel-specific issues:**

* Deployment completed successfully (check Vercel dashboard)
* You're testing the production URL (e.g., `yoursite.vercel.app` or custom domain)
* Environment variables are set correctly (if using)
* Not testing preview deployment URLs (`*-username.vercel.app`)
* Changes were pushed and deployed (check latest deployment in Vercel)

**General issues:**

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

**Debug in Vercel:**

1. Check deployment logs for build errors
2. View deployment URL and inspect source code
3. Check if environment variables are available: Vercel logs will show if missing

### 6 · Explore & optimize

* **Dashboard** – view traffic, top pages, and referrers
* **Heatmaps** – auto-generated visual insights
* **Experiments** – run A/B tests directly from Humblytics


# Verify & Troubleshoot Tracking

Purpose: Use this guide if your site in unable to get verified in the Humblytics dashboard after you’ve installed the tracking snippet.

### 1. Fast 4‑Point Checklist (90 seconds)

1. **Domain Match** – Does the domain you entered in Humblytics *exactly* match the URL you’re loading? `https://www.example.com` ≠ `https://example.com`.
2. **Head Placement** – The entire snippet *must* sit inside the global `<head>` tag on every page you want tracked.
3. **CSP / Ad‑Blockers** – Confirm that `app.humblytics.com` isn’t blocked by a Content‑Security‑Policy header, browser extension, or firewall.
4. **Correct Script ID** – The `id=` value in the snippet should match the Site ID shown in **Settings → Install Tracking Code**.

If all four items look good, click **Verify Website** again—most issues are resolved right here.

***

### 2. Full Troubleshooting Flow

#### 2.1 Confirm the Script Loads (client‑side check)

```
<!-- Humblytics Global Tag -->
<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_SITE_ID"></script>
<!-- End Humblytics Tag -->
```

1. Open **DevTools → Network → JS** and refresh the page.
2. Look for **hmbl.min.js** with a 200 status.
3. If it’s missing or blocked:
   * **Ad‑Blocker:** Whitelist your domain or pause the extension and test again.
   * **CSP Error:** Add `https://app.humblytics.com` to `script‑src` & `connect‑src`.
   * **Firewall:** Allow outbound requests to `*.humblytics.com`.

#### 2.2 Verify the Correct Domain

| Scenario                                                                        | Fix                                                   |
| ------------------------------------------------------------------------------- | ----------------------------------------------------- |
| Staging site (e.g. `beta.example.com`) connected, tracking prod (`example.com`) | Add each domain as a **separate site** in Humblytics. |
| Using ‘[www.’](http://www.’) in browser but not in Humblytics (or vice‑versa)   | Edit the site settings to match the exact domain.     |

**Note**: if your root domain redirects to `www` (or the reverse), always use the final destination domain in Humblytics. Seeing your own domain show up as a referral source? See [Cross-Domain Tracking & Whitelisting](/cross-domain-tracking-and-whitelisting) for the www vs non-www self-referral explainer.

#### 2.3 Check for Head Placement Mistakes

* **Late Injection:** Some page builders inject custom code *after* `<body>`—make sure your platform supports true `<head>` injection.
* **Per‑Page vs Global:** Single‑page placement means only that template is tracked; use the global head / layout file.

#### 2.4 Single‑Page Apps (SPA)

For React, Next.js, Vue, etc. place the tag in the global layout (e.g. `_app.js`, `root.tsx`). Humblytics automatically listens for history changes—no extra config needed.

#### 2.5 Multiple Tracking Scripts Installed

Running legacy snippets from previous workspaces can cause ID mismatches. Remove duplicates and keep only the latest tag.

***

### 3. Frequently Asked Questions

#### "How long after verifying will I see data?"

Within 60 **seconds** of the first page view, real‑time visitors should appear in the dashboard.

#### "Can I keep Google Analytics on the site?"

Yes. Humblytics is async and <36 KB, so it runs alongside other trackers without conflicts.

#### "Do I need a cookie banner for verification?"

No. Humblytics is cookie‑free - verification succeeds regardless of consent prompts.

#### "What if my CMS doesn’t let me edit `<head>`?"

Most platforms (Webflow, Framer, Squarespace, WordPress) do. If yours doesn’t, embed the tag via a *global header injection* plugin or theme setting.

#### "My site uses a strict CSP—what directives are required?"

```
Content-Security-Policy:
  script-src 'self' https://app.humblytics.com;
  connect-src 'self' https://app.humblytics.com https://events.humblytics.com;
```

***

### 4. Dashboard States You Might See

#### "Waiting for visitors"

This screen means the script is installed and verified, but no pageviews have arrived yet. It is not an error. To confirm everything works:

1. Open your live site in a private/incognito window and browse a page or two.
2. Within \~60 seconds you should see yourself in the dashboard.
3. Still nothing? The script probably isn't actually loading on your site. Run the checklist in section 1 and the DevTools check in section 2.1. On platforms where you can't edit the `<head>` directly (for example Shopify), make sure the snippet was actually saved to the live theme; see the [Shopify guide](/how-to-get-started/shopify).

#### "Couldn't Launch Test"

This error can appear right after a site deploy or a Humblytics product update, when your browser's cached app state is out of sync with the server. It is temporary:

1. Hard refresh the dashboard (**Cmd+Shift+R** on Mac, **Ctrl+Shift+R** on Windows).
2. Try launching the test again.
3. If it persists after a few minutes, stop the draft test, recreate it, or contact support.

***

### 5. Still Stuck? We’re Here → **<support@humblytics.com>**

1. Send your live URL.
2. Include a screenshot of DevTools → Network with **hmbl.min.js** filtered.
3. We’ll reply within one business day—usually much faster.

***

#### Next Steps

* Once verified, explore **Heatmaps**, **Funnels**, and **Experiments** in your dashboard.


# Vue.js

## Add Humblytics Analytics to a Vue.js Site

### 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 Vue.js app

#### Option 1: Add in `public/index.html` (recommended)

**Best for:** Simple setup, works with all Vue build tools (Vite, Vue CLI, Webpack)

1. Open your Vue project folder
2. Navigate to `public/index.html`
3. Paste your Humblytics script just before the closing `</head>` tag:

html

```html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Your App</title>
  
  <!-- Humblytics Analytics -->
  <script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>
</head>
```

4. Save the file and rebuild your app

This ensures Humblytics loads on every page and route automatically.

#### Option 2: Load dynamically in production only

**Best for:** Disabling tracking in local development

**For Vite (Vue 3):**

Open `src/main.js` or `src/main.ts` and add:

javascript

```javascript
import { createApp } from 'vue'
import App from './App.vue'

// Load Humblytics only in production
if (import.meta.env.PROD) {
  const script = document.createElement('script')
  script.async = true
  script.src = 'https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE'
  document.head.appendChild(script)
}

createApp(App).mount('#app')
```

**For Vue CLI (Webpack):**

Open `src/main.js` and add:

javascript

```javascript
import Vue from 'vue'
import App from './App.vue'

// Load Humblytics only in production
if (process.env.NODE_ENV === 'production') {
  const script = document.createElement('script')
  script.async = true
  script.src = 'https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE'
  document.head.appendChild(script)
}

new Vue({
  render: h => h(App),
}).$mount('#app')
```

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

#### For Nuxt.js

If you're using Nuxt, see our dedicated Nuxt.js installation guide for SSR-compatible setup.

### 4 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your live site in a private/incognito window and refresh once
3. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

* Script ID matches your project in Humblytics
* You rebuilt and deployed the updated code
* You're testing on the correct domain (not localhost if using production-only setup)
* No browser extensions or ad-blockers are blocking the script

### 5 · Explore & optimize

* **Dashboard** – track visitors, top pages, and referrers
* **Heatmaps** – auto-generated for clicks and scroll depth
* **Experiments** – run A/B tests without extra libraries (Experiments → New Test)


# Webflow

## Add Humblytics Analytics to Webflow

**Note**: Custom code requires a Webflow **Site plan** (Basic, CMS, Business, or Enterprise). Custom code is not available on the free Starter plan.

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

1. Visit humblytics.com → **Start Free Trial** (14-day free trial, your card won't be charged until it ends)
2. Finish signup—or log in to your existing workspace

### 2 · Add your website in Humblytics

1. In the sidebar, click **Add Website**
2. **Domain** – enter `your-site.com` (omit `https://` and `www`)
   * Use your custom domain, not `*.webflow.io`
   * If your root domain redirects to `www` (the default Webflow setup), the domain in Humblytics should match the final destination visitors land on. See [Cross-Domain Tracking & Whitelisting](/cross-domain-tracking-and-whitelisting) for the www vs non-www explainer.
3. **Site Name** – internal label (e.g. `Brand Marketing`)
4. Copy the unique tracking script 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 -->
```

5. Keep this tab open—we'll return to click **Verify Website** after publishing

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

### 3 · Install the script in Webflow

#### Add to site settings:

1. Open **Webflow Designer** for your project
2. Click the **W** logo (top-left) → **Site settings**
3. In the left sidebar, select **Custom Code**
4. Under **Head Code**, paste your Humblytics script:

html

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

5. Click **Save** (top-right)

This adds the script to every page on your site, including:

* Static pages
* CMS collection pages
* Dynamic pages

#### Alternative: Page-specific tracking

If you only want to track specific pages:

1. In Webflow Designer, select the page from the **Pages panel** (left sidebar)
2. Click the **gear icon** next to the page name → **Page Settings**
3. Scroll to **Custom Code** section
4. Under **Head Code**, paste your Humblytics script
5. Click **Save**

### 4 · Publish your site

⚠️ **Important**: Adding custom code doesn't make it live until you publish.

1. Click **Publish** button (top-right)
2. Choose your publishing target:
   * **Primary domain** (recommended) – your custom domain
   * Or staging domain if testing first
3. Wait for publishing to complete (usually 10-30 seconds)
4. Confirm with the green "Site published" message

**Note about staging:**

* Webflow staging URL: `project-name-xyz123.webflow.io`
* Use this for testing before publishing to custom domain
* Make sure Humblytics domain matches where you're testing

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your **published** Webflow site in a private/incognito window
3. Refresh once
4. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**Webflow-specific issues:**

* You have a **paid Webflow plan** (Basic or higher) – custom code isn't available on free Starter plan
* You clicked **Publish** after adding the code
* Domain in Humblytics matches your published domain:
  * ✓ Custom domain: `yourdomain.com`
  * ✓ Staging: `project-xyz123.webflow.io`
  * ✗ Webflow designer URL
* Script is in **Head Code**, not Footer Code
* You're testing the published site, not the Designer preview

**General issues:**

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

**Can't find Custom Code?** If you don't see **Site settings → Custom Code**, you're likely on a free Starter plan. Upgrade to Basic, CMS, Business, or Enterprise to access custom code.

### 6 · Explore your data & optimize

* **Dashboard** – real-time traffic, top pages, and referrers
* **Heatmaps** – auto-generated after a few visits; see where users click and scroll
* **Experiments** – launch A/B tests right from the dashboard—no extra scripts required

**Works on all Webflow pages:**

* Static pages
* CMS collection pages (blog posts, products, etc.)
* Dynamic filtered pages
* Utility pages (404, password, success)


# Wix

## Add Humblytics Analytics to Wix

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

**Note**: Custom code requires a Wix **Premium plan**. If you're on a free plan, you'll need to upgrade.

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

**Best for:** Tracking all pages on your site

1. Log in to your **Wix Dashboard**
2. Select your site and click **Settings** in the left sidebar
3. Scroll down and click **Custom Code** under Advanced Settings
4. Click **+ Add Custom Code** at the top right
5. In the dialog that opens:
   * **Paste your Humblytics script** in the code box
   * **Name**: Enter `Humblytics Analytics`
   * **Add Code to Pages**: Select **All pages**
   * **Place Code in**: Choose **Head**
   * **Load code once** or **Load code on each new page**: Choose **Load code on each new page**
6. Click **Apply**

#### Option 2: Single page tracking

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

1. Open the **Wix Editor**
2. Click **Pages & Menu** in the left sidebar
3. Hover over the page you want to track and click the **⋮** (three dots)
4. Select **Settings**
5. Go to **Advanced Settings → Custom Code**
6. Click **+ Add Custom Code**
7. Paste your Humblytics script:
   * **Place Code in**: Choose **Head**
   * **Load**: Choose **Load code on each new page**
8. Click **Apply**

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

### 4 · Publish your site

⚠️ **Important**: Adding custom code doesn't make it live automatically. You must publish your site.

1. Click **Publish** in the top right of the editor or dashboard
2. Wait for Wix to finish publishing (usually 10-30 seconds)
3. Confirm your site is live by visiting your domain

### 5 · Verify installation

1. Return to Humblytics and click **Verify Website**
2. Open your live Wix site in a private/incognito window and refresh once
3. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

**Wix-specific issues:**

* You have a **Premium plan** (custom code isn't available on free plans)
* You clicked **Publish** after adding the code
* Script is set to **Head** placement, not Body or Footer
* You selected **Load code on each new page** (not "once")
* You're testing your live domain, not the Wix preview URL

**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

**Can't find Custom Code?** If you don't see **Settings → Custom Code**, you're likely on a free plan. You'll need to upgrade to a Premium plan to add custom code.

### 6 · Explore & optimize

* **Dashboard** – view traffic, top pages, and referrers
* **Heatmaps** – auto-generated for clicks and scroll depth
* **Experiments** – run A/B tests directly from Humblytics (Experiments → New Test)


# WordPress

## Add Humblytics Analytics to WordPress

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

#### Option 1: Using a plugin (recommended)

**Best for:** Most WordPress sites—survives theme changes and updates

**Method A: WPCode (formerly Insert Headers and Footers)**

1. In your WordPress dashboard, go to **Plugins → Add New**
2. Search for **WPCode - Insert Headers and Footers**
3. Click **Install Now**, then **Activate**
4. Go to **Code Snippets → Header & Footer**
5. Paste your Humblytics script into the **Header** section
6. Click **Save Changes**

**Method B: Code Snippets (alternative)**

1. In your WordPress dashboard, go to **Plugins → Add New**
2. Search for **Code Snippets**
3. Click **Install Now**, then **Activate**
4. Go to **Snippets → Add New**
5. Give it a name (e.g., "Humblytics Analytics")
6. Paste this code:

php

```php
add_action('wp_head', function() {
    echo '<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>';
});
```

7. Set to run **Only run on site front-end**
8. Click **Save Changes and Activate**

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

#### Option 2: Add to your theme

**Only use this if:** You manage a custom theme or child theme

⚠️ **Warning**: Direct theme edits will be lost when you update your theme. Always use a child theme or the plugin method instead.

**Using a child theme (safe method):**

1. Create or activate a child theme
2. In your child theme's `functions.php`, add:

php

```php
add_action('wp_head', function() {
    echo '<script async src="https://app.humblytics.com/hmbl.min.js?id=YOUR_ID_HERE"></script>';
});
```

3. Save the file

**Direct theme edit (not recommended):**

1. Go to **Appearance → Theme File Editor**
2. **Accept the warning** about editing theme files
3. Select **header.php** from the right sidebar
4. Locate the closing `</head>` tag
5. Paste your Humblytics script just before `</head>`
6. Click **Update File**

⚠️ **Important**: You'll need to re-add this script every time you update your theme.

### Troubleshooting: JS optimizer and cache plugins

{% hint style="warning" %}
If the script is installed but tracking doesn't work (especially on mobile), a JS optimization plugin is the most likely cause. Features that **combine, minify, defer, or delay JavaScript** can strip or rewrite the async Humblytics script so it never loads, even though it's present in your theme code.
{% endhint %}

Exclude Humblytics from optimization in the tool you use:

**SiteGround Optimizer**

1. Go to **SG Optimizer → Frontend Optimization**
2. Under **Combine JavaScript Files** (and **Defer Render-blocking JS** if enabled), add an exclusion for `humblytics`

Or exclude it in code via your child theme's `functions.php`:

```php
// Exclude Humblytics from SiteGround Optimizer's JS combination
add_filter('sgo_javascript_combine_exclude', function ($exclude_list) {
    $exclude_list[] = 'hmbl.min.js';
    return $exclude_list;
});
```

**WP Rocket**

1. Go to **Settings → WP Rocket → File Optimization**
2. Add `hmbl.min.js` to the exclusion lists for **Minify/Combine JavaScript** and **Delay JavaScript execution**

**W3 Total Cache**

1. Go to **Performance → Minify**
2. Add `hmbl.min.js` to the **Never minify the following JS files** list

**Cloudflare Rocket Loader**

Rocket Loader rewrites how scripts load. Either disable it, or add `data-cfasync="false"` to the Humblytics script tag:

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

After changing any of these settings, clear all caches and re-verify.

### 4 · Verify installation

1. **Clear your cache** (if using WP Rocket, W3 Total Cache, etc.)
2. Return to Humblytics and click **Verify Website**
3. Open your live site in a private/incognito window and refresh once
4. Within \~30 seconds you should see a green **Verified** badge and live visitor count

**If verification fails, check:**

* Script ID matches your project in Humblytics
* You cleared WordPress cache and any CDN cache (Cloudflare, etc.)
* The script appears in your page source (right-click → View Page Source, search for "humblytics")
* No security plugins are blocking external scripts (check Wordfence, Sucuri settings)
* No ad-blockers or browser extensions are interfering
* Using a JS optimizer (SiteGround, WP Rocket, W3 Total Cache, Cloudflare)? See the **Troubleshooting: JS optimizer and cache plugins** section above. Optimizers stripping the script are the most common cause of "installed but not firing."

**Common WordPress caching plugins:**

* WP Rocket: Clear cache in **Settings → WP Rocket → Clear Cache**
* W3 Total Cache: Go to **Performance → Dashboard → Empty All Caches**
* WP Super Cache: Go to **Settings → WP Super Cache → Delete Cache**

### 5 · Explore & optimize

* **Dashboard** – track traffic, top pages, and referrers
* **Heatmaps** – auto-generated click & scroll analysis
* **Experiments** – run A/B tests without extra code (Experiments → New Test)


# Understanding Your Data

Humblytics provides a comprehensive suite of analytics, optimization, and automation tools. Here's a high-level overview of each section in the app.

## App Navigation

The Humblytics dashboard is organized into three main groups in the sidebar:

**Analyze**

Tools for viewing and interpreting your website data:

* **Analytics** — Your core traffic dashboard with tabs for Overview, Pages, Devices, Locations, Channels, LLM Referrals, Clicks, and Forms
* **Attribution** — Revenue attribution connecting ad spend to conversions, with campaign, source, and landing page breakdowns
* **Heatmaps** — Visual click and scroll heatmaps overlaid on your actual pages, with device-specific views
* **Funnels** — Conversion funnel builder to track multi-step user journeys and identify drop-off points
* **Experiments** — A/B split testing to compare page variants and measure conversion lift

**Automate**

AI-powered automation and integrations:

* **Workflows** — Automated reports, AI-powered analysis, and traffic alerts
* **Connectors** — Connect revenue providers (Stripe, Foxy), form platforms (JotForm, Tally), and more

**Utilities**

Tools and data access:

* **Marketing Tools** — UTM link generator, A/B test planner, significance calculator, and conversion rate calculator
* **Export Data** — Download all analytics data as CSV files
* **API** — Generate API keys and access your data programmatically

## Additional Features

* **AI Chat** — An AI-powered assistant available on every page via the right sidebar. Ask questions about your data in natural language, get traffic insights, test ideas, and optimization suggestions.
* **Settings** — Configure site timezone, hash fragment tracking, IP filtering, email reports, and review your tracking code installation.
* **Share** — Generate public dashboard links with optional password protection.

## Global Controls

Every analytics page includes:

* **Date Range Picker** — Switch between 24 hours, 7 days, Month to date, or select custom dates
* **Filters** — Filter by device, browser, country, traffic source, and UTM parameters
* **Share** — Share your dashboard via a public link

By utilizing these features, Humblytics enables you to gain deep insights into your website's performance, understand user behavior, and optimize for better engagement and conversions.


# Understanding Your Sites Dashboard

The sites dashboard is the first screen you see when you log in. It lists every website in your account with a quick health snapshot for each, so you can spot which site needs attention without opening it.

## What each column means

| Column        | What it shows                                                                                                                           |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| **Site**      | The site's favicon and domain. A pulsing teal dot next to the domain means the site has at least one A/B test running right now.        |
| **MTD**       | A mini trend line of the current month so far, for an at-a-glance sense of direction.                                                   |
| **Views MTD** | Total page views this calendar month so far (month to date).                                                                            |
| **MoM**       | Month over month: how this month's views so far compare to the same span of last month, shown as a percentage with an up or down arrow. |
| **Events**    | Total events tracked for this site (pageviews, clicks, form submissions, and custom events combined).                                   |
| **Tests**     | The number of A/B tests currently running on this site.                                                                                 |
| **Actions**   | Quick links into the site: Analytics, Split tests, Heatmaps, Funnels, and Site settings.                                                |

{% hint style="info" %}
**A red or downward indicator is about traffic, not uptime.** The sites dashboard never checks whether your website is online. A downward MoM arrow means views are trending down compared to last month, not that your site is down. Humblytics is not an uptime monitor.
{% endhint %}

## How the MoM comparison works

The comparison is same-span, not full-month. If today is the 17th, Humblytics compares views from the 1st through the 17th of this month against the 1st through the 17th of last month. That keeps the comparison fair mid-month instead of comparing a partial month against a full one.

## What happened to the Status column?

Earlier versions of this dashboard had a **Status** column with labels like "Down." It referred to traffic trends, but many users read it as site uptime, so we replaced it in a redesign. Trend information now lives in the MTD and MoM columns, and an active test is shown by the teal dot next to the site name.

## Where to go deeper

Click any site (or the Analytics action) to open its full analytics view. See [Understanding Site Traffic](/understanding-your-data/understanding-site-traffic) for the metrics inside a single site's dashboard.


# Understanding Live Activity

The Live Activity section on the Analytics Overview tab shows real-time visitor activity on your website. It gives you an instant view of who is on your site right now and what they're doing.

**Accessing Live Activity**

1. Log in to your Humblytics account and select your site.
2. Click **Analytics** in the sidebar under **Analyze**.
3. The Live Activity section appears at the top of the **Overview** tab.

**Globe Visualization**

The Live Activity section features an interactive 3D globe that shows real-time visitor locations. Animated arcs connect visitor locations to your server, giving you a visual representation of where your active visitors are located around the world.

**Real-Time Metrics**

Next to the globe, you'll see live counters:

* **Active** — The number of visitors currently on your site (shown with a green pulse indicator)
* **Views** — Total page views in the current real-time window
* **Clicks** — Total click events in the current real-time window
* **Top** — The country with the most active visitors

These metrics update automatically without needing to refresh the page.

**Recent Activity Feed**

The Recent Activity panel shows a chronological feed of the latest visitor events:

* **VISIT** events — Show when a visitor loads a page, including:
  * Country flag and country name
  * The page URL visited
  * Time since the event (e.g., "1m ago", "3m ago")
* **CLICK** events — Show when a visitor clicks an element, including:
  * Country flag and country name
  * The element clicked (e.g., "Clicked /: 'Link'")
  * Time since the event

Events are color-coded: VISIT events appear in a neutral style, while CLICK events are highlighted in orange.

At the bottom of the feed, you can:

* **Show more (+20)** — Load additional events
* **Show all** — Display the complete event history for the current period

**Using Live Activity**

Live Activity helps you:

* **Monitor launches** — Watch traffic in real-time during product launches or marketing campaigns
* **Verify tracking** — Confirm that page views and click events are being captured correctly after installation
* **Identify peak times** — See when your site gets the most simultaneous visitors
* **Spot geographic trends** — Observe where your real-time traffic is coming from


# Understanding Site Traffic

Humblytics offers robust tools to help you understand and analyze your website traffic. This section will guide you through the various features available on the Overview tab and explain what each metric means.

**Accessing the Overview Tab**

1. **Log in to Your Humblytics Account**
   * Navigate to [Humblytics](https://www.humblytics.com) and log in with your credentials.
2. **Navigate to the Analytics Section**
   * Once logged in, click on **Analytics** in the sidebar under Analyze. The Overview tab is displayed by default.

**Live Activity**

The Live Activity section gives you a real-time snapshot of what is happening on your site right now. It includes:

* **Globe Visualization** — An animated globe showing where your active visitors are located geographically.
* **Active Visitors** — The number of visitors currently on your site.
* **Views** — The number of page views from active sessions.
* **Clicks** — The number of click events from active sessions.
* **Top Country** — The country currently generating the most live traffic.
* **Recent Activity Feed** — A real-time event feed showing individual VISIT and CLICK events, including the visitor's country, the page they viewed or element they clicked, and how long ago the event occurred.

**Traffic Analytics**

The Traffic Analytics section displays your core metrics over the selected date range, along with an area chart plotting Page Views vs Visitors over time. The available metrics are:

* **Visitors** — The total number of distinct individuals who visited your site within the selected period. This metric helps you understand the reach of your website.
* **Views** — The total number of pages viewed by all visitors. A higher number of views indicates more engagement with your content.
* **Bounce %** — The percentage of visitors who leave your site after viewing only one page. A lower bounce rate suggests that visitors are finding your content engaging enough to explore further.
* **Duration** — The average length of time a visitor spends on your site. Longer durations typically indicate higher levels of engagement.
* **Revenue** — The total revenue attributed to your website during the selected period, pulled from connected revenue providers such as Stripe.
* **Rev/Visitor** — Revenue per visitor, calculated by dividing total revenue by the number of visitors. This metric helps you understand the monetary value of each visitor.
* **Conv. Rate** — The overall conversion rate, representing the percentage of visitors who completed a desired action such as a purchase or form submission.

Each metric card shows the current value and a comparison indicator so you can quickly see whether performance is trending up or down relative to the previous period.

**Revenue Attribution**

The Overview tab also includes a Revenue Attribution summary. This section displays:

* **Connected Provider** — A badge indicating your revenue source (e.g., Stripe).
* **Total Revenue** — The aggregate revenue for the selected date range.
* **Paid vs Organic Breakdown** — A horizontal bar chart breaking down revenue by traffic source, so you can see how much revenue comes from paid campaigns versus organic channels.

This gives you a quick view of which traffic sources are generating the most revenue without navigating to the full Attribution page.

**LLM Referral Tracking**

Humblytics automatically tracks traffic from AI tools like ChatGPT and Perplexity. These LLM referrals appear directly on your dashboard alongside traditional search traffic, allowing you to:

* **See which AI tools** are sending visitors to your site
* **Compare conversion rates** between AI referrals and traditional search
* **Understand the impact** of AI-driven discovery on your traffic patterns

LLM referrals are automatically detected and categorized in your traffic breakdown, giving you complete visibility into all sources of website visitors.

By regularly monitoring these metrics, you can gain valuable insights into your website's performance and make data-driven decisions to improve user engagement and overall effectiveness.


# Understanding Pages Data

Humblytics provides detailed insights into the performance of your content through the CMS (Content Management System) section. This guide will help you understand how to access and interpret your CMS data.

**Accessing CMS Insights**

1. **Navigate to the Pages Tab**
   * Click on the 'Pages' tab from the navigation menu.
2. **Select All Pages**
   * Choose the Pages collection you want to analyze. This could include blog posts, product listings, or other types of content managed within your Pages.

**Interpreting Pages Metrics**

Your Pages dashboard provides several key metrics to help you understand how your content is performing:

* **Total Page Views**
  * Displays the total number of views for all CMS items in the selected collection. This metric gives you an overall sense of the popularity of your content.
* **Top Referrer**
  * Shows the primary source of traffic for your CMS items. Understanding your top referrers can help you identify which external sites or campaigns are driving the most visitors to your content.
* **Average Scroll Depth**
  * Measures how far down the page visitors scroll on average. A higher scroll depth indicates that users are engaging more deeply with your content.
* **Average Session Length**
  * Indicates the average amount of time visitors spend on your CMS pages. Longer session lengths generally suggest better engagement with your content.

**Pages Items Breakdown**

Below these high-level metrics, you'll find a detailed breakdown of individual Pages items, including:

* **CMS Items**
  * The specific content items within your CMS collection (e.g., individual blog posts or product pages).
* **Total Page Views**
  * The number of views each CMS item has received. This helps you identify which pieces of content are the most popular.
* **Top Referrer**
  * The primary source of traffic for each CMS item. This metric helps you understand where the audience for each piece of content is coming from.
* **Average Scroll Depth**
  * The average percentage of each page that visitors scroll through. Higher percentages indicate more thorough engagement with the content.
* **Average Session Length**
  * The average time visitors spend on each CMS item. Longer session times suggest that the content is engaging and holds the visitor's attention.

By analyzing these metrics, you can identify which content resonates most with your audience and make informed decisions about your content strategy. Use this data to optimize existing content and plan future content that aligns with your audience’s interests and behaviors.


# Understanding Devices Data

The Devices tab in Humblytics Analytics shows how visitors access your website across different operating systems, device types, and browsers. This helps you understand your audience's technology preferences and optimize your site accordingly.

**Accessing Devices Data**

1. Log in to your Humblytics account and select your site.
2. Click **Analytics** in the sidebar under **Analyze**.
3. Click the **Devices** tab in the top navigation.

**Summary Metrics**

At the top of the page, you'll see a quick overview:

* **Sessions** — Total number of sessions across all devices
* **OS** — Number of distinct operating systems detected
* **Devices** — Number of device categories (desktop, mobile, tablet)
* **Browsers** — Number of distinct browsers detected
* **Top OS** — The most common operating system among your visitors

**Donut Chart**

A visual donut chart displays the distribution of visitors by operating system (or device/browser, depending on the selected sub-tab). Each segment shows the percentage share, giving you an at-a-glance view of your audience's technology mix.

**Sub-Tabs**

The Devices page has three sub-tabs, each with a searchable table:

* **OS** — Breaks down sessions by operating system (e.g., iOS, Android, Mac OS X, Windows, Linux, Chrome OS). Shows the operating system name, session count, a visual share bar, and percentage.
* **Device** — Breaks down sessions by device category (Desktop, Mobile, Tablet). Helps you understand how visitors prefer to browse your site.
* **Browser** — Breaks down sessions by browser (e.g., Chrome, Safari, Firefox, Edge, Samsung Internet). Useful for ensuring cross-browser compatibility.

Each table includes:

* A **search bar** to filter results
* **Sessions** column showing the number of sessions
* **Share** column showing the percentage with a visual bar

**Using Devices Data**

Understanding your device breakdown helps you:

* **Prioritize responsive design** — If most traffic is mobile, ensure your mobile experience is excellent
* **Test across platforms** — Focus testing on your top browsers and operating systems
* **Identify trends** — Track shifts in device usage over time to stay ahead of user preferences


# Understanding Locations Data

The Locations tab in Humblytics Analytics shows where your visitors are geographically located. This data helps you understand your audience's geographic distribution and tailor your content or campaigns accordingly.

**Accessing Locations Data**

1. Log in to your Humblytics account and select your site.
2. Click **Analytics** in the sidebar under **Analyze**.
3. Click the **Locations** tab in the top navigation.

**Summary Metrics**

At the top of the page, you'll see:

* **Sessions** — Total number of sessions from all locations
* **Countries** — Number of distinct countries your visitors come from
* **Cities** — Number of distinct cities detected
* **Regions** — Number of distinct regions or states detected
* **Top Country** — The country with the most visitors

**Location Overview**

Below the summary metrics, a ranked list shows your top locations with visitor counts and share percentages. This gives you a quick view of where most of your traffic originates.

**Sub-Tabs**

The Locations page has three sub-tabs:

* **Countries** — Breaks down sessions by country. Shows country code, country name, session count, a visual share bar, and percentage.
* **Cities** — Breaks down sessions by city. Useful for local businesses or region-specific campaigns.
* **Regions** — Breaks down sessions by state or region within countries. Helps identify regional trends.

Each table includes:

* A **search bar** to filter by location name
* **Sessions** column showing the number of sessions
* **Share** column showing the percentage with a visual bar

**Using Locations Data**

Geographic data helps you:

* **Target marketing campaigns** — Focus ad spend on regions with the highest traffic or conversion potential
* **Localize content** — Create region-specific content or landing pages for your top locations
* **Identify new markets** — Discover unexpected geographic interest in your product or service
* **Optimize ad targeting** — Use location data to refine audience targeting in your ad platforms


# Understanding Channels Data

The Channels tab in Humblytics Analytics breaks down your traffic by acquisition channel, helping you understand how visitors find your website. This data is essential for evaluating your marketing efforts and optimizing your traffic sources.

**Accessing Channels Data**

1. Log in to your Humblytics account and select your site.
2. Click **Analytics** in the sidebar under **Analyze**.
3. Click the **Channels** tab in the top navigation.

**Summary Metrics**

At the top of the page, you'll see:

* **Sessions** — Total sessions from all channels
* **Channels** — Number of distinct traffic channels (e.g., Direct, Organic Search, Paid Search, Social, Referral, Email)
* **Referrals** — Number of distinct referral sources
* **Sources** — Number of distinct UTM sources
* **Top Channel** — The channel driving the most traffic

**Donut Chart**

A visual donut chart displays the distribution of visitors by channel. Each segment shows the percentage share, helping you quickly identify your dominant traffic sources.

**Sub-Tabs**

The Channels page has five sub-tabs, each with a searchable table:

* **Channels** — Groups traffic into standard categories: Direct, Organic Search, Paid Search, Social, Referral, Email. Shows sessions and share percentage.
* **Referrals** — Lists individual referring domains (e.g., google.com, facebook.com, linkedin.com). Shows which websites send you the most traffic.
* **Sources** — Shows traffic grouped by UTM source parameter (e.g., google, newsletter, facebook). Useful for tracking campaign-level attribution.
* **Campaigns** — Breaks down traffic by UTM campaign parameter. Helps you measure the effectiveness of specific marketing campaigns.
* **Mediums** — Groups traffic by UTM medium parameter (e.g., cpc, email, social, organic). Shows how different marketing mediums perform.

Each table includes:

* A **search bar** to filter results
* **Sessions** column showing the session count
* **Share** column showing the percentage with a visual bar

**Using Channels Data**

Channel analytics help you:

* **Evaluate marketing ROI** — See which channels drive the most traffic and conversions
* **Optimize budget allocation** — Shift spend toward high-performing channels
* **Track campaign performance** — Use UTM parameters to measure specific campaign effectiveness
* **Identify growth opportunities** — Discover underutilized channels that could drive more traffic

For detailed guidance on setting up UTM parameters, see [Campaign Tracking with UTM Links](/campaign-tracking-with-utm-links).


# Understanding LLM Referrals

The LLM Referrals tab in Humblytics Analytics tracks traffic from AI assistants and chatbots. As more users discover websites through AI tools like ChatGPT and Perplexity, this data helps you understand the growing impact of AI-driven discovery on your traffic.

**Accessing LLM Referrals Data**

1. Log in to your Humblytics account and select your site.
2. Click **Analytics** in the sidebar under **Analyze**.
3. Click the **LLM Referrals** tab in the top navigation.

**Summary Metrics**

At the top of the page, you'll see:

* **Total Visits** — Total number of visits from all LLM sources
* **LLM Sources** — Number of distinct AI tools sending traffic
* **Top Source** — The AI tool driving the most traffic, displayed with its icon

**Donut Chart**

A visual donut chart displays the distribution of visits across LLM sources. Each segment is color-coded by AI tool, making it easy to see which platforms drive the most AI-referred traffic.

**All LLM Sources Table**

Below the chart, a searchable table lists every detected LLM source with:

* **Source** — The AI tool name with its icon (e.g., ChatGPT, Perplexity, Claude)
* **Visits** — Number of visits from that source
* **Share** — Percentage of total LLM traffic with a visual bar

**Supported LLM Sources**

Humblytics automatically detects and categorizes traffic from the following AI tools:

* **ChatGPT** — OpenAI's conversational AI
* **Perplexity** — AI-powered search engine
* **Claude** — Anthropic's AI assistant
* **Gemini** — Google's AI assistant
* **Copilot** — Microsoft's AI assistant
* **DeepSeek** — AI search and assistant
* **Grok** — xAI's conversational AI
* **Mistral** — Mistral AI's assistant
* **You.com** — AI-powered search
* **Phind** — AI search for developers
* **Poe** — Multi-model AI platform
* **Character.AI** — AI character platform

New LLM sources are added automatically as they emerge. No additional setup is required — Humblytics detects these referrals from your existing tracking script.

**Using LLM Referrals Data**

LLM referral tracking helps you:

* **Measure AI visibility** — Understand how often AI tools recommend your content
* **Compare AI vs. traditional traffic** — See how AI-referred visitors behave compared to search or social traffic
* **Optimize for AI discovery** — Create content that AI tools are more likely to surface and recommend
* **Track trends** — Monitor the growth of AI-driven traffic over time


# Understanding Click Data

Humblytics allows you to track and analyze click events on your website, providing insights into user interactions. This guide will help you understand how to access and interpret your click data to optimize your website's user interface and improve overall engagement.

**Accessing Click Insights**

1. **Navigate to the Clicks Tab**
   * Click on **Analytics** in the sidebar, then select the **Clicks** tab from the tab bar at the top of the page.
2. **Review the Summary Metrics**
   * The summary cards at the top give you a quick snapshot of click activity for the selected date range.

**Summary Metrics**

The Clicks tab displays five summary cards at the top of the page:

* **Clicks** — The total number of click events recorded across all tracked pages.
* **Sessions** — The total number of sessions during which clicks occurred.
* **CTR** — Click-through rate, the ratio of clicks to sessions expressed as a percentage.
* **Top Target** — The most frequently clicked element, shown as a link or button label.
* **Pages** — The number of distinct pages where click events were recorded.

**Why CTR can be higher than 100% (and clicks higher than visitors)**

Clicks count every click event, and one visitor can click many times. So clicks will often exceed your visitor or session count, and CTR can go above 100%. That's expected, not a data error.

Worked example: 200 sessions produce 500 clicks. CTR = 500 ÷ 200 = 250%. Every menu click, button click, and repeat click by the same person is counted.

If you're comparing against Google Analytics: GA4 counts users and events with different definitions (and dedupes some interactions), so the two tools will not match one-to-one. A conversion rate that looks like 7% in GA4 and a CTR above 100% in Humblytics are measuring different things: GA4 is showing converting users over total users, while CTR here is total click events over sessions. Neither number is wrong; they answer different questions.

**Clicks Over Time**

Below the summary metrics, a bar chart plots **Clicks vs Sessions** over time for the selected date range. This helps you spot trends and correlate click activity with traffic patterns.

**Page Group Filters**

Filter the click data by page group using the pill-style filter bar. Available groups are generated from your site structure and may include options such as All, Root, Landing-Pages, Tools, Partner, Post, Company, Legal, Board-Members, Ab-Experiments, and others specific to your site.

**Click Analytics Table**

The main data table lists each page with click activity. Columns include:

* **Page Name** — The page where clicks were recorded, with a page group tag displayed alongside.
* **Clicks** — The total number of clicks on that page.
* **Top Target** — The most clicked element on that page.
* **Sessions** — The number of sessions that included click events on that page.

**Expandable Row Details**

Click on any row in the table to expand it and view individual click targets on that page. Each expanded entry shows the specific element that was clicked (e.g., a button label, link text, or `humblytics` attribute value) along with its click count. This lets you drill down from the page level to individual element performance.

By analyzing these metrics, you can optimize your website's user interface and improve the overall user experience. Regularly reviewing your click data will help you understand user behavior and make data-driven decisions to enhance engagement and conversion rates.


# Understanding Forms Data

Humblytics provides detailed insights into the performance of your forms. This guide will help you understand how to access and interpret your form data to optimize user engagement and increase conversion rates.

**Accessing Form Insights**

1. **Navigate to the Forms Tab**
   * Click on **Analytics** in the sidebar, then select the **Forms** tab from the tab bar at the top of the page.
2. **Review the Summary Metrics**
   * The summary cards at the top give you a quick snapshot of form activity for the selected date range.

**Summary Metrics**

The Forms tab displays five summary cards at the top of the page:

* **Submissions** — The total number of form submissions recorded across all tracked pages.
* **Sessions** — The total number of sessions during which form submissions occurred.
* **Conv Rate** — The form conversion rate, calculated as submissions divided by sessions.
* **Top Form** — The form that received the most submissions during the selected period.
* **Pages** — The number of distinct pages where form submissions were recorded.

**Total vs Unique Submissions**

The **Submissions** number is a count of every `formSubmission` event fired, not a count of unique people. If one visitor submits the same form twice, that counts as two submissions. This is intentional: the dashboard measures form activity, the same way clicks measure click activity.

If you need deduplicated counts, the External Analytics API exposes a `unique_submissions` metric that counts distinct sessions that submitted a form. See the [External Analytics API](/external-analytics-api) reference.

**Why does my form count differ from my CRM?**

This is the most common question about forms data, so here's a worked example. Say your dashboard shows 120 submissions this month but your CRM shows 98 new contacts. Both numbers are usually correct. They're counting different things:

* **Duplicate submissions**: one person submitting twice fires two events but creates one CRM contact.
* **Test submissions**: your own test fills count as events, but you probably delete them from the CRM.
* **CRM deduplication**: most CRMs merge repeat submissions by email address into a single contact.
* **Validation failures**: some form setups fire the submit event even when the CRM rejects the entry (invalid email, spam filter).
* **Multi-step forms**: depending on setup, each step's submit can fire an event while the CRM only records the completed lead.

{% hint style="info" %}
Use the dashboard Submissions number to track trends and compare pages or A/B variants. Use the API's `unique_submissions` metric when you need to reconcile against CRM contact counts.
{% endhint %}

**Submissions Over Time**

Below the summary metrics, an area chart plots **Submissions vs Sessions** over time for the selected date range. This helps you identify trends in form engagement and correlate submission activity with overall traffic.

**Source Filters**

Filter form data by submission source using the pill-style filter bar. Available source options include:

* **All Sources** — View submissions from every integration.
* **Native Script** — Submissions captured by the Humblytics tracking script.
* **JotForm** — Submissions from JotForm-embedded forms.
* **Typeform** — Submissions from Typeform-embedded forms.
* **Tally** — Submissions from Tally-embedded forms.
* **Webflow** — Submissions from Webflow native forms.

**Page Group Filters**

You can further filter form data by page group using a second set of pill-style filters. Available groups include All, Root, Landing-Pages, Post, and others specific to your site structure.

**Form Submissions Table**

The main data table lists each page with form activity. Columns include:

* **Page Name** — The page where submissions were recorded, with a page group tag displayed alongside.
* **Submissions** — The total number of form submissions on that page.
* **Top Form** — The name of the form that received the most submissions on that page.

**Expandable Row Details**

Click on any row in the table to expand it and view individual form names and their submission counts. This lets you drill down from the page level to see exactly which forms are driving engagement on each page.

By analyzing these metrics, you can identify potential improvements in form design and optimize them to increase submission rates. Regularly reviewing your form data will help you understand user behavior and make data-driven decisions to enhance user engagement.


# Understanding Attribution

The Attribution page in Humblytics connects your ad spend to actual revenue, giving you a complete picture of your marketing ROI. It combines data from your connected payment provider (like Stripe) with your traffic source data to show which campaigns, sources, and landing pages drive real revenue.

**Accessing Attribution**

1. Log in to your Humblytics account and select your site.
2. Click **Attribution** in the sidebar under **Analyze**.

**Overview Cards**

At the top of the Attribution page, three summary cards provide a quick snapshot:

* **Revenue Tracked** — Total revenue captured from your connected payment provider. Connect ad accounts to unlock verified campaign attribution and ROAS.
* **Attribution Status** — Shows whether your ad accounts are connected for verified attribution. When verification is required, revenue is still tracked but source attribution uses traffic analytics signals.
* **ROAS** — Return on Ad Spend. Calculated once both ad spend and revenue data are connected.

**Attribution Section**

The main attribution section shows verified ad spend to revenue attribution:

* **Summary metrics** — Ad Spend, Impressions (IMP), Clicks, CPC, Sessions, Paid sessions, Revenue, Verified %, and ROAS
* **Bar chart** — Sessions vs. Revenue plotted over time, helping you visualize the relationship between traffic and revenue

**Sub-Tabs**

The attribution table has three views:

* **Campaigns** — Shows each ad campaign with its spend, clicks, CTR, sessions, revenue, and ROAS. Connect ad platforms like Meta Ads to populate this data.
* **Sources** — Breaks down revenue by traffic source, showing which referrers and UTM sources drive the most revenue.
* **Landing Pages** — Shows which landing pages generate the most revenue, helping you identify your highest-converting pages.

Each table includes a search bar to filter results.

**Connecting Ad Platforms**

To see full attribution data with ad spend and ROAS, connect your ad platforms via the **Connectors** page:

1. Navigate to **Connectors** in the sidebar under **Automate**.
2. Connect your ad accounts (Meta Ads, Google Ads — availability varies).
3. Return to the Attribution page to see verified campaign data.

If no ad platforms are connected, the Attribution page still shows revenue broken down by traffic source using Humblytics' own tracking data.

**Revenue on the Overview Tab**

Revenue attribution data also appears on the **Analytics > Overview** tab as the "Revenue Attribution" section. This shows:

* Total Revenue with a Stripe badge
* Paid vs. Organic revenue split with percentages
* Horizontal bar chart showing revenue by source (e.g., fb\_ad, unknown, affiliate\_ai)

**Using Attribution Data**

Attribution helps you:

* **Calculate true ROAS** — See exactly how much revenue each ad campaign generates
* **Optimize ad spend** — Shift budget toward campaigns and channels that drive real revenue
* **Identify top landing pages** — Discover which pages convert the most paid traffic into customers
* **Connect spend to outcomes** — Go beyond clicks and impressions to see actual revenue impact

**Querying Attribution Programmatically**

The same per-campaign full-funnel data the Attribution page renders is also available via the [Ads Attribution API](/ads-attribution-api). Use it from agents, dashboards, or scheduled scripts to pull spend → clicks → sessions → revenue without scraping the dashboard. For raw connector metadata (ad accounts, campaigns, daily insights, ad creative), see the [Ads Connections API](/ads-connections-api). Both endpoints accept the same property-scoped API key as the rest of the public API.


# Understanding Heatmap

Heatmaps are visual representations that illustrate user interactions on your website. Humblytics overlays click and scroll data directly onto screenshots of your actual pages, helping you see exactly where users engage and how far they scroll.

**Getting Started**

1. **Navigate to Heatmaps**
   * Click on **Heatmaps** in the sidebar under Analyze. The page header reads "Heatmaps - Visualize user clicks and scroll behavior on your pages."
2. **Add a Page**
   * Click the **Add Page** button to capture a new page for heatmap tracking. You can also click **Show Guide** for a walkthrough of the feature.
3. **Select a Page**
   * Choose an existing page from the list to view its heatmap data.

**Left Panel - Page Details**

When viewing a heatmap, the left panel provides controls and data summaries:

* **Page URL Selector** — A dropdown to switch between tracked pages.
* **Device View Toggle** — Switch between **Mobile** and **Desktop** views to see device-specific heatmap data.
* **Show Heatmap Toggle** — Turn the heatmap overlay on or off.
* **Heatmap Intensity Slider** — Adjust the intensity of the heatmap overlay from 0 to 100%.
* **Advanced Options** — Expandable section for additional configuration.
* **Date Range** — Displays the date range for the current heatmap data.
* **Captured On** — Shows when the page screenshot was last taken, with a refresh button to recapture.
* **Click Data Summary** — Overview of click events recorded on the page.
* **Scroll Details** — Shows the **Average Depth %** (how far down the page users scroll on average) and the total **Sessions** count.
* **Scroll Buckets** — A breakdown of scroll depth in 10% increments (0-10%, 10-20%, 20-30%, and so on), showing the reach percentage and session count for each bucket. The 0-10% bucket always shows 100% reach since every visitor sees the top of the page.
* **Refresh Screenshot** — Button to recapture the page screenshot with the latest design.
* **Remove Page** — A red button to delete the page from heatmap tracking.

**Right Panel - Screenshot View**

The right panel displays the actual page screenshot with data overlaid:

* **Heatmap / Scroll Toggle** — Switch between the click heatmap view and the scroll depth view using tabs at the top.
* **Click Heatmap View** — Shows color-coded hotspots on the page screenshot. Red and orange areas indicate high click activity; blue and gray areas indicate low engagement.
* **Scroll Depth View** — Displays horizontal scroll depth markers along the side of the screenshot (100%, 80%, 60%, 40%, 20%) showing how far users scroll.
* **Screenshot Controls** — Zoom in/out, capture a new screenshot, refresh, and enter fullscreen mode.

**How to Interpret Heatmaps**

1. **Identify Hot Spots** — Look for areas with red or orange hues, indicating high user interaction.
2. **Examine Cold Zones** — Blue or gray areas suggest low engagement. These might be opportunities for design improvement.
3. **Review Scroll Depth** — Check the scroll buckets to understand whether users are reaching your important content below the fold.
4. **Compare Devices** — Toggle between Mobile and Desktop views to see how user behavior differs by device type.

**Heatmap History and Versioning**

Humblytics stores all previously saved heatmaps so you can compare user behavior across different periods.

* Every saved heatmap is preserved automatically.
* Compare versions side-by-side to see how design changes, copy updates, or layout shifts impact user behavior.
* Maintain complete historical context instead of losing data with each update.

To compare versions:

1. Save a heatmap for your current page design.
2. Make page changes (design updates, copy changes, layout shifts).
3. Save the heatmap again.
4. Compare versions in your dashboard to see how changes impacted user behavior.

All existing heatmaps are automatically preserved, so you can start comparing versions immediately.


# Understanding Funnels

A conversion funnel represents the journey users take from their first interaction with your website to completing a desired action, such as making a purchase or filling out a form. Humblytics provides a visual funnel builder to help you track these journeys and identify where users drop off.

**Getting Started**

1. **Navigate to Funnels**
   * Click on **Funnels** in the sidebar under Analyze. The page header reads "Funnels - Track conversion paths and identify drop-off points."
2. **Review the Summary Cards**
   * At the top of the page, summary cards display key stats:
     * **Saved Funnels** — The number of funnels you have created, along with the total number of steps across all funnels.
     * **Total Visitors** — The total number of visitors who entered any of your tracked funnels.
     * **Tracked Events** — The combined count of tracked click and form events available for use in funnel steps.
3. **Create a New Funnel**
   * Click the **New Funnel** button to start building a funnel from scratch, or click **Suggest Funnels** to let Humblytics AI analyze your site and recommend funnel configurations based on your traffic patterns.

**Your Funnels**

The "Your Funnels" section lists all saved funnels. Each entry shows:

* **Funnel Name** — The name you assigned to the funnel.
* **Step Count** — The number of steps in the funnel.
* **Step Preview** — A summary of the steps included in the funnel.
* **Edit Button** — Click to open the funnel in the editor.

**Building a Funnel**

When creating or editing a funnel, you use a step builder to define the user journey. Each step can be one of three types:

* **Page View** — A visit to a specific page on your site.
* **Click** — A click on a tracked element (button, link, or custom `humblytics` attribute).
* **Form Submission** — A submission of a tracked form.

Add steps in sequence to map out the conversion path you want to track. For example, you might create a funnel with a landing page view as step one, a CTA button click as step two, and a form submission as step three.

**Funnel Visualization**

Once a funnel is saved and has collected data, Humblytics displays the results as a flow chart or Sankey diagram. The visualization shows:

* The number of visitors at each step.
* The drop-off rate between steps.
* Which steps lose the most users, so you can focus optimization efforts where they will have the greatest impact.

**Tracking Form Submission Rates**

To track form submission rates, build a funnel that maps page views to form completions. For example: add a step for the page view (e.g., the contact page where your form lives), then add a form submission as the next step. This shows you how many visitors who saw the form went on to complete it.

**Tips for Funnel Optimization**

* **Use AI Suggestions** — Click **Suggest Funnels** to get AI-powered recommendations based on your site's actual traffic patterns and user behavior.
* **Combine with Heatmaps** — Use heatmaps to understand why users drop off at specific funnel steps.
* **Test with Experiments** — Run A/B tests on pages where funnel drop-off is highest to improve conversion rates.
* **Enable Hash Fragment Tracking** — If your site uses multi-step forms with URL fragments (e.g., `#step-1`, `#step-2`), enable hash fragment tracking in your site settings so each step is captured correctly.
* **Review Regularly** — Funnel performance changes over time as your traffic sources, page designs, and audience evolve.

These tools collectively enable you to refine your conversion funnel, leading to improved user engagement and higher conversion rates.


# Understanding Experiments

The Experiments page (labeled "Experiments" in the sidebar) is where you create, manage, and analyze A/B split tests. It provides a centralized view of all your experiments with key performance metrics.

**Accessing Experiments**

1. Log in to your Humblytics account and select your site.
2. Click **Experiments** in the sidebar under **Analyze**.

**Summary Cards**

At the top of the page, four cards give you a quick overview:

* **Active Tests** — Number of experiments currently running
* **Total Visitors** — Combined visitor count across all experiments
* **Avg. Lift** — Average conversion lift across completed experiments (shown as a percentage, green for positive, red for negative)
* **Success Rate** — Percentage of completed experiments that achieved a statistically significant positive result

**Status Filters**

Filter your experiments by status using the pill buttons:

* **All** — Shows every experiment regardless of status
* **Drafts** — Experiments in setup that haven't been launched yet
* **Active** — Currently running experiments collecting data
* **Paused** — Experiments that have been temporarily stopped
* **Completed** — Finished experiments with results
* **Archived** — Old experiments moved to archive

A search bar lets you find experiments by name.

**Experiment Cards**

Each experiment is displayed as a card showing:

* **Name** — The experiment name
* **Status badge** — COMPLETED, ACTIVE, PAUSED, or DRAFT
* **Creation date** — When the experiment was created
* **Goal** — The conversion goal (e.g., form submissions, click-through rate, revenue, bounce rate, session time, page reach)
* **Variants** — Control and variant page URLs shown as pills
* **Visitors** — Total visitors assigned to the experiment
* **Lift** — Percentage change in conversion rate (green for improvement, red for decline)
* **Confidence** — Statistical confidence level of the result

**Creating a New Experiment**

Click the **New Experiment** button to start the experiment creation wizard. For detailed setup instructions, see the [Split Testing Overview](/split-testing-overview).

Click **Plan a Test** to use the A/B Test Planner tool, which helps you calculate sample size requirements and estimated test duration before launching.

**For more details on split testing, see:**

* [How to Setup a Split Test](/split-testing-overview/how-to-setup-a-split-test)
* [How to Analyze Split Test Data](/split-testing-overview/how-to-analyze-split-test-data)
* [Using the A/B Sample Size Calculator](/split-testing-overview/using-the-humblytics-a-b-sample-size-calculator)


# Split Testing Overview

{% hint style="info" %}
Humblytics offers split testing (A/B testing) to help you optimize your website by comparing different versions of your pages. This feature allows you to determine which version performs better based on user interactions and key metrics.
{% endhint %}

{% hint style="warning" %}
**In the Humblytics app**, this section is labeled **"Experiments"** in the sidebar navigation. The page title in the app is **"A/B Testing"** with the subtitle "Create and manage split tests to optimize your conversions". From this page you can use the **"Plan a Test"** button to calculate sample sizes and test duration, or the **"New Experiment"** button to create a new split test.
{% endhint %}

Split testing, also known as A/B testing, is a method used to compare two or more versions of a webpage to determine which one performs better. By testing different versions of your pages, you can identify the most effective design, content, and layout to optimize user experience and achieve your website goals.

#### Benefits of Using Split Testing

* **Data-Driven Decisions:** Make informed decisions based on real user data rather than assumptions.
* **Improved User Experience:** Identify the version that provides a better experience for your visitors.
* **Increased Conversion Rates:** Boost conversions by implementing the most effective page elements.
* **Enhanced Understanding of User Behavior:** Gain insights into how users interact with different versions of your site.

#### Key Features of Humblytics Split Testing

* **Easy Setup and Management:** Quickly create and manage split tests through a user-friendly interface.
* **Real-Time Data and Analysis:** Monitor the performance of each variant in real-time.
* **Customizable Goals and KPIs:** Define specific goals and key performance indicators to measure success.
* **Comprehensive Reports and Visual Aids:** Use detailed reports and visual aids like graphs and charts to analyze the results.


# How Humblytics Split Testing Works - Under the Hood

When you run a split test with Humblytics, the logic is seamlessly integrated into our standard analytics script—no extra setup required. If a visitor qualifies for an experiment, they'll be automatically and smoothly directed to the correct version of the page based on your test configuration.

We've designed our split testing engine to prioritize performance, SEO, and user experience:

Performance-first optimization without trade-offs

| Capability                        | What it means                                                                                     |
| --------------------------------- | ------------------------------------------------------------------------------------------------- |
| Lightning-fast & lightweight      | Adds only a few kilobytes and loads asynchronously, so it never blocks rendering                  |
| Seamless redirect handling        | Variant redirects occur before paint to avoid visual flicker or flashes of original content       |
| Analytics-aware event suppression | Silences events for the original page on redirect, preventing double-counting                     |
| Bot-safe by design                | Skips testing logic for bots and crawlers, protecting search-engine visibility and metrics        |
| SEO-friendly canonical control    | Automatically points variant pages to the control with canonical tags; index only what you choose |
| Cookie-free audience assignment   | Uses short-lived query parameters instead of cookies, preserving privacy and compliance           |
| Flexible targeting                | Choose session-level (new assignment each visit) or user-level (sticky experience) splits         |
| SPA-compatible                    | Works across multi-page sites and single-page apps, tracking navigation changes automatically     |

Build, launch & learn—without slowing down your site or compromising SEO

We've built Humblytics Split Testing to give you powerful optimization tools with zero performance trade-offs. Whether you're testing headlines, layouts, or full-page experiences, you can accomplish it all without slowing down your site or compromising your SEO.

### Measuring Split Test Performance

Once your test is live, Humblytics automatically tracks how each variant performs against your selected goal—whether that's a button click, form submission, or page visit. We handle all the heavy lifting in the background, so you can focus on results, not statistics.

#### Goal Tracking

Each split test has a primary goal—the action you're trying to optimize. For example:

* Clicking a "Sign Up" button
* Reaching a confirmation page
* Submitting a contact form

You'll define this goal when setting up your test, and we'll track how often it occurs for each variant.

#### Conversion Rate & Lift

We calculate the conversion rate for each variant by dividing the number of goal completions by the number of views. From there, we show you:

* **Absolute performance** (e.g., 12% vs. 10%)
* **Relative lift** (e.g., Variant B is performing 20% better than the control)

#### Confidence & Declaring a Winner

To ensure differences aren't just due to random chance, we apply standard statistical techniques to estimate confidence. When one variant performs significantly better than the others with enough data behind it, we flag it as the likely winner.

While we aim to give you actionable results quickly, we're also cautious about jumping to conclusions too early. In general:

* The more traffic you have, the faster we can detect a winner
* If results are close, we'll wait for more data to improve accuracy
* We visually show when a result is trending better—but not yet statistically significant

You'll always see a clear summary of which variant is winning, by how much, and how confident we are in the result.

#### Continuous Monitoring

You don't need to manually calculate anything - our dashboard keeps everything up to date in real time. You can check in at any time to see how your test is performing and decide whether to:

* Let it run longer
* Manually pick a winner
* End the test and apply the changes

### How Confidence Is Calculated (Under the Hood)

For each variant, we track:

* **Number of views** (visitors)
* **Number of goal completions** (conversions)
* **Conversion rate** = conversions ÷ visitors

To compare performance between two variants (e.g., Control vs. Variant B), we calculate the confidence level using a two-proportion Z-test, which tells us how likely the observed difference in conversion rates is due to chance.

#### The Steps:

1. **Define conversion rates for both groups:**
   * p₁ = conversions\_A ÷ visitors\_A
   * p₂ = conversions\_B ÷ visitors\_B
2. **Calculate pooled probability** (the average conversion rate across both groups):
   * p = (conversions\_A + conversions\_B) ÷ (visitors\_A + visitors\_B)
3. **Compute standard error (SE):**
   * SE = √\[p × (1 - p) × (1/visitors\_A + 1/visitors\_B)]
4. **Calculate Z-score:**
   * Z = (p₁ - p₂) ÷ SE
5. **Convert Z-score to confidence level** using the cumulative distribution function (CDF) of the normal distribution.

The resulting confidence level represents the probability that the observed difference is statistically significant (i.e., unlikely to be due to random chance). For example, a Z-score of ±1.96 corresponds to approximately 95% confidence.

In the UI, we surface this confidence level with visual indicators (e.g., "95% confidence this variant performs better") and show trending results when the confidence threshold hasn't been reached yet.


# How to Setup a Split Test

## Creating A/B Page Variants in Humblytics

A/B (or split) testing lets you compare two versions of a page and prove—statistically— which one performs better. Humblytics makes the workflow dead‑simple: pick a goal, drop in two URLs, choose how visitors are assigned, and hit **Start Experiment**.

***

### Step‑by‑Step Instructions

#### 1. Start a New Experiment

In the left hand menu choose **Split Testing** and click **Start New Experiment.**

#### 2. Set Your Testing Goal

Choose **what success looks like** for this test. Humblytics offers two main goal types:

**Conversion Goals:**

| Goals                     | What it Tracks                                                                      |
| ------------------------- | ----------------------------------------------------------------------------------- |
| **Form Submission Event** | Tracks when users complete specific forms (newsletter signups, contact forms, etc.) |
| **Click Event**           | Tracks when users click specific buttons or links (CTAs, downloads, etc.)           |
| **Page View Event**       | Tracks when users visit specific pages or trigger custom page view events           |
| **Purchase Event**        | Tracks successful purchases or transactions (ecommerce conversions)                 |

**Page Goals:**

| Goals                      | What it Tracks                                               |
| -------------------------- | ------------------------------------------------------------ |
| **Reach Destination Page** | Tracks when users visit a specific internal or external page |

#### Destination Page Goal Setup

The **Reach Destination Page** goal tracks when users navigate to a specific page. This goal type supports both internal and external destinations:

**Internal Pages (Same Domain)** For pages on your own website, simply enter the page path:

* `/thank-you` - tracks visits to your thank-you page
* `/pricing` - tracks visits to your pricing page
* `/signup` - tracks visits to your signup page

**External Pages (Different Domain)** For pages on external domains, enter the complete URL. **Important:** This only registers as a conversion if the user visits the external page directly from your site.

✅ **Tracks:** Your site → External page\
❌ **Doesn't track:** Your site → Third-party page → External page

Examples of external destination pages:

* `https://checkout.yourdomain.com/complete` - separate checkout domain
* `https://calendly.com/yourcompany/meeting` - external booking page
* `https://app.thirdparty.com/signup` - external signup flow

Simply enter the full URL in the destination page field when setting up your goal.

#### Advanced: Cross-Domain Event Goals

For more complex cross-domain tracking scenarios, you can use **cross-domain events** as split test goals instead of simple destination page tracking. This is especially useful when:

* You need to track specific interactions on external sites (not just page visits)
* The conversion flow involves multiple steps across domains
* You want to track custom events that happen after reaching an external page

**How It Works:**

1. **Set up cross-domain event tracking** on the external site using `Humblytics.trackPageView()`, `Humblytics.trackFormSubmission()`, or `Humblytics.trackClickEvent()` with the `domain` parameter
2. **Create a split test** and choose the appropriate **event goal type** (Page View Event, Form Submission Event, or Click Event)
3. **Specify the event name** that matches your cross-domain tracking implementation

**Example Scenario:** Instead of tracking just "reached checkout page" you can track "completed checkout process" even if the checkout happens on an external domain:

```javascript
// On external checkout domain
window.Humblytics.trackFormSubmission("checkout-complete", {
  domain: "yourmainsite.com",
});
```

Then set your split test goal to track the "checkout-complete" form submission event.

**Benefits of Cross-Domain Event Goals:**

* Track the actual conversion action, not just page arrival
* Handle complex multi-step external flows
* Maintain attribution across domain boundaries
* Get more precise conversion data

For complete setup instructions, see our [Cross-Domain Tracking & Whitelisting](/cross-domain-tracking-and-whitelisting) guide.

#### 3. Name Your Experiment

Give it a clear and specific name (e.g., *"Home Page Hero — Image vs Video"*). This helps you find and report on it easily later.

#### 4. Add Your Variant Pages

You'll need two (or more) live pages:

* **Control (A):** Your current version.
* **Variant (B, C, etc.):** The version you want to test.

**Steps:**

1. Build your variants in your site builder (e.g., Webflow, Framer, WordPress).
2. Change one key element only (headline, image, button color, etc.).
3. Copy the live URLs for each page.
4. Paste them into Humblytics under:

* Control URL
* Test Variant URL(s)

{% hint style="warning" %}
**URL matching is exact, including the trailing slash.** `/my-page` and `/my-page/` are treated as different URLs. If your host redirects one to the other (many do), a variant entered without the slash will show zero traffic. Open each variant in your browser, let any redirect finish, and copy the final URL from the address bar into Humblytics.
{% endhint %}

> Optional: Add notes or your test hypothesis to stay organized.

#### 5. Set Visitor Assignment

| Option                    | How It Works                                                                                               | When to Use                                                                  |
| ------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| **Allow Visitor Overlap** | Assignment happens on every *session*—a repeat visitor *could* see different versions on different visits. | High‑traffic sites, short tests, early ideation phases.                      |
| **No Visitor Overlap**    | Assignment happens once per *user* (sticky)—they always see the same version.                              | Brand‑sensitive flows, long funnels, or when you need behaviour consistency. |

#### 6. Apply Optional **Restrictions**

* **Geo Targeting:** Run tests for specific regions or countries.
* **Audience Filters:** Exclude certain traffic types (e.g., only test on mobile or organic traffic).

#### 7. Launch the Experiment

* Review everything
* Click **"Start Experiment"**
* Humblytics will begin splitting traffic—no extra code or setup needed!

***

#### Frequently Asked Questions

**How do I build variant pages in Webflow, Framer, or custom‑coded sites?**\
\
• *Webflow:* Duplicate the page, update content, publish.\
\
• *Framer:* Duplicate the Frame route, edit, publish.\
\
• *Custom‑coded (React/Next.js, Rails, Laravel, plain HTML):* Copy the page template or branch, adjust the element you're testing, deploy it at a unique path (e.g., /home‑alt).

Keep the Humblytics global script in the `<head>` so tracking continues seamlessly.

\
No extra tracking snippets are needed—Humblytics' global script captures all variants automatically.

**My variant is getting no traffic. What's wrong?**\
\
The most common cause is a URL mismatch from a redirect. Check, in order:\
\
• **Trailing slash:** is the variant configured as `/alt` while your site redirects to `/alt/` (or the reverse)? Copy the final post-redirect URL from the browser and update the experiment.\
\
• **www vs non-www:** the variant URL should match the domain visitors actually land on.\
\
• **Variant is live:** open the variant URL in an incognito window and confirm it loads with the Humblytics script in the `<head>`.

**How long does a split test run?**\
\
Tests run until you manually stop them. There is no automatic end date or auto-stop at significance. For how long you *should* run one, see [Deciding How Long to Run an A/B Test](/split-testing-overview/deciding-how-long-to-run-an-a-b-test).

**What if I need to pause or edit a live test?**\
\
Navigate to the Split Testing list, click the ••• menu, and choose **Stop.** Data collected so far is preserved.

**Will the test slow down my site?**\
\
No. Humblytics routes visitors server‑side after initial request; the 36 kb script is defer‑loaded and never blocks rendering.

***

*Happy testing! Measure, learn, and iterate with confidence using Humblytics.*


# Creating A/B Page Variants for Split Testing

A/B (or split) testing lets you compare two versions of a page and prove—statistically—which one performs better. Humblytics makes the workflow dead‑simple: pick a goal, drop in two URLs, choose how visitors are assigned, and hit **Start Experiment**.

***

#### Step‑by‑Step Instructions

1. **Access the Split Testing Section**
   * Log in to your Humblytics dashboard.
   * In the left‑hand navigation, click **Split Testing**.
2. **Start a New Experiment**
   * Click **Start New Experiment** to launch the five‑step wizard.
3. **Select a Testing Goal**
   * Choose the metric that will decide the winner. Humblytics groups goals into two buckets:
     * **Engagement Goals** – Increase Session Time and Reduce Bounce Rate.
     * **Conversion Goals** – Increase Form Submissions, Increase Click-through rate, Reach Destination Page and Increase Revenue.
   * *Tip: pick **one** primary goal per test to keep analysis clear.*
4. **Name Your Experiment**
   * Give the test a descriptive title (e.g., *“Home Page Hero — Image vs Video”*). Good names speed up reporting later.
5. **Create & Add Your Variant Pages**\
   When you A/B test, **Variant A (Control)** is your current page, and **Variant B (or C, D …)** is the modified page you believe will outperform the control.

\
Below are copy‑and‑paste playbooks for the most popular site builders so you can spin up Variant B in minutes.

**Webflow**

1. In the Designer, right‑click the page in the Pages panel and select **Duplicate**.
2. Rename the new page (e.g., `home-video`) and update the slug in **Page Settings → General Settings**.
3. Swap the element you want to test—headline, hero media, CTA colour, etc.
4. Click **Publish**. Webflow keeps the Humblytics global script intact in the `<head>`, so no extra tracking code is required.

**Framer**

1. Duplicate the Frame route you want to test (**Right‑click → Duplicate**).
2. Edit the variant (change imagery, copy, layout).
3. Confirm the URL in **Page → Path** (e.g., `/home-video`).
4. **Publish** the site—Framer auto‑injects the existing Humblytics snippet into the new route.

**WordPress (Block Editor / Elementor / Divi)**

1. In the WordPress dashboard go to **Pages → All Pages**. Hover over the page and click **Duplicate Page** (or use the Duplicate Post plugin if you don’t see the option).
2. Open the duplicate in your preferred builder (Block Editor, Elementor, Divi) and adjust the single element under test.
3. Under **Permalink**, shorten the slug to something relevant (`/pricing-b`).
4. **Publish → Visibility: Public**. Your original Humblytics script—added once in `header.php` or via a snippets plugin—tracks the variant automatically.

**Shopify (Online Store 2.0)**

1. Go to **Online Store → Pages** (for regular pages) or **Products** / **Collections** if you’re testing product or collection pages.
2. Click **Duplicate**. Shopify appends “copy” to the handle—edit it to a clear variant slug (`/summer‑tees‑b`).
3. Make your single change (price anchoring, hero image, copy tweak).
4. **Save** and **Set Page Status → Active**.
5. If you placed the Humblytics script in **theme.liquid** it fires on every page—including variants—without extra work.

**Wix (Editor X / Wix Studio)**

1. From the Site Structure sidebar choose the page ••• menu → **Duplicate Page**.
2. Rename the page and edit the URL in **SEO Basics → URL slug**.
3. Update your test element (form length, hero media, social proof block).
4. Click **Publish Site**. Because the Humblytics snippet lives in **Settings → Custom Code → Head**, tracking persists across new pages.

**Keep These Rules in Mind**

* **One change at a time** – isolates cause and effect.
* **Short, human‑readable slugs** – `/pricing‑video`, `/landing‑alt`.
* The global Humblytics script only needs to be installed **once per site**—all variants are captured automatically.

1. **Choose Visitor Assignment**
   * Default 50 / 50 split is pre‑selected.
   * Optional: Weighted or sequential roll‑outs for risk mitigation.
2. **Apply Optional Restrictions**
   * **Geo Restrictions** – limit to specific countries (e.g., EU‑only to factor in GDPR banners).
   * **Audience Restrictions** – one‑click filters to exclude Mobile, Desktop, Organic, or Paid traffic.
3. **Launch the Experiment**
   * Review settings.
   * Click **Start Experiment**. Traffic begins routing instantly—no extra code deployment required.
4. **Monitor Results & Declare a Winner**
   * Humblytics updates lift‑percentages and p‑values in real time.
   * Green check‑marks indicate statistical significance (default 95 % confidence).
   * Stop the test manually or let Humblytics auto‑end it once significance and minimum‑sample thresholds are met.

***

#### Best‑Practice Checklist

* **Hypothesis‑Driven** – write a one‑sentence hypothesis before every test.
* **One Variable at a Time** – avoids ambiguous results.
* **Run Full Business Cycles** – include weekends if your traffic pattern changes.
* **Segment Post‑Test** – slice by device, channel, or geo to uncover hidden wins.
* **Document Learnings** – record what worked and what didn’t for faster future iterations.

***

#### Frequently Asked Questions

**Q: Do I need separate Humblytics tracking snippets for each variant?**\
\&#xNAN;*A: Nope.* The single global script you installed initially captures every page variant automatically.

**Q: Can I test more than one variant at a time?**\
Yes—click **Add Variant** in the URL step. Traffic splits evenly (e.g., 33 / 33 / 33 %).

**Q: What if I need to pause or edit a live test?**\
Navigate to **Split Testing**, open the ••• menu beside the test, and choose **Pause** or **Edit**. Data collected so far is preserved.

**Q: Will the test slow down my site?**\
No - the 36 kb Humblytics script is defer‑loaded and never blocks rendering.

***

*Happy testing! Measure, learn, and iterate with confidence using Humblytics.*


# Conversion Goals

Conversion goals define what success looks like for your A/B test. Choose the goal that best matches what you're trying to optimize:

* [Increase Form Submissions](/split-testing-overview/creating-a-b-page-variants-for-split-testing/conversion-goals/increase-form-submissions) - Track form completion rates
* [Increase Click-through rate](/split-testing-overview/creating-a-b-page-variants-for-split-testing/conversion-goals/increase-click-through-rate) - Measure button and link clicks
* [Reach Destination Page](/split-testing-overview/creating-a-b-page-variants-for-split-testing/conversion-goals/reach-destination-page) - Track multi-step journey completion
* [Reach External Destination](/split-testing-overview/creating-a-b-page-variants-for-split-testing/conversion-goals/reach-external-destination) - Track successful transfers to partner sites, affiliate destinations, and multi-domain checkouts
* [Increase Revenue](/split-testing-overview/creating-a-b-page-variants-for-split-testing/conversion-goals/increase-revenue) - Measure revenue and purchase conversions


# Increase Form Submissions

The **Increase Form Submissions** goal measures how many visitors complete and submit a form on your page — such as contact, sign-up, or lead generation forms.

\
This goal is perfect for optimizing form design, placement, or copy to improve lead capture and conversion rates.

Choose this goal when your primary objective is to **generate more leads or user signups** through form completions.

\
Examples include:

* Contact or inquiry forms
* Newsletter subscriptions
* Product demo or trial sign-ups
* Lead generation or waitlist forms

#### What It Tracks

Once your test is running, Humblytics automatically detects and tracks:

* Successful form submissions (both native and embedded forms)
* Button clicks tied to the submission event
* Form completions across single or multi-step flows

> No setup required — Humblytics automatically tracks form submissions across Webflow, Framer, and most embedded form tools (like Typeform, Tally.so, and HubSpot).

#### How It Works

1. Visitors are randomly assigned to **Control (A)** or **Variant (B)**.
2. Humblytics tracks when a visitor **submits a form** on each version.
3. The platform compares submission rates between A and B to determine which design, copy, or layout leads to higher conversions.
4. Real-time statistical calculations identify the winning version once significance is reached.

#### Common Test Ideas

* Adjust form length (fewer vs. more fields)
* Change button text or color (e.g., “Submit” → “Get Started”)
* Modify placement (above the fold vs. end of page)
* Test different calls-to-action or offer wording
* Compare embedded vs. pop-up form layouts

#### Steps to Set Up

1. Go to **Split Testing** in your Humblytics dashboard.
2. Click **Start Creating Experiment**.
3. Under **Select Testing Goal**, choose **Increase Form Submissions**.
4. Choose your **Experiment** and **Test Type**.
5. Define **Page Variants** (Control A and Variant B URLs).
6. Configure **Visitor Assignment** (allow or prevent overlap).
7. Apply **Restrictions** (Geo or Audience, if applicable).
8. Launch the test and monitor conversion results live.

**By the end of your test, you should see:**

* More completed forms
* Higher lead generation rate
* Improved conversion metrics within your funnels


# Increase Click-through rate

The **Increase Click-Through Rate (CTR)** goal measures how effectively your page encourages visitors to **click on key elements** — such as buttons, links, navigation menus, or promotional banners.

\
It’s ideal when your main objective is to **boost user engagement** and guide visitors toward deeper actions, like viewing a product, starting a signup, or exploring a campaign page.

Select this goal when you want to test how different versions of your content influence user clicks and engagement.

\
Common examples include:

* Call-to-action (CTA) buttons (“Buy Now,” “Learn More,” “Get Started”)
* Internal links or navigation menus
* Pricing plan selectors
* Hero or promotional banners
* Product images that lead to detail pages

#### What It Tracks

Once your test starts, Humblytics automatically detects and measures:

* Clicks on tracked elements (buttons, links, or navigation)
* Number of unique visitors interacting with CTAs
* Click-through rates between Control (A) and Variant (B)

> No manual setup needed — Humblytics auto-tracks most clickable elements across Webflow, Framer, Shopify, and other supported platforms.\
> For full control, you can tag specific elements using custom attributes (e.g., `humblytics="cta-button"`).

#### How It Works

1. Visitors are evenly split between **Control (A)** and **Variant (B)**.
2. Humblytics records when users **click tracked elements** on each version.
3. The platform calculates the **click-through rate (CTR)** for both variants.
4. Statistical analysis runs in real-time to identify which version generates more clicks and engagement.

#### Common Test Ideas

* Test different CTA button colors or text (e.g., “Sign Up Free” vs. “Get Started”)
* Experiment with button placement (hero section vs. below content)
* Try alternate navigation labels or menu layouts
* Compare promotional banner designs or headlines
* Test link styles or animations to improve visibility

#### Steps to Set Up

1. Open the **Split Testing** section from the sidebar.
2. Click **Start Creating Experiment**.
3. Under **Select Testing Goal**, choose **Increase Click-Through Rate**.
4. Choose your **Experiment** and **Test Type**.
5. Add **Page Variants** — URLs for Control (A) and Variant (B).
6. Configure **Visitor Assignment** (allow or prevent overlap).
7. Apply **Restrictions** (Geo or Audience, if needed).
8. Launch the test and monitor CTR results in real-time.

**By the end of your test, you should see:**

* **Higher click-through rates** on primary CTAs
* **Improved engagement** with interactive elements
* **Increased flow** to conversion-focused pages (signups, checkouts, etc.)


# Reach Destination Page

The **Reach Destination Page** goal measures how many visitors successfully complete a **multi-step journey** and arrive at a specific page — such as a checkout confirmation, signup success page, or onboarding completion step.

\
This goal helps you understand and optimize your **conversion funnels** by testing how layout, copy, or navigation changes impact the user’s ability to reach key milestones.

Use this goal when your main objective is to **guide more visitors to a final destination page** in a flow.\
Ideal for:

* Checkout or purchase completion pages
* Signup or onboarding success pages
* Booking confirmation pages
* Multi-step forms or funnel completion pages

> Great for optimizing **multi-step experiences** where you want users to complete a sequence — not just click once.

#### What It Tracks

Humblytics automatically tracks the number of visitors who:

* Start on your test page (Control or Variant)
* Successfully reach the designated **destination URL** (e.g., `/thank-you`, `/success`, `/confirmation`)

It then compares completion rates between the two test versions to show which version leads to more users finishing the journey.

#### How It Works

1. Visitors are randomly assigned to **Control (A)** or **Variant (B)**.
2. Humblytics tracks whether each visitor reaches the **destination page URL** you specify.
3. The system calculates the **conversion rate** (visitors who reached destination ÷ total visitors).
4. Real-time analytics show which version leads to higher completion and funnel success rates.

#### Common Test Ideas

* Compare different **checkout layouts** (single page vs. multi-step).
* Test **onboarding flows** with or without progress indicators.
* Experiment with **navigation clarity** (simplified menus vs. full navigation).
* Test different **call-to-action placements** leading to final conversion pages.
* Try alternative **funnel sequences** to reduce drop-offs.

#### Steps to Set Up

1. Click the **Split Testing** menu in your Humblytics dashboard.
2. Click **Start Creating Experiment**.
3. Under **Select Testing Goal**, choose **Reach Destination Page**.
4. Enter your **Destination Page URL** (e.g., `/thank-you` or `/confirmation`).
5. Choose your **Experiment** and **Test Type**.
6. Add your **Control (A)** page URL.
7. Configure **Visitor Assignment** (allow or prevent overlap).
8. Apply **Restrictions** (Geo or Audience filters as needed).
9. Launch your test and monitor destination page completions in real-time.

By running this test, you’ll gain insights into which experience helps users complete your desired flow — resulting in:

* Higher **checkout completion rates**
* Improved **onboarding success**
* Better **funnel performance and reduced drop-offs**


# Reach External Destination

The **Reach External Destination** goal tracks successful transfers to partner sites, affiliate destinations, and multi-domain checkouts. This goal type helps you understand which outbound placements actually send users where you want them, eliminating visibility gaps when users click external links.

## What It Tracks

Humblytics automatically tracks when visitors:

* Start on your test page (Control or Variant)
* Click external links to partner sites, affiliate destinations, or multi-domain checkouts
* Successfully reach the designated external destination URL

This goal provides complete visibility into outbound link performance, helping you identify which placements drive actual user transfers rather than just clicks.

## Why Use This Goal

**Stop losing visibility** when users click external links. Traditional analytics often lose track of users once they leave your domain. The Reach External Destination goal maintains tracking through:

* **Partner site redirects** - Track successful transfers to affiliate partners
* **Multi-domain checkouts** - Monitor completion rates across separate checkout domains
* **External booking systems** - Measure successful transfers to third-party booking platforms
* **Affiliate destinations** - Understand which placements drive actual conversions

## How It Works

1. Visitors are randomly assigned to **Control (A)** or **Variant (B)**
2. Humblytics tracks when users click external links configured for tracking
3. The system verifies successful arrival at the external destination URL
4. Conversion rates are calculated (successful transfers ÷ total visitors)
5. Real-time analytics show which version leads to higher external destination completion rates

## Common Use Cases

* **Affiliate Link Optimization** - Test which placements drive more successful transfers to partner sites
* **Multi-Domain Checkout** - Compare checkout flows that redirect to external payment processors
* **Partner Integration Testing** - Measure which designs drive more successful partner site visits
* **Booking System Optimization** - Test layouts that lead to external booking platforms
* **External Tool Adoption** - Measure successful transfers to third-party tools or services

## Setup Instructions

1. Click the **Split Testing** menu in your Humblytics dashboard
2. Click **Start Creating Experiment**
3. Under **Select Testing Goal**, choose **Reach External Destination**
4. Enter your **External Destination URL** (e.g., `https://partner-site.com/checkout` or `https://booking-platform.com/confirm`)
5. Configure external link tracking in your site settings or via custom tracking code
6. Choose your **Experiment** and **Test Type**
7. Add your **Control (A)** page URL
8. Configure **Visitor Assignment** (allow or prevent overlap)
9. Apply **Restrictions** (Geo or Audience filters as needed)
10. Launch your test and monitor external destination completions in real-time

## Technical Implementation

For external links to be tracked, they must be configured with Humblytics tracking. This can be done through:

* **Site Settings** - Enable external link tracking in your site configuration
* **Custom Tracking Code** - Add tracking attributes to external links:

  ```html
  <a href="https://external-site.com" 
     data-humblytics-external="true"
     data-humblytics-destination="https://external-site.com/confirmation">
    External Link
  </a>
  ```

## Best Practices

* **Clear Destination URLs** - Use exact destination URLs that represent successful completion
* **Test Tracking** - Verify external link tracking before launching split tests
* **Cross-Domain Setup** - Ensure proper cross-domain tracking configuration for multi-domain flows
* **Monitor Attribution** - Review attribution data to ensure proper conversion tracking

## Benefits

By running this test, you'll gain insights into which experience helps users successfully reach external destinations, resulting in:

* **Higher partner site transfers**
* **Improved affiliate conversion rates**
* **Better multi-domain checkout completion**
* **Complete visibility** into outbound link performance


# Increase Revenue

The **Increase Revenue** goal is designed for **e-commerce businesses and revenue-driven websites** that want to maximize sales and revenue per visitor.

\
It measures which version of your page generates more total revenue — whether through product purchases, plan upgrades, or upsell offers — helping you identify which page design, pricing layout, or conversion flow delivers the highest return.

Use this goal when your primary objective is to **drive more revenue** rather than just form submissions or clicks.

\
Perfect for:

* Product and checkout pages
* Pricing or subscription plan layouts
* Upsell or cross-sell offers
* Limited-time promotional campaigns
* Any revenue-generating page flow

> Ideal for online stores, SaaS platforms, or any business tracking monetary conversions.

#### What It Tracks

Humblytics automatically tracks and attributes:

* **Completed purchases or paid conversions**
* **Total revenue generated per variation**
* **Average revenue per visitor (RPV)** and conversion rate differences
* **Performance of pricing tiers or product offers**

> Works seamlessly with integrated checkout systems and payment success pages — no extra coding required.

#### How It Works

1. Visitors are evenly distributed between **Control (A)** and **Variant (B)**.
2. Humblytics detects when users complete a purchase or revenue event.
3. The platform calculates both **conversion rate** and **average revenue per visitor** for each version.
4. Real-time analytics show which variation delivers higher sales and revenue lift.

#### Common Test Ideas

* Test different **product page layouts** (short vs. detailed descriptions).
* Compare **pricing table designs** or call-to-action placements.
* Try **bundle offers** or promotional discounts.
* Test **upsell pop-ups** or “related products” recommendations.
* Experiment with **checkout form simplicity** or progress indicators.

#### Steps to Set Up

1. In your Humblytics dashboard, click the **Split Testing** side menu.
2. Click **Start Creating Experiment**.
3. Under **Select Testing Goal**, choose **Increase Revenue**.
4. Select your **Experiment** and **Test Type**.
5. Add URLs for **Control (A)** and **Variant (B)**.
6. Configure **Visitor Assignment** (allow or prevent overlap).
7. Apply **Restrictions** (Geo or Audience, as needed).
8. Launch your experiment and monitor revenue performance in real time.

By the end of the test, you’ll have clear data on which version drives:

* **Higher total sales and order values**
* **Increased revenue per visitor (RPV)**
* **Improved checkout and upsell performance**


# Engagement Goals


# Increase Session Time

The **Increase Session Time** goal measures how long visitors stay and engage with your page or website content.

\
It’s designed to help you test layout, content, or interactive elements that encourage users to explore more, scroll deeper, and spend longer periods interacting with your site.

This goal is especially useful for **blogs, landing pages, or content-driven websites** where engagement duration is a key performance indicator.

Choose this goal when your objective is to **increase visitor engagement** and reduce bounce rates.\
Ideal for:

* Content-heavy or educational pages
* Landing pages or product demos
* Video or multimedia sections
* Interactive tools or dynamic content blocks
* Long-form blog posts or guides

> A great choice when optimizing user experience and content engagement before conversion goals like form submissions or purchases.

#### What It Tracks

Once activated, Humblytics automatically tracks:

* **Average session duration per visitor**
* **Engagement depth** — time spent actively scrolling, clicking, or viewing content
* Comparison of **average session time** between Control (A) and Variant (B)

> Works automatically — no manual setup or tagging needed.\
> Humblytics measures real user activity (not idle time) to ensure accurate engagement tracking.

#### How It Works

1. Visitors are randomly assigned to **Control (A)** or **Variant (B)**.
2. Humblytics monitors **how long users stay active** on each version of the page.
3. It calculates **average session time** per variant.
4. Real-time reports show which version leads to longer engagement sessions.

#### Common Test Ideas

* Test **content length** or reading experience (short vs. detailed).
* Experiment with **video placement** or autoplay vs. click-to-play.
* Try **interactive features** like accordions, carousels, or quizzes.
* Adjust **page structure** (single column vs. multi-section).
* Compare different **visual or media layouts** to maintain interest.

#### Steps to Set Up

1. Click the **Split Testing** menu in your Humblytics dashboard.
2. Click **Start Creating Experiment**.
3. Under **Select Testing Goal**, choose **Increase Session Time**.
4. Choose your **Experiment** and **Test Type**.
5. Add URLs for **Control (A)** and **Variant (B)**.
6. Configure **Visitor Assignment** (allow or prevent overlap).
7. Apply **Restrictions** (Geo or Audience filters, if needed).
8. Launch your test and monitor session time performance in real time.

By running this experiment, you’ll learn which version keeps users engaged longer, resulting in:

* **Higher average session durations**
* **Deeper content interaction**
* **Improved user retention and engagement signals**


# Reduce Bounce Rate

The **Reduce Bounce Rate** goal helps you understand and improve how effectively your page keeps visitors engaged beyond their first interaction.

\
It measures how many visitors leave after viewing only one page versus those who continue to explore other parts of your site.

This goal is ideal for **landing pages, blogs, or campaign pages** where the objective is to **keep visitors on-site longer** and encourage deeper engagement with your content.

Choose this goal when your primary objective is to **increase visitor retention** and motivate users to view additional pages.

\
Perfect for:

* Landing pages promoting products or campaigns
* Blog articles and resource content
* Homepage or category pages
* Content hubs or internal link optimization tests

> Use this goal to identify design or content changes that encourage users to take the next step instead of leaving immediately.

#### What It Tracks

Once your experiment is live, Humblytics automatically monitors:

* The **bounce rate** — percentage of users who exit without further interaction
* The **number of pages viewed per session**
* Comparative performance between **Control (A)** and **Variant (B)**

> No manual setup required — Humblytics automatically tracks engagement events like clicks, scrolls, and navigation across your site.

#### How It Works

1. Visitors are randomly split between **Control (A)** and **Variant (B)**.
2. Humblytics detects when users **exit** the page without further engagement.
3. It calculates the **bounce rate** for each version.
4. Real-time analytics show which variant leads to lower bounce rates and higher site exploration.

#### Common Test Ideas

* Experiment with **headline or subheadline changes** to capture attention.
* Add **clear CTAs or internal links** to guide users deeper into the site.
* Test **content structure**, such as shorter intros or improved readability.
* Adjust **navigation visibility** or menu placement.
* Include **related content blocks** or recommended posts at the end of articles.

#### Steps to Set Up

1. Open the **Split Testing** menu in your Humblytics dashboard.
2. Click **Start Creating Experiment**.
3. Under **Select Testing Goal**, choose **Reduce Bounce Rate**.
4. Choose your **Experiment** and **Test Type**.
5. Add URLs for **Control (A)** and **Variant (B)**.
6. Configure **Visitor Assignment** (allow or prevent overlap).
7. Apply **Restrictions** (Geo or Audience filters, if needed).
8. Launch the test and monitor bounce rate improvements in real time.

At the end of your test, you’ll identify which version drives:

* **Lower bounce rates**
* **More pages viewed per session**
* **Higher user retention and engagement**


# How to Analyze Split Test Data

### Interpreting Experiment Results

Once a test has reached significance, the real value comes from understanding **why** a variant won and what to do next.

#### 1. Access Your Results

* Open **Dashboard → Split Testing** and click the experiment you’d like to review.

#### 2. Overview Panel

* **Status & Dates** – confirms the experiment life‑cycle.
* **Randomization** – Session‑ vs User‑Level.
* **Primary Goal** – the metric that decides the winner.
* **Lift & Confidence** – headline stats that tell you if the variant outperformed the control and by how much.

#### 3. Insights & Metrics

Humblytics auto‑calculates a core set of engagement and conversion KPIs. Typical metrics include:

* Click‑Through Rate (CTR)
* Form Submission Rate
* Bounce Rate
* Average Session Time
* Scroll Depth

> **Pro‑tip:** Focus first on the metric that maps directly to your business goal, then sanity‑check secondary metrics for unintended trade‑offs.

#### 4. Target Interactions

* The **Top Clicked Elements** table surfaces high‑impact buttons, links, or CTAs.
* Pin critical elements so they remain fixed at the top for faster reviews.

#### 5. Real‑Time Monitoring

* Live charts show performance trajectories as data streams in.
* The *Race to the Best* bar visually indicates when a variant crosses the 95 % confidence threshold.

#### 6. Declaring a Winner

1. Confirm statistical significance (default 95 % confidence).
2. Verify minimum‑sample thresholds are met for each variant.
3. Inspect secondary metrics to ensure there are no adverse effects (e.g., CTR ↑ but Bounce ↑ as well).

#### 7. Rolling Out the Winning Variant

* Deploy the successful design or flow in your CMS, site builder, or custom codebase.
* Optionally keep the experiment running a few extra days to catch any regressions.

#### 8. Iterating Forward

* Log the hypothesis, outcome, and lessons learned in your testing backlog.
* Use insights to craft the next hypothesis—optimization is a continuous loop.

*Happy testing! Measure, learn, and iterate with confidence using Humblytics.*


# Using the Humblytics A/B Sample‑Size Calculator

A/B (split) testing compares a **control (Variant A)** with a **variation (Variant B)** so you can make evidence‑based improvements to your website or app. The Humblytics Sample‑Size Calculator tells you *exactly* how many visitors each variant needs before you can trust the result.

***

### 1. Why Sample Size Matters

| Too Small                                       | Just Right                                     | Too Large                                         |
| ----------------------------------------------- | ---------------------------------------------- | ------------------------------------------------- |
| Results look erratic; you risk acting on noise. | Detects real differences with high confidence. | Wastes time and traffic without adding precision. |

Choosing the correct sample size balances statistical rigour with business velocity.

***

### 2. Input Definitions

| Field                               | What It Means                                                | Example                                 |
| ----------------------------------- | ------------------------------------------------------------ | --------------------------------------- |
| **Baseline Conversion Rate**        | Your *current* conversion rate.                              | `5 %` (5 of every 100 visitors convert) |
| **Minimum Detectable Effect (MDE)** | The smallest lift you care about.                            | `+1 %` absolute (from 5 % → 6 %)        |
| **Statistical Significance**        | Confidence level that the observed lift is real, not random. | `95 %` (industry default)               |
| **Statistical Power**               | Probability of detecting an effect *if* it exists.           | `80 %` (common default)                 |

> **Tip:** Lower MDE or higher confidence / power settings will increase the required sample size.

***

### 3. Step‑by‑Step

1. **Open** the Humblytics Sample‑Size Calculator.
2. **Enter** each value defined above.
3. Click **Calculate**.
4. **Record** the required visitors per variant shown in the results panel.
5. **Plan** your test window so you can realistically hit those numbers.

***

### 4. Worked Example

* **Baseline Conversion Rate:** `5`
* **MDE:** `1`
* **Significance:** `95`
* **Power:** `80`

▶︎ **Result:** *≈ 4,000 visitors* per variant (total ≈ 8,000 sessions). Run the experiment until both A and B have reached these counts before analysing.

***

### 5. Best‑Practice Reminders

* **One Variable at a Time** — isolate the element you’re testing.
* **Run Full Business Cycles** — capture weekday/weekend traffic differences.
* **Don’t Peek Early** — premature stops inflate false‑positive risk.
* **Look Beyond Win/Loss** — examine bounce rate, engagement, revenue per visitor.
* **Iterate** — document learnings and queue up the next hypothesis.

Following this workflow ensures every Humblytics test is powered correctly, statistically sound, and focused on meaningful business impact.


# Deciding How Long to Run an A/B Test

Humblytics’ **Test‑Duration Calculator** converts your traffic numbers and statistical settings into a recommended runtime—so you know exactly when to stop collecting data.

***

### 1. Why Duration Matters

Running a test for *too short* a time risks false winners; running it *too long* delays deployment and may expose users to sub‑optimal experiences. A calculated duration balances confidence with speed.

***

### 2. Input Definitions

| Field                               | What It Means                                                       | Example           |
| ----------------------------------- | ------------------------------------------------------------------- | ----------------- |
| **Average Daily Visitors**          | Unique users your site receives each day (use analytics data).      | `1 200`           |
| **Baseline Conversion Rate**        | Current % of visitors that convert.                                 | `4 %`             |
| **Minimum Detectable Effect (MDE)** | Smallest lift you care to detect.                                   | `+0.8 %` absolute |
| **Statistical Significance**        | Confidence level (95 % or 99 %).                                    | `95 %`            |
| **Statistical Power**               | Probability of catching a real effect (fixed at 80 % in this tool). | `80 %`            |

> **Tip:** Lower traffic or a smaller MDE will increase recommended days; consider prioritising bigger changes when traffic is scarce.

***

### 3. Step‑by‑Step

1. **Open** the Test‑Duration Calculator in your Humblytics toolkit.
2. **Enter** all five inputs above.
3. Click **Calculate**.
4. **Review** the results panel:
   * **Days to Run** — minimum calendar days before analysing.
   * **Visitors per Variant** — the sample size target for each group.
5. Optionally click **Export to CSV** to share the plan with stakeholders.

***

### 4. Worked Example

* **Daily Visitors:** `1 200`
* **Baseline CVR:** `4`
* **MDE:** `1`
* **Significance:** `95`

▶︎ **Result:** *≈ 16 days* of traffic → *≈ 9 600 visitors* per variant. End the test once **both** thresholds (days **and** visitors) are met.

***

### 5. Understanding the Math (High‑Level)

* The calculator first computes the *required sample size* using your CVR, MDE, confidence, and power settings (same formula used in the Sample‑Size Calculator).
* It then divides that sample size by your **average daily visitors**, assuming a 50/50 traffic split, to yield **recommended days**.

***

### 6. Best‑Practice Checklist

* **Run the Full Duration** — resist the temptation to stop early when trends look promising.
* **Include Full Business Cycles** — ensure weekends, paydays, campaigns, etc., are represented.
* **Freeze Site Changes** — avoid deploying unrelated changes mid‑test.
* **One Change at a Time** — isolates causal impact.
* **Document Everything** — hypothesis, settings, runtime, outcome.
* **Segment After Significance** — check if the uplift holds across devices, channels, or geos.

Following these steps will keep every A/B test statistically sound while maximising learning velocity.


# How to Track Purchase Events

You can now track purchase events in Humblytics - enabling you to connect end-to-end customer journeys from landing page to checkout.

This update allows you to:

* Attribute sales to traffic sources, campaigns, and split test variants
* Use completed purchases as conversion goals in A/B tests
* Build accurate funnels from first visit to final transaction
* Optimize for revenue, not just clicks

## Supported Payment Providers

| Provider                                                             | Support level               | How it works                                                                                                                    |
| -------------------------------------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| [**Stripe**](/how-to-track-purchase-events/stripe)                   | Native                      | Connect once, full revenue attribution for all Stripe payments                                                                  |
| [**Foxy**](/how-to-track-purchase-events/foxy)                       | Native                      | Track Foxycart purchase events                                                                                                  |
| [**Other providers**](/how-to-track-purchase-events/other-providers) | Custom script, with caveats | Paddle, ReCharge, and custom checkouts can send purchase events via a snippet, but only where you control the post-payment page |
| **Shop Pay / Shopify Payments**                                      | Not supported               | Shopify's checkout runs on a sandboxed domain the tracking script can't reach                                                   |

{% hint style="info" %}
For the full revenue attribution dashboard, use **Stripe** or **Foxy**. The custom script path works for providers where you control the confirmation page; read the [Other Payment Providers](/how-to-track-purchase-events/other-providers) guide for its limitations before relying on the numbers.
{% endhint %}

Check out the setup guides above to get started with your preferred payment processor. Using a provider that isn't covered? Email **<support@humblytics.com>** and tell us which one; we prioritize new integrations by demand.


# Stripe Revenue Attribution

Track revenue and attribute sales to your marketing campaigns, traffic sources, and A/B test variants with Stripe integration.

This guide covers:

* **Stripe API** - Pass visitor data through metadata
* **Stripe Payment Links** - Automatic tracking via session IDs
* **Other Stripe Methods** - Manual tracking with customer emails

Choose the method that best fits your Stripe implementation:

* [Stripe API](/how-to-track-purchase-events/stripe/stripe-api) - For custom checkout implementations
* [Stripe Payment Links](/how-to-track-purchase-events/stripe/stripe-payment-links) - For Stripe-hosted payment links
* [Other Stripe Methods](/how-to-track-purchase-events/stripe/stripe-other-methods) - For custom implementations, Stripe Elements, etc.

## Benefits

* **End-to-end attribution** - Connect sales to traffic sources and campaigns
* **Split test optimization** - Use revenue as conversion goals in A/B tests
* **Privacy-compliant** - Cookie-free tracking, no consent banners required
* **Real-time data** - Revenue data appears in your dashboard within \~30 seconds

## Prerequisites

* Your Stripe account is connected to Humblytics (we recommend using a restricted API key with read-only permissions)
* Your main website loads the Humblytics tracking script
* You have access to modify your checkout implementation

Check out the specific guides above to get started with your Stripe setup.


# Stripe API

## Step 1: Connect Stripe to Humblytics

Before Humblytics can track your revenue, connect your Stripe account:

1. Go to your Humblytics dashboard and open **Site Settings**
2. Click the **Revenue** tab
3. Select **Stripe** as your payment provider
4. Choose **Stripe API** as the integration method
5. Enter your **Stripe API Key** (see below for recommended setup)
6. Save your configuration

### Recommended: Use a Restricted API Key

For better security, we recommend using a **restricted API key** with read-only permissions instead of your full secret key:

1. Go to your [Stripe Dashboard → Developers → API keys](https://dashboard.stripe.com/settings/applications)
2. Click **Create restricted key**
3. Give it a name like "Humblytics Revenue Attribution"
4. Grant **Read** permissions for:
   * Payment Intents
   * Invoices
   * Subscriptions
   * Customers
   * Charges
   * Account
5. Click **Create key** and copy it to Humblytics

Your API key is encrypted and stored securely. Restricted keys starting with `rk_` are accepted and recommended for enhanced security. Full secret keys starting with `sk_` also work but provide broader access than necessary.

<figure><img src="/files/NZ9LLvfUPBkG3QEuJA4I" alt=""><figcaption></figcaption></figure>

## Step 2: Add the `humblytics_view_id` Metadata

Tag your Stripe objects with a `humblytics_view_id` to link payments back to the visitor session. Humblytics looks for the first `humblytics_view_id` across these Stripe objects:

| Stripe Object   | When to Use                                       |
| --------------- | ------------------------------------------------- |
| `PaymentIntent` | One-time payments or custom payment flows         |
| `Invoice`       | Payments generated from invoices                  |
| `Subscription`  | Recurring payments and renewals                   |
| `Checkout`      | Hosted checkout flows using Stripe Checkout       |
| `Customer`      | Apply the ID globally to future invoices/payments |

💡 If you store the ID on a `Subscription` or `Customer`, Humblytics automatically applies it to future invoices and payments for that customer.

### Frontend: capture the view ID

```javascript
// Get the current Humblytics view ID on the client
const viewId = window.Humblytics.viewId;

// Send it to your backend along with the payload you already collect
await fetch("/api/create-payment", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    amount: 5000,
    currency: "usd",
    humblytics_view_id: viewId,
    // ...any other fields you need to pass along
  }),
});
```

### Backend examples

Attach the `humblytics_view_id` inside your server-side Stripe calls. Pick the object that matches your flow.

```javascript
// One-time payment using PaymentIntents
const { amount, currency, humblytics_view_id } = payload;

const paymentIntent = await stripe.paymentIntents.create({
  amount,
  currency,
  metadata: {
    humblytics_view_id,
  },
});
```

```javascript
// Subscription signup
const { customerId, priceId, humblytics_view_id } = payload;

const subscription = await stripe.subscriptions.create({
  customer: customerId,
  items: [{ price: priceId }],
  metadata: {
    humblytics_view_id,
  },
});
```

```javascript
// Stripe Checkout Session
const { line_items, humblytics_view_id } = payload;

const session = await stripe.checkout.sessions.create({
  line_items,
  mode: "payment",
  metadata: {
    humblytics_view_id,
  },
});
```

```javascript
// Apply globally to a Customer record
const { customerId, humblytics_view_id } = payload;

await stripe.customers.update(customerId, {
  metadata: {
    humblytics_view_id,
  },
});
```

## Step 3: View Attributed Revenue

After a payment succeeds, Humblytics automatically attributes the revenue to the correct visitor session—no webhooks or extra setup required. Review the revenue metrics (referrer, country, browser, etc.) in your Humblytics dashboard.

<figure><img src="/files/LMg5TVRvTnqaABjajcln" alt=""><figcaption></figcaption></figure>

## Key Benefits

| Benefit               | Detail                                                   |
| --------------------- | -------------------------------------------------------- |
| Automatic attribution | Revenue linked to visitor and campaign data              |
| Flexible integration  | Works with Checkout, PaymentIntents, Subscriptions, etc. |
| No webhooks needed    | Metadata-based tracking keeps setup simple               |
| Privacy-compliant     | Cookie-free tracking, no consent banners                 |
| Split test ready      | Use revenue as a goal in your Humblytics A/B tests       |

## Setting Up Split Tests with Revenue Goals

1. Create a split test on your main website
2. Choose **Revenue** as your goal type
3. Set a target revenue or select **Any Revenue**
4. Launch the test - revenue is tracked automatically

<figure><img src="/files/QtSszJYYXHQwYi1d0rYc" alt=""><figcaption></figcaption></figure>

## Troubleshooting

* **No revenue data appearing?** Confirm your Stripe account is connected to Humblytics.
* **Missing attribution?** Ensure a `humblytics_view_id` metadata field is set on at least one supported Stripe object.
* **Need help?** Reach us at <support@humblytics.com>.


# Stripe Payment Links

## Step 1: Connect Stripe to Humblytics

Before you can track revenue with Stripe Payment Links, you need to connect your Stripe account to Humblytics:

1. **Go to your Humblytics dashboard** and navigate to Site Settings
2. **Click on the Revenue tab** to access revenue tracking settings
3. **Select Stripe** as your payment provider
4. **Choose "Payment Links"** as your integration method
5. **Enter your Stripe Secret Key** (found in your [Stripe Dashboard](https://dashboard.stripe.com/apikeys))
6. **Save the configuration** to connect your Stripe account

Your Stripe Secret Key will be encrypted and stored securely. Never share your secret key publicly.

## Step 2: Configure Payment Links

Once your Stripe account is connected, configure your Stripe Payment Links:

In your Stripe Payment Links, select a product and go to the "After Payment" tab.

For "Confirmation page", choose to redirect customers to your website and add `?stripe_session_id={CHECKOUT_SESSION_ID}` to the URL.

![Stripe Payment Links Configuration](https://via.placeholder.com/600x400?text=Stripe+Payment+Links+Configuration)

Humblytics will automatically look for the `stripe_session_id` in the URL and track the payment.

## Important Notes

* **Duplicate payment events are ignored** so you don't need to worry about multiple redirects
* **Works best when customers complete the purchase journey on the same device/browser**
* **No additional code required** - just configure the redirect URL

After receiving a successful payment, you should see revenue data in your dashboard (referrer, country, browser, etc.). If you don't, please contact us at <support@humblytics.com>.

<figure><img src="/files/LMg5TVRvTnqaABjajcln" alt=""><figcaption></figcaption></figure>

## Key Benefits

| Benefit                | Detail                                           |
| ---------------------- | ------------------------------------------------ |
| **Zero code required** | Just configure the redirect URL in Stripe        |
| **Automatic tracking** | Revenue automatically attributed to visitor data |
| **Privacy-compliant**  | Cookie-free tracking, no consent banners         |
| **Split test ready**   | Use revenue as conversion goals in A/B tests     |

## Setting Up Split Tests with Revenue Goals

1. **Create a split test** on your main website
2. **Choose Revenue** as your goal type
3. **Set your target revenue amount** or use "Any Revenue" for all purchases
4. **Launch your test** - revenue will be automatically tracked

<figure><img src="/files/QtSszJYYXHQwYi1d0rYc" alt=""><figcaption></figcaption></figure>

## Troubleshooting

* **No revenue data appearing?** Check that your Stripe account is properly connected
* **Missing attribution?** Verify the session\_id is being passed in the redirect URL
* **Need help?** Contact <support@humblytics.com> for assistance


# Stripe (Other Methods)

If you're using Stripe API, follow [this guide](/how-to-track-purchase-events/stripe/stripe-api) instead. If you're using Stripe Payment Links, follow [this guide](/how-to-track-purchase-events/stripe/stripe-payment-links) instead. Make sure you've connected your Stripe account to Humblytics first.

Use the JavaScript snippet below to attribute the payment to the correct customer journey:

```javascript
// Attribute the purchase to the logged-in customer
window.Humblytics.trackCustomer(customerEmail);
```

Replace `customerEmail` with the email address associated with the successful payment.

## Example Implementation

The safest place to call `trackCustomer` is directly before or after you capture the payment. In a Stripe Elements checkout flow that might look like this:

```jsx
"use client";

import { useState } from "react";
import {
  useStripe,
  useElements,
  PaymentElement,
} from "@stripe/react-stripe-js";

export default function CheckoutForm({ customerEmail, clientSecret }) {
  const stripe = useStripe();
  const elements = useElements();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!stripe || !elements) return;

    setIsSubmitting(true);

    // Attribute the revenue right before confirming the payment
    window.Humblytics.trackCustomer(customerEmail);

    const { error } = await stripe.confirmPayment({
      elements,
      clientSecret,
      confirmParams: {
        return_url: `${window.location.origin}/welcome`,
      },
    });

    setIsSubmitting(false);

    if (error) {
      // handle error state
    } else {
      // Optionally confirm again after capture if you redirect instead of using return_url
      // window.Humblytics.trackCustomer(customerEmail);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || isSubmitting}>
        Pay
      </button>
    </form>
  );
}
```

## When to Use This Method

* **Third-party payment processors** that use Stripe
* **Stripe Elements implementations**
* **Mobile app payments**
* **Custom checkout flows** not covered by other methods

## Important Notes

* **Works with any payment flow** as long as you have access to the customer's email
* **Privacy-compliant** - cookie-free tracking, no consent banners required

After receiving a successful payment, you should see revenue data in your dashboard (referrer, country, browser, etc.) tied to that customer's profile. If you don't, please contact us at <support@humblytics.com>.

<figure><img src="/files/LMg5TVRvTnqaABjajcln" alt=""><figcaption></figcaption></figure>

## Key Benefits

| Benefit                     | Detail                                       |
| --------------------------- | -------------------------------------------- |
| **Flexible implementation** | Works with any payment flow                  |
| **Manual control**          | Track payments exactly when you want         |
| **Privacy-compliant**       | Cookie-free tracking, no consent banners     |
| **Split test ready**        | Use revenue as conversion goals in A/B tests |

## Setting Up Split Tests with Revenue Goals

1. **Create a split test** on your main website
2. **Choose Revenue** as your goal type
3. **Set your target revenue amount** or use "Any Revenue" for all purchases
4. **Launch your test** - revenue will be automatically tracked

<figure><img src="/files/QtSszJYYXHQwYi1d0rYc" alt=""><figcaption></figcaption></figure>

## Troubleshooting

* **No revenue data appearing?** Check that your Stripe account is properly connected
* **Missing attribution?** Verify that you're passing the correct customer email to `trackCustomer`
* **Need help?** Contact <support@humblytics.com> for assistance


# Foxy Integration

**Tracking Foxy Purchase Events with Humblytics**

Humblytics makes it easy to track the end-to-end purchase process from your site to **Foxy** checkout and successful purchase events—**without cookies**, **without GTM**, and **with full privacy compliance**.

Tracking Foxy purchases helps you:

* Track the complete customer journey from your site to successful purchase
* Attribute sales to campaigns, sources, and experiments
* Run A/B tests with purchase events as conversion goals
* Measure true conversion performance and ROI
* Set up accurate funnel analysis from landing page to purchase

***

Platform-specific setup guides

Choose your implementation target:

* [Custom/Self-Hosted – How to Track FoxyPurchases](/how-to-track-purchase-events/foxy/custom-self-hosted-how-to-track-foxycart-purchases)

***

#### 🛠️ Requirements

Before getting started, make sure:

* The [Humblytics tracking script](https://docs.humblytics.com/how-to-get-started/add-humblytics-analytics-to-a-custom-self-hosted-site) is installed on your main website
* You can access the Foxy admin panel to manage integrations
* You have your Humblytics webhook URL and encryption key from **Site Settings → Revenue** in the Humblytics dashboard


# Custom/Self-Hosted – How to Track Foxy Purchases

### **Why track Foxy purchases?**

* Track the end-to-end purchase process from your site to checkout and successful purchase
* Attribute sales to campaigns, traffic sources, A/B tests
* Run split tests with purchase events as conversion goals
* Preserve a cookie-free, privacy-compliant analytics stack—no banners required

***

### Prerequisites

* Your main website already loads the global **`hmbl.min.js`** script (36 kb, async).
* You can log into the Foxy admin panel and manage integrations.

***

### Step-by-Step Setup

#### 1 · Copy your Humblytics webhook details

In your Humblytics dashboard:

1. Navigate to **Site Settings → Revenue**.
2. Copy the **Foxy Webhook URL**.
3. Copy the **Encryption Key**—you'll paste both values into Foxy.

> Keep the Humblytics tab open. You'll need to confirm the integration after you finish in Foxy.

***

#### 2 · Configure the Foxy JSON webhook

In the Foxy admin panel:

1. Log into your Foxy account.
2. Go to **Integrations → Webhooks**.
3. Enable **JSON Webhook**.
4. Add a new webhook, pasting the Humblytics **Webhook URL** you copied earlier.
5. Paste the matching **Encryption Key** from Humblytics.
6. Select **`transaction`** events.
7. In **API filter**, include `zoom=items,customer,custom_fields,subscription`.
8. Save your webhook configuration.

***

#### 3 · Verify tracking is working

1. Complete a test purchase on your live site.
2. Open **Revenue → Foxy** (or **Revenue → Integrations**) in Humblytics.
3. Confirm that the transaction appears with line items and customer details within about 30 seconds.
4. Once the webhook syncs, Humblytics automatically attributes the revenue to the visitor journey captured by the global script.

<figure><img src="/files/e72WAPQfz5xKAwnviFHW" alt=""><figcaption></figcaption></figure>

***

### Key Benefits

| Benefit             | Detail                                     |
| ------------------- | ------------------------------------------ |
| Cookie-free         | No consent banners or CMP required         |
| End-to-end tracking | Complete customer journey visibility       |
| Works on every plan | All Humblytics tiers support custom events |
| Split test ready    | Use purchase events as conversion goals    |

***

### Setting Up Split Tests with Purchase Goals

#### 1 · Create a split test on your main website

1. In Humblytics, navigate to **Experiments → Create New Test**.
2. Set up your A/B test variants on your main website.
3. Choose **Revenue Event** as your goal type.

#### 2 · Configure the conversion goal

1. Select the **Foxy transaction** revenue event created by the webhook.
2. Set **No Overlap** for more accurate results with purchase events.
3. Launch your split test.

<figure><img src="/files/QtSszJYYXHQwYi1d0rYc" alt=""><figcaption></figcaption></figure>

***

#### Optional Enhancements

* **Funnels:** Create a funnel from landing page → product page → checkout → purchase using the Foxy transaction event for completion.
* **Campaign Attribution:** Use UTM parameters on your marketing campaigns to see which sources drive the most sales.
* **Advanced Events:** Track additional Foxy events like cart abandonment or upsell interactions.

***

For advanced use cases—custom Foxy events, multi-step funnels, or complex attribution models—email **<support@humblytics.com>** and we'll guide you through.


# beehiiv – Revenue Tracking & Split Testing

Track beehiiv subscription revenue in Humblytics and run split tests across your subscription plans to find out which pricing page, copy, or offer converts best.

***

## Prerequisites

### 1 · Install Humblytics via Google Tag Manager

beehiiv does not allow arbitrary script injection, so you must use Google Tag Manager to load Humblytics on your publication. Follow the [Google Tag Manager install guide](/how-to-get-started/google-tag-manager) first and confirm your Humblytics tag is verified before continuing.

### 2 · Connect Stripe in Humblytics

beehiiv processes paid subscriptions through Stripe. Humblytics ties revenue events back to individual visitors by matching the customer email collected on your site against the email in the Stripe charge.

1. In Humblytics, go to **Connectors** in the sidebar
2. Click **Stripe** and follow the connection flow
3. Once connected, Stripe purchases will automatically fire `revenue` events in Humblytics for any visitor whose email was captured during their session

***

## Step 1 · Add the Email Capture Tag in GTM

beehiiv collects subscriber emails on your publication's subscribe page. The snippet below intercepts that email — from the URL, from `localStorage`, or from the subscribe form — and passes it to Humblytics so the session can be matched to a Stripe purchase later.

In Google Tag Manager:

1. Click **New Tag**
2. Rename it to: **Humblytics – beehiiv Email Capture**
3. Click **Tag Configuration** → **Custom HTML**
4. Paste the script exactly as written below:

```html
<script>
(function () {
  var EMAIL_SELECTOR = "#placeholder, input[type='email'], input[placeholder*='email' i]";
  var EMAIL_STORAGE_KEYS = ["email"];

  var _latestEmail = "";
  var _hasTracked = false;

  function _cleanEmail(value) {
    if (value == null) return "";

    var str = String(value).trim();

    // Handles localStorage values like: "\"max@humblytics.com\""
    try {
      var parsed = JSON.parse(str);
      if (typeof parsed === "string") {
        str = parsed;
      }
    } catch (e) {}

    return String(str || "").trim().toLowerCase();
  }

  function _isValidEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email);
  }

  function _getEmailFromUrl() {
    var email = new URLSearchParams(window.location.search).get("email");
    email = _cleanEmail(email);

    return _isValidEmail(email) ? email : "";
  }

  function _getEmailFromLocalStorage() {
    for (var i = 0; i < EMAIL_STORAGE_KEYS.length; i++) {
      var key = EMAIL_STORAGE_KEYS[i];
      var value = localStorage.getItem(key);
      var email = _cleanEmail(value);

      if (_isValidEmail(email)) {
        return email;
      }
    }

    return "";
  }

  function _getEmailFromInput() {
    var input = document.querySelector(EMAIL_SELECTOR);
    if (!input) return "";

    var email = _cleanEmail(input.value);

    return _isValidEmail(email) ? email : "";
  }

  function _getBestEmail() {
    return (
      _getEmailFromUrl() ||
      _getEmailFromLocalStorage() ||
      _getEmailFromInput() ||
      _latestEmail
    );
  }

  function _trackEmail(email) {
    var _emailToTrack = _cleanEmail(email);

    if (!_isValidEmail(_emailToTrack)) return;
    if (_hasTracked) return;

    _hasTracked = true;

    var _trackHmblEmail = function(humblytics) {
      humblytics.trackCustomer(_emailToTrack);
    };

    if (
      window.Humblytics &&
      typeof window.Humblytics.trackCustomer === "function"
    ) {
      window.Humblytics.trackCustomer(_emailToTrack);
      return;
    }

    if (typeof window.HumblyticsOnReady === "function") {
      window.HumblyticsOnReady(_trackHmblEmail);
      return;
    }

    window.HumblyticsCallbacks = window.HumblyticsCallbacks || [];
    window.HumblyticsCallbacks.push(_trackHmblEmail);
  }

  function _checkAndTrack() {
    _trackEmail(_getBestEmail());
  }

  // Track immediately if email is already in the URL.
  _checkAndTrack();

  // Watch for beehiiv saving the email to localStorage.
  var _originalSetItem = localStorage.setItem.bind(localStorage);

  localStorage.setItem = function (key, value) {
    var result = _originalSetItem(key, value);

    if (EMAIL_STORAGE_KEYS.indexOf(key) !== -1) {
      var email = _cleanEmail(value);

      if (_isValidEmail(email)) {
        _trackEmail(email);
      }
    }

    return result;
  };

  // Backup poll in case the email was already saved before this script ran.
  var _pollRef = setInterval(function () {
    if (_hasTracked) {
      clearInterval(_pollRef);
      return;
    }

    _checkAndTrack();
  }, 250);

  setTimeout(function () {
    clearInterval(_pollRef);
  }, 30000);

  // Store typed email value, but do not track until Continue / Enter.
  document.addEventListener(
    "input",
    function (event) {
      if (
        event.target &&
        event.target.matches &&
        event.target.matches(EMAIL_SELECTOR)
      ) {
        _latestEmail = _cleanEmail(event.target.value);
      }
    },
    true
  );

  document.addEventListener(
    "change",
    function (event) {
      if (
        event.target &&
        event.target.matches &&
        event.target.matches(EMAIL_SELECTOR)
      ) {
        _latestEmail = _cleanEmail(event.target.value);
      }
    },
    true
  );

  // Track when user clicks Continue.
  document.addEventListener(
    "pointerdown",
    function (event) {
      var button = event.target.closest && event.target.closest("button");
      if (!button) return;

      var text = String(button.innerText || button.textContent || "")
        .trim()
        .toLowerCase();

      if (text === "continue") {
        _checkAndTrack();
      }
    },
    true
  );

  document.addEventListener(
    "click",
    function (event) {
      var button = event.target.closest && event.target.closest("button");
      if (!button) return;

      var text = String(button.innerText || button.textContent || "")
        .trim()
        .toLowerCase();

      if (text === "continue") {
        _checkAndTrack();
      }
    },
    true
  );

  // Track if user presses Enter in the email field.
  document.addEventListener(
    "keydown",
    function (event) {
      if (
        event.key === "Enter" &&
        event.target &&
        event.target.matches &&
        event.target.matches(EMAIL_SELECTOR)
      ) {
        _latestEmail = _cleanEmail(event.target.value);
        _checkAndTrack();
      }
    },
    true
  );
})();
</script>
```

5. Click **Triggering** → select **All Pages**
6. Click **Save**
7. **Publish** your GTM container

{% hint style="info" %}
Do not modify this script. The selectors and localStorage keys are tuned specifically for beehiiv's subscribe flow. Changing them may break email capture.
{% endhint %}

***

## Step 2 · Verify Revenue Is Being Tracked

Before setting up a split test, confirm the full pipeline is working:

1. Open your beehiiv publication in a private/incognito window
2. Subscribe using a real email address
3. Complete the Stripe checkout
4. In Humblytics, go to **Attribution** — within a few minutes you should see a revenue event attributed to the session from that email

If no revenue event appears after 10 minutes, double-check that:

* Your Stripe connector is connected in Humblytics (**Connectors → Stripe**)
* The GTM container is published (not just saved)
* The Humblytics base tag fires on the subscribe page (check with GTM Preview mode)

***

## Step 3 · Create a Split Test Across Subscription Plans

With revenue tracking confirmed, you can now run a split test to determine which pricing page or subscription plan converts better.

### Set up your variants in beehiiv

Create separate subscribe pages for each plan you want to test — for example, a monthly plan page and an annual plan page. Each page needs its own distinct URL.

### Create the experiment in Humblytics

1. Go to **Experiments → New Test**
2. **Test name** – something descriptive, e.g. `Monthly vs Annual Plan Page`
3. **Pages to test** – add the URL of your primary subscribe page (the control)
4. **Variants** – add one variant per plan page URL, set each to redirect to that page's URL
5. **Traffic split** – distribute evenly across variants (e.g. 50/50)
6. **Goal** – select **Increase Revenue**
7. Enable **Non-overlapping** mode so each visitor only ever sees one variant

{% hint style="info" %}
The Revenue goal does not require a destination page URL. Humblytics counts a conversion whenever a `revenue` event fires in a visitor's session — which happens automatically when their Stripe purchase is matched to their tracked email.
{% endhint %}

8. Click **Launch Test**

***

## How It Works End-to-End

1. A visitor lands on your subscribe page — Humblytics assigns them to a variant and redirects them to the corresponding plan page
2. The visitor enters their email — the GTM tag captures it and calls `Humblytics.trackCustomer(email)`
3. The visitor completes checkout on Stripe
4. Stripe sends a webhook to Humblytics; Humblytics matches the purchase email to the tracked session
5. A `revenue` event is recorded for that session and attributed to the variant the visitor saw
6. Humblytics tallies revenue per variant and runs statistical significance analysis

You can monitor results in **Experiments → \[your test] → Results**.


# Other Payment Providers

{% hint style="warning" %}
This approach only works when your provider gives you a **confirmation page or payment callback that you control**, where the Humblytics script is loaded. Providers that keep the entire checkout on their own hosted domain (for example **Shop Pay / Shopify Payments**) cannot be tracked this way. For the full revenue attribution dashboard with no custom work, use [Stripe](/how-to-track-purchase-events/stripe) or [Foxy](/how-to-track-purchase-events/foxy).
{% endhint %}

If you're using a payment provider other than Stripe or Foxy, you can still capture revenue attribution with Humblytics. Trigger the purchase event after a successful payment using the snippet below:

```javascript
// Track revenue after successful payment (amount in cents)
window.Humblytics.trackRevenue(amountInCents, currencyCode);
```

Replace `amountInCents` with the payment amount (converted to cents) and `currencyCode` with the three-letter currency code (for example, `"USD"`). Run this code on the confirmation page or in the callback that fires when the payment is confirmed.

## Example Implementation

```jsx
"use client";

import { useEffect } from "react";

export default function Confirmation({ order }) {
  useEffect(() => {
    if (!order) return;

    const amountInCents = Math.round(order.total * 100);
    window.Humblytics.trackRevenue(amountInCents, order.currency);
  }, [order]);

  return (
    <div>
      <h1>Thanks for your purchase!</h1>
    </div>
  );
}
```

This approach works for providers like Paddle, ReCharge, or a custom checkout where you control the post-payment experience. If your setup differs from these examples, email **<support@humblytics.com>** before relying on the numbers and we'll confirm whether your provider is supported.

{% hint style="info" %}
Revenue from custom purchase events can take up to 24 hours to appear in the attribution tab. If you've confirmed the event is firing (check DevTools → Network) and nothing shows after 24 hours, contact **<support@humblytics.com>**.
{% endhint %}


# How to Track Custom Form Submissions

{% hint style="info" %}
Custom Form Submission Tracking in Humblytics enables you to monitor and analyze form interactions across your website, providing valuable insights into user engagement and conversion rates. This feature helps you understand how visitors interact with your forms and optimize them for better performance.
{% endhint %}

Track form submissions from any platform—Typeform, HubSpot, Cal.com, or custom forms—with Humblytics' privacy-first analytics. No cookies, no complex setup, and no performance impact.

**Why Track Form Submissions?**

Form submission tracking helps you:

* **Measure conversion rates** from landing pages to lead capture
* **Attribute submissions** to traffic sources, campaigns, and A/B tests
* **Optimize form performance** with real user data
* **Build accurate funnels** from first visit to form completion
* **Stay privacy-compliant** with cookieless tracking

**Tracking Form Submission Rates**

To track form submission rates, build a funnel in **Optimization → Funnels**. Add a step for the page view where your form lives (e.g., your contact or signup page), then add form completions as the next step. This maps page views of the form to completions so you can see your submission rate.

**Cross-Domain Form Tracking**

Track form submissions across multiple domains with unified reporting in your main dashboard. Use the `domain` parameter to attribute submissions from external domains:

```javascript
// Track form submissions on external domains
window.Humblytics.trackFormSubmission("checkout-form", {
  domain: "yourmainsite.com",
});
```

This is especially useful for:

* Ecommerce sites with separate checkout domains
* Multi-domain company setups
* Third-party form integrations (Typeform, HubSpot, etc.)

For complete cross-domain setup instructions, see our [Cross-Domain Tracking & Whitelisting](/cross-domain-tracking-and-whitelisting) guide.

**Supported Platforms**

Choose your platform for specific setup instructions:

* [Typeform](/how-to-track-custom-form-submissions/typeform) - Track embedded Typeform submissions
* [HubSpot Forms](/how-to-track-custom-form-submissions/hubspot-forms) - Monitor HubSpot form completions
* [HubSpot Booking Links](/how-to-track-custom-form-submissions/hubspot-booking-links) - Track meeting bookings
* [Cal.com](https://github.com/Eight-Parallel/humblytics-docs/blob/main/how-to-track-custom-form-submissions/cal.com) - Monitor calendar bookings
* [Tally.so](https://github.com/Eight-Parallel/humblytics-docs/blob/main/how-to-track-custom-form-submissions/tally.so) - Track Tally form submissions
* [GoHighLevel](/how-to-track-custom-form-submissions/gohighlevel) - Automatic GHL form tracking
* **Fillout** - Native event tracking for Fillout forms works automatically. No custom code required. Install the Humblytics script and form submissions track automatically alongside HTML forms, Typeform, and other popular builders.

By integrating Humblytics tracking hooks into your embed code, you can:

* Log successful form completions and calendar bookings as conversion events
* Attribute submissions to traffic sources, devices, and campaigns
* Use events in A/B tests, funnels, or conversion tracking

This is particularly useful if you're using:

* Embedded Typeform widgets
* Inline Cal.com booking components

All tracking is done without cookies, fully aligned with privacy-first practices. No complex event configuration or consent banners required.\\

🔧 Each section includes plug-and-play code blocks, which you can paste into your Framer project.


# GoHighLevel

### **How to Track GoHighLevel (GHL) Form Submissions with Humblytics**

Tracking GHL form submissions with Humblytics is automatic and requires no custom setup. Once the Humblytics tracking script is installed on your site, we’ll automatically detect and log form submissions - no extra tags, data layers, or cookies required.

***

#### ✅ Why Track GHL Form Submissions?

* **Attribute conversions** to campaigns, traffic sources, or A/B tests
* **Visualize drop-off** in funnels between landing pages and form completions
* **Optimize with heatmaps** to see how far users scroll or where they click
* **Stay compliant** with a fully cookie-free, GDPR-friendly solution

***

#### ⚙️ Setup Steps

1. **Install the Humblytics Tracking Script**\
   Add this to the `<head>` of your GoHighLevel funnel or website:

   ```html

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

   ```
2. **Publish the Page**\
   Once your site is live, Humblytics will begin tracking automatically.
3. **Verify Tracking**\
   Visit the page with the form, submit a test entry, and confirm it appears in your dashboard under:
   * **Events** > `formSubmission`
   * **Funnels** (if mapped)
   * **Split Tests** (if part of an experiment)

***

#### 🔍 How It Works

Humblytics auto-detects native GoHighLevel forms rendered in the DOM and listens for submission events. No manual tagging or API hooks needed.

**Important**: submissions are only tracked on pages where the Humblytics script is actually present. You do **not** need a GHL tracking pixel or any extra integration, but the script must load on the page containing the form. If your GHL funnel uses per-page custom code instead of a global header, add the script to every step of the funnel.

**How to verify the script is on a page:**

1. Open the page, then open DevTools (**F12**) → **Network** tab
2. Refresh and filter for `hmbl.min.js`
3. A 200 status means the script is loading. If it's missing, the script isn't installed on that page, and submissions there won't be tracked.
4. Then submit a test entry and confirm it appears under **Events** > `formSubmission`.

Behind the scenes:

* Event: `formSubmission`
* Metadata captured: Page URL, timestamp, referrer, device info
* All tracking is **anonymized and cookieless**

***

#### 🧪 Pro Tip: Run A/B Tests on GHL Forms

Want to test a form headline, layout, or CTA?\
Use Humblytics split testing to:

* Automatically assign traffic to Variant A or B
* Track submission uplift by variant
* Get real-time results without code


# Tally.so

#### **Tracking Tally.so Submissions with Humblytics**

Humblytics makes it easy to track form submissions from Tally.so across multiple platforms—**without cookies**, **without GTM**, and **with full privacy compliance**.

Tracking submissions helps you:

* Attribute leads to campaigns, sources, and experiments
* Visualize drop-off points in funnels
* Run A/B tests on forms or layouts
* Measure true conversion performance in Webflow, Framer, and beyond

***

#### Platform-specific setup guides

Choose your implementation target:

* [Webflow – How to Track Tally.so Form Submissions](/how-to-track-custom-form-submissions/tally.so/framer-how-to-track-tally.so-form-submissions)
* [Framer – How to Track Tally.so Form Submissions](/how-to-track-custom-form-submissions/tally.so/webflow-how-to-track-tally.so-form-submissions)
* [Custom/Self-Hosted – How to Track Tally.so Form Submissions](/how-to-track-custom-form-submissions/tally.so/custom-self-hosted-how-to-track-tally.so-form-submissions)

***

#### Requirements

Before getting started, make sure:

* The Humblytics tracking script is installed on your site
* Your form is embedded and functional on the page you want to track


# Framer – How to Track Tally.so Form Submissions

Humblytics lets you capture Tally.so form completions—embedded right inside Framer—without extra analytics software or cookie banners. Follow this quick guide to wire up conversion tracking in under five minutes.

***

#### Why Track Form Submissions?

Tracking completions helps you:

* **Measure lead conversion** from landing pages
* **Compare form layouts or CTAs** in A/B tests
* **Attribute wins** to traffic sources, campaigns, or experiments
* **Trigger funnel goals** automatically in Humblytics dashboards

***

#### Prerequisites

* A **Tally** form embedded in a Framer project
* The **Humblytics global script** already installed on the page (once per site)

> **Heads‑up:** Humblytics is cookie‑free, so you stay privacy‑compliant without consent dialogs.

***

#### Step‑by‑Step Setup

1. **Add the Tally Embed**\
   Paste the following block where you want the form to appear in Framer (Embed component → Code view):

   ```html
   <!-- Tally embed code begins -->
   <iframe data-tally-src="https://tally.so/embed/wo1EaP?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="276" frameborder="0" marginheight="0" marginwidth="0" title="Contact form"></iframe>
   <script>
     var d=document,w="https://tally.so/widgets/embed.js",v=function(){
       "undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])")
       .forEach(function(e){e.src=e.dataset.tallySrc});
     };
     if("undefined"!=typeof Tally) v();
     else if(d.querySelector('script[src="'+w+'"]')==null){
       var s=d.createElement("script");
       s.src=w; s.onload=v; s.onerror=v; d.body.appendChild(s);
     }
   </script>
   <!-- Tally embed code ends -->
   ```
2. **Relay the Submission Event to Humblytics**\
   Directly after the embed, add the Humblytics hook:

   ```html
   <!-- Humblytics custom tracking begins -->
   <script>
     window.addEventListener("message", function (event) {
       // Forward any Tally postMessage events to the parent → Humblytics
       window.parent.postMessage(event.data, "*");
     });
   </script>
   <!-- Humblytics custom tracking ends -->
   ```

   **What it does:** Tally fires a `postMessage` when the form is submitted. The listener forwards that data to the parent window, where the Humblytics script automatically logs it as a `formSubmission` event.
3. **Publish Your Framer Site**\
   Framer will ship the updated embed and the global Humblytics script in one deploy—no extra steps.

***

#### Viewing Submissions in Humblytics

1. Log in to your **Humblytics** dashboard.
2. Go to **Forms** in the left navbar.
3. Look for the new entry—e.g., **"tally-contact-form"**—under *Tracked Form Events*.
4. Apply filters (source, device, date range) to analyse performance or slice results for an A/B test.

***

#### Troubleshooting Tips

| Issue              | Fix                                                                               |
| ------------------ | --------------------------------------------------------------------------------- |
| No events showing  | Confirm both scripts appear **after** the Tally `<iframe>` in the published HTML. |
| Duplicate events   | Make sure the listener is not inserted multiple times across nested components.   |
| Form height cutoff | Set `dynamicHeight=1` (already in the embed) so Tally resizes automatically.      |

Happy tracking! 🚀


# Webflow – How to Track Tally.so Form Submissions

Skip the complex tracking stacks—Humblytics records Tally.so form completions in Webflow automatically, no extra JavaScript required.

***

#### Why Track Form Submissions?

* **Measure lead conversion** from landing pages and pop‑ups
* **Compare form variations** in A/B tests
* **Attribute success** to specific traffic sources or campaigns
* **Trigger funnel goals** inside your Humblytics dashboard

Because Humblytics is 100 % cookie‑free, you remain privacy‑compliant without consent banners.

***

#### Prerequisites

1. A live **Tally** form URL (e.g., `https://tally.so/r/wo1EaP`)
2. The **Humblytics global script** installed in Webflow → *Project Settings → Custom Code → Head*

> **Already tracking page views?** Then you’re set—Humblytics will detect Tally submissions automatically once the embed is on the page.

***

#### Step‑by‑Step Setup in Webflow

1. **Open Your Page in the Designer**\
   Navigate to the page where your form should appear.
2. **Drag in an “Embed” Component**\
   From the Add panel (`A`), drag **Embed** into the layout at the desired location.
3. **Paste the Tally Embed Snippet**

   ```html
   <!-- Tally embed code begins -->
   <iframe data-tally-src="https://tally.so/embed/wo1EaP?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="276" frameborder="0" marginheight="0" marginwidth="0" title="Contact form"></iframe>
   <script>var d=document,w="https://tally.so/widgets/embed.js",v=function(){"undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach(function(e){e.src=e.dataset.tallySrc});};if("undefined"!=typeof Tally)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w;s.onload=v;s.onerror=v;d.body.appendChild(s);} </script>
   <!-- Tally embed code ends -->
   ```

   *No extra tracking code needed—the Humblytics script in your `<head>` listens for the submission event automatically.*
4. **Publish Your Site**\
   Click **Publish** and select the target domain(s). That’s it—Humblytics starts logging submissions instantly.

***

#### Viewing Submissions in Humblytics

1. Log into your **Humblytics** dashboard.
2. Go to **Forms** in the left nav.
3. Look for a new event, typically labelled with your Tally form title.
4. Slice by **source**, **device**, or **date range** to analyse performance, or set it as a **goal** in funnel reports.

***

#### Troubleshooting

| Issue                         | Fix                                                                                                                                 |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| No events showing             | Confirm the global Humblytics script is present in **Project Settings → Custom Code → Head** and published.                         |
| Form not visible              | Ensure the Tally embed URL is correct and the page is republished after edits.                                                      |
| I need to fire a custom event | Use `window.Humblytics.track("tally-submit", {/* properties */})` inside an **Embed** if you want extra context, but it’s optional. |

***

#### Quick Recap

1. **Embed Tally** → Designer → Embed component → paste snippet.
2. **Publish** → Humblytics auto‑captures submissions.
3. **Analyze** → Forms tab → segment, compare, optimise.


# Custom/Self-Hosted – How to Track Tally.so Form Submissions

### Track Tally.so Form Submissions on Custom / Self‑Hosted Sites with Humblytics

Bring cookie‑free conversion analytics to any static or dynamic site—no extra JavaScript required beyond your existing Humblytics snippet.

***

#### Why Track Form Submissions?

* **Measure lead conversion** from landing pages
* **Compare form layouts** in split tests
* **Attribute revenue impact** to traffic sources or campaigns
* **Trigger funnel goals** inside Humblytics reports

***

#### Prerequisites

1. A live **Tally** form share URL (e.g., `https://tally.so/r/wo1EaP`).
2. The **Humblytics global tracking script** added once in your site’s `<head>`—for example in a shared layout, `_document.tsx`, or a base template.

> **Already seeing page‑view data in Humblytics?** Great—your script is installed and ready to log form events automatically.

***

#### Step‑by‑Step Setup

1. **Open Your Page Template**\
   Edit the HTML / JSX / Blade / ERB file where you want the form to appear.
2. **Paste the Tally Embed Snippet**\
   Insert the embed at the desired location:

   ```html
   <!-- Tally embed code begins -->
   <iframe data-tally-src="https://tally.so/embed/wo1EaP?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="276" frameborder="0" marginheight="0" marginwidth="0" title="Contact form"></iframe>
   <script>
     var d=document,w="https://tally.so/widgets/embed.js",v=function(){
       "undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])")
       .forEach(function(e){e.src=e.dataset.tallySrc});
     };
     if("undefined"!=typeof Tally) v();
     else if(d.querySelector('script[src="'+w+'"]')==null){
       var s=d.createElement("script");
       s.src=w; s.onload=v; s.onerror=v; d.body.appendChild(s);
     }
   </script>
   <!-- Tally embed code ends -->
   ```

   *No extra tracking code is needed—the Humblytics script already listening in the parent window captures the submission.*
3. **Deploy / Publish**
   * **Static site**: Push to Git + redeploy (Netlify, Vercel, Cloudflare Pages, S3, etc.).
   * **Server‑rendered app**: Commit and redeploy via your CI/CD pipeline.
   * **cPanel / FTP**: Upload the updated file.

That’s all—Humblytics will start logging form completions instantly upon publish.

***

#### Viewing Submissions in Humblytics

1. Log into your **Humblytics** dashboard.
2. Click **Forms** in the left nav.
3. Find your form (usually matches the Tally form title).
4. Filter by **source**, **device**, or **date** to analyse performance or set the event as a **goal** in funnel analysis.

***

#### Troubleshooting

| Issue                  | Fix                                                                                                                                               |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| No events showing      | Confirm the Humblytics script is present in `<head>` and your deploy didn’t strip it out.                                                         |
| Form embed not loading | Check that `widgets/embed.js` is allowed by your CSP headers.                                                                                     |
| Need custom properties | Inside the same template, call `window.Humblytics.track("tally-submit", { plan: "pro" })` from a `submit` callback if you require extra metadata. |

***

#### Quick Recap

1. **Embed Tally** snippet in your HTML.
2. **Deploy** site—global Humblytics script auto‑captures submissions.
3. **Analyse** in the Forms tab—slice, compare, optimise.


# Typeform

#### **Tracking Typeform Submissions with Humblytics**

Humblytics makes it easy to track form submissions from **Typeform** across multiple platforms—**without cookies**, **without GTM**, and **with full privacy compliance**.

Tracking submissions helps you:

* Attribute leads to campaigns, sources, and experiments
* Visualize drop-off points in funnels
* Run A/B tests on forms or layouts
* Measure true conversion performance in Webflow, Framer, and beyond

***

#### Platform-specific setup guides

Choose your implementation target:

* [Webflow – How to Track Typeform Form Submissions](/how-to-track-custom-form-submissions/typeform/framer-how-to-track-typeform-submissions)
* [Framer – How to Track Typeform Form Submissions](/how-to-track-custom-form-submissions/typeform/webflow-how-to-track-typeform-submissions)
* [Custom/Self-Hosted](/how-to-track-custom-form-submissions/tally.so/custom-self-hosted-how-to-track-tally.so-form-submissions)[ – How to Track Typeform Form Submissions](/how-to-track-custom-form-submissions/typeform/custom-self-hosted-how-to-track-typeform-submissions)

***

#### Requirements

Before getting started, make sure:

* The Humblytics tracking script is installed on your site
* Your form is embedded and functional on the page you want to track


# Framer – How to Track Typeform Submissions

Humblytics makes it easy to track custom form submissions—including embedded Typeform widgets—without any need for complex analytics tools or cookie banners. Follow this guide to set up accurate form conversion tracking using a simple embed script.

Why Track Form Submissions?

Tracking form completions helps you:\
• Measure lead conversion from landing pages\
• Evaluate the performance of different form layouts or CTAs\
• Run A/B tests and attribute success accurately\
• Trigger goals in funnel analysis

Prerequisites

Before starting, make sure:\
• You have a Typeform embedded on your site\
• Humblytics is installed and active on the same page (via the tracking script)

#### Step-by-Step Setup

To track Typeform submissions, embed the following code where your Typeform appears:

```
<!-- Typeform -->
<div data-tf-on-submit="submit" data-tf-live="FORMID"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

<!-- Humblytics custom tracking begins -->
<script>
  function submit({ formId, responseId }) {
    window.parent.postMessage({
      type: 'formSubmission',
      formName: 'custom-form',
      formId: formId,
      responseId: responseId
    }, '*');
  }
</script>
<!-- Humblytics custom tracking ends -->
```

**Explanation:**

* data-tf-on-submit="submit" binds the Typeform submission event to your custom function
* The submit() function calls Humblytics.trackFormSubmission("custom-form"), which logs the submission as a tracked event

#### Viewing Submissions in Your Dashboard

Once your form is live and receiving submissions:

1. Log into your Humblytics dashboard
2. Navigate to the Forms section
3. Look for "custom-form" under tracked form events
4. Use filters (by traffic source, device, or time) to analyze performance


# Webflow – How to Track Typeform Submissions

If you use Typeform to collect leads or survey responses on your Webflow site, tracking submissions is critical for measuring conversions and optimizing performance. With Humblytics, you can track Typeform completions as custom form events—without using cookies, code-heavy workarounds, or Google Tag Manager.\\

This guide walks you through embedding a Typeform in Webflow and triggering a submission event in Humblytics.

***

#### Why Track Typeform Events in Humblytics?

* Monitor conversion rates from embedded forms
* Attribute submissions to specific campaigns or traffic sources
* Set goals in funnels or A/B split tests
* Maintain privacy compliance with no cookies or banners

***

#### Step-by-Step: Track Typeform Submissions in Webflow

Here’s how to embed Typeform in your Webflow project and hook into submission tracking.

**1. Add the Typeform Embed**

In Webflow:

* Open your project in the Designer
* Drag an Embed element into your page
* Paste the following code:

```
<!-- Typeform -->
<div data-tf-on-submit="submit" data-tf-live="YOUR-TYPEFORM-ID"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
```

> 🔁 Replace YOUR-TYPEFORM-ID with your actual Typeform ID (found in your Typeform share link).\\

**2. Add Humblytics Submission Tracking**\\

Just below the embed, add this tracking script in the same Embed block:

```
<!-- Humblytics custom tracking begins -->
<script>
  function submit({ formId, responseId }) {
    window.Humblytics.trackFormSubmission("custom-form");
  }
</script>
<!-- Humblytics custom tracking ends -->
```

> 💡 You can rename "custom-form" to something more descriptive like "pricing-typeform" to organize multiple tracked forms.

***

#### View the Data in Humblytics

Once live:

1. Open your Humblytics dashboard
2. Go to Conversions or Forms
3. Look for "custom-form" in the list of tracked events
4. Filter by page, referrer, or device to dig deeper into user behavior

***

#### Benefits of This Setup

* Cookie-free tracking: No consent banners required
* Works on any plan: Even the $9/month tier supports custom events
* No-code setup: Just a single embed block in Webflow
* Real-time insights: View submissions in your dashboard immediately

***

#### Optional Enhancements

* Combine this with funnels to see how Typeform fits into the full user journey
* Use A/B testing to compare Typeform placements or CTAs


# Custom/Self-Hosted – How to Track Typeform Submissions

### Track Typeform Submissions on Custom / Self-Hosted Sites with Humblytics

If you embed Typeform on a custom-built site—whether it’s a static Jamstack deployment, a PHP app, or a hand-rolled HTML page—Humblytics can record every submission as a custom event with **zero cookies** and **no third-party tag managers**.

***

#### Why Track Typeform Events in Humblytics?

* **Monitor conversion rates** on landing pages and microsites
* **Attribute completions** to specific campaigns or traffic sources
* **Set goals** in funnels or A/B split tests for deeper insight
* **Stay privacy-compliant**—no consent banners required

***

#### Prerequisites

1. Your **Typeform ID** (found in the share URL).
2. The **Humblytics global tracking script** already present in the site’s `<head>`—added once to a base template, layout component, or `index.html`.

> **Already see page-view data in Humblytics?** Perfect—your global script is active and ready.

***

#### Step-by-Step: Track Typeform Submissions on Custom Sites

Follow the same two-snippet approach you’d use in Webflow—just paste the code into your HTML template.

1. **Add the Typeform Embed**

   ```html
   <!-- Typeform -->
   <div data-tf-on-submit="submit" data-tf-live="YOUR-TYPEFORM-ID"></div>
   <script src="//embed.typeform.com/next/embed.js"></script>
   ```

   🔁 Replace **YOUR-TYPEFORM-ID** with the actual ID from your Typeform share link (`https://form.typeform.com/to/abcdef` → `abcdef`).
2. **Hook in Humblytics Submission Tracking**\
   Directly below the embed, add:

   ```html
   <!-- Humblytics custom tracking begins -->
   <script>
     function submit({ formId, responseId }) {
       // Track the event in Humblytics
       window.Humblytics.trackFormSubmission("custom-form");
     }
   </script>
   <!-- Humblytics custom tracking ends -->
   ```

   💡 Rename **"custom-form"** to something descriptive (e.g., `pricing-typeform`) if you’ll track multiple forms.
3. **Deploy / Publish**
   * **Static sites:** Push to Git and redeploy (Netlify, Vercel, Cloudflare Pages).
   * **Server-rendered apps:** Commit and redeploy via your CI/CD pipeline.
   * **FTP / cPanel:** Upload the updated file.

That’s it—Humblytics will start logging form completions as soon as traffic hits the page.

***

#### View the Data in Humblytics

1. Log in to your **Humblytics** dashboard.
2. Navigate to **Conversions → Forms**.
3. Look for **"custom-form"** (or your chosen label) in the event list.
4. Apply filters (page, referrer, device) to analyse performance.

***

#### Benefits of This Setup

| Advantage                | Detail                                                      |
| ------------------------ | ----------------------------------------------------------- |
| **Cookie-free tracking** | No consent banners required.                                |
| **Works on every plan**  | Even the $9/month tier supports custom events.              |
| **Lightweight**          | Only the 36 kb Humblytics script—no GTM or extra libraries. |
| **Real-time insights**   | Submissions appear immediately in your dashboard.           |

***

#### Optional Enhancements

* **Funnels:** See how Typeform sits in the broader conversion journey.
* **A/B Testing:** Compare form placement, copy, or CTA colours.
* **Custom properties:** Pass extra metadata (e.g., plan tier) via `window.Humblytics.track("pricing-typeform", { tier: "pro" })` inside the `submit()` callback.


# Cal.com

**Tracking Cal.com Submissions with Humblytics**

Humblytics makes it easy to track form submissions from **Cal.com** across multiple platforms—**without cookies**, **without GTM**, and **with full privacy compliance**.

Tracking submissions helps you:

* Attribute leads to campaigns, sources, and experiments
* Visualize drop-off points in funnels
* Run A/B tests on forms or layouts
* Measure true conversion performance in Webflow, Framer, and beyond

***

#### 🧭 Platform-specific setup guides

Choose your implementation target:

* [Webflow – How to Track Cal.com Form Submissions](/how-to-track-custom-form-submissions/cal.com/webflow-how-to-track-cal.com-booking-submissions)
* [Framer – How to Track Cal.com Form Submissions](/how-to-track-custom-form-submissions/cal.com/framer-how-to-track-cal.com-booking-submissions)
* [Custom/Self-Hosted – How to Track Cal.com Form Submissions](/how-to-track-custom-form-submissions/cal.com/custom-self-hosted-how-to-track-cal.com-booking-submissions)

***

#### 🛠️ Requirements

Before getting started, make sure:

* The [Humblytics tracking script](https://docs.humblytics.com/how-to-get-started/add-humblytics-analytics-to-a-custom-self-hosted-site) is installed on your site
* Your form is embedded and functional on the page you want to track


# Webflow – How to Track Cal.com Booking Submissions

Want to track calendar bookings from your Webflow site? If you’re using Cal.com to schedule calls or demos, you can integrate Humblytics to track every successful booking as a conversion—no cookies, pop-ups, or complex data layers required.

This guide walks you through embedding a Cal.com calendar into your Webflow site and tracking bookings using Humblytics.

***

#### Why Track Cal Bookings?

* Measure the effectiveness of landing pages and CTAs
* Attribute bookings to campaigns, traffic sources, or devices
* Trigger conversion goals and power funnel analysis
* Stay compliant with privacy regulations—no cookies used

***

#### Step-by-Step: Embed Cal.com with Humblytics Tracking

**1. Add the Embed Element in Webflow**

In the Webflow Designer:

* Drag an Embed element onto your page
* Paste the following embed code (replace the Cal link with your own):

```
<!-- Cal inline embed code begins -->
<div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline"></div>
<script type="text/javascript">
  (function (C, A, L) {
    let p = function (a, ar) { a.q.push(ar); };
    let d = C.document;
    C.Cal = C.Cal || function () {
      let cal = C.Cal;
      let ar = arguments;
      if (!cal.loaded) {
        cal.ns = {};
        cal.q = cal.q || [];
        d.head.appendChild(d.createElement("script")).src = A;
        cal.loaded = true;
      }
      if (ar[0] === L) {
        const api = function () { p(api, arguments); };
        const namespace = ar[1];
        api.q = api.q || [];
        if (typeof namespace === "string") {
          cal.ns[namespace] = cal.ns[namespace] || api;
          p(cal.ns[namespace], ar);
          p(cal, ["initNamespace", namespace]);
        } else p(cal, ar);
        return;
      }
      p(cal, ar);
    };
  })(window, "https://app.cal.com/embed/embed.js", "init");

  Cal("init", "30min", { origin: "https://cal.com" });
  Cal.ns["30min"]("inline", {
    elementOrSelector: "#my-cal-inline",
    config: { "layout": "month_view" },
    calLink: "your-username/your-cal-link" // Replace with your Cal.com link
  });
  Cal.ns["30min"]("ui", {
    "hideEventTypeDetails": false,
    "layout": "month_view"
  });
</script>
<!-- Cal inline embed code ends -->
```

**2. Add Humblytics Tracking Script**

Below the embed, add this inside the same \<script> tag or in a separate embed:

```
<!-- Humblytics custom tracking begins -->
<script>
  Cal.ns["30min"]("on", {
    action: "bookingSuccessful",
    callback: (e)=>{
      window.Humblytics.trackFormSubmission("cal-embed");
    }
  });
</script>
<!-- Humblytics custom tracking ends -->
```

***

#### How to View Booking Events in Humblytics

After setup:

1. Log in to your Humblytics dashboard
2. Go to Conversions or Forms
3. Look for "cal-embed" in the list of tracked events
4. Filter by page, referrer, or session to explore full journey insights\\

> 💡 You can rename "cal-embed" to a more descriptive label like "demo-call-booking" if you’re tracking multiple booking types.

***

#### Key Benefits

* No cookies required – works out of the box
* Real-time tracking – see submissions as they happen
* A/B test compatible – use bookings as success goals
* Lightweight setup – one embed block in Webflow is all you need


# Framer – How to Track Cal.com Booking Submissions

Convert every successful calendar booking into a **Humblytics conversion event**—no cookies, consent banners, or heavyweight tag managers required.

***

**Why Track Cal Bookings?**

* Quantify how well pages, CTAs, and campaigns drive booked calls
* Attribute bookings to traffic sources, devices, and user journeys
* Trigger funnel goals or A/B-test winners with real revenue signals
* Maintain strict privacy compliance—Humblytics is 100 % cookie-free

***

### Step-by-Step Integration

> **Prerequisites**
>
> * Your site already loads the global `hmbl.min.js` tracking script (36 kb, async).
> * You have a live Cal.com event link (e.g., `https://cal.com/your-username/demo-call`).

#### 1 Embed the Cal.com Widget

Place the snippet where you want the calendar to appear—inside any HTML file, template, or CMS block:

```html
<!-- Cal inline embed code begins -->
<div style="width:100%;height:100%;overflow:auto" id="my-cal-inline"></div>
<script type="text/javascript">
  (function (C, A, L) {
    let p = function (a, ar) { a.q.push(ar); };
    let d = C.document;
    C.Cal = C.Cal || function () {
      let cal = C.Cal, ar = arguments;
      if (!cal.loaded) {
        cal.ns = {}; cal.q = cal.q || [];
        d.head.appendChild(d.createElement("script")).src = A;
        cal.loaded = true;
      }
      if (ar[0] === L) {
        const api = function () { p(api, arguments); }, ns = ar[1];
        api.q = api.q || [];
        if (typeof ns === "string") {
          cal.ns[ns] = cal.ns[ns] || api;
          p(cal.ns[ns], ar); p(cal, ["initNamespace", ns]);
        } else p(cal, ar);
        return;
      }
      p(cal, ar);
    };
  })(window, "https://app.cal.com/embed/embed.js", "init");

  /* Initialise a 30-min event namespace */
  Cal("init", "30min", { origin: "https://cal.com" });

  /* Render the inline calendar */
  Cal.ns["30min"]("inline", {
    elementOrSelector: "#my-cal-inline",
    config: { layout: "month_view" },
    calLink: "your-username/your-cal-link"   <!-- replace with your link -->
  });

  /* Optional UI tweaks */
  Cal.ns["30min"]("ui", {
    hideEventTypeDetails: false,
    layout: "month_view"
  });
</script>
<!-- Cal inline embed code ends -->
```

#### 2 Hook the Booking Event to Humblytics

Immediately after the embed (inside the same `<script>` block **or** a new one below it), add the listener that fires when a booking completes:

```html
<!-- Humblytics custom tracking begins -->
<script>
  Cal.ns["30min"]("on", {
    action: "bookingSuccessful",
    callback: () => {
      window.Humblytics.trackFormSubmission("cal-embed");  // rename as needed
    }
  });
</script>
<!-- Humblytics custom tracking ends -->
```

*Rename* `"cal-embed"` to something descriptive like `"intro-call-booking"` if you track multiple event types.

***

### Verifying Bookings in Humblytics

1. Log in to **Humblytics → Conversions / Forms**
2. Find the **Event Label** you passed (e.g., `cal-embed`)
3. Use filters (page, referrer, device, campaign) to analyse performance or build funnels

***

#### Key Benefits Recap

| Benefit         | Detail                                               |
| --------------- | ---------------------------------------------------- |
| **Cookie-free** | No consent banners; privacy-first tracking           |
| **Real-time**   | Bookings appear in your dashboard within seconds     |
| **A/B-ready**   | Use the event as a primary goal in split tests       |
| **Lightweight** | One embed + one five-line callback—no GTM or plugins |

Deploy, test a booking, and start measuring the actions that matter. Happy tracking!


# Custom/Self-Hosted – How to Track Cal.com Booking Submissions

Framer users embedding Cal.com can now easily track booking completions using Humblytics’ privacy-first analytics. This guide walks you through capturing a successful calendar booking as a form submission event—without any cookies, data layers, or complex setup.

#### Why Track Booking Events?

Capturing successful bookings helps you:

* Measure conversion performance of your scheduling flows
* Attribute meetings to traffic sources, campaigns, or experiments
* Set up conversion goals in funnel reports or A/B tests

***

#### Requirements

Before you begin:

* You’ve embedded Cal.com on your Framer page
* Humblytics is installed via the site tracking script
* You are using a named Cal namespace (e.g. "30min" in this example)

***

#### Step-by-Step: Embed Cal.com with Tracking Enabled

\
Use the following embed template. Replace the YOUR-CAL-LINK placeholder with your actual Cal.com booking link.

```
<!-- Cal inline embed code begins -->
<div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline"></div>
<script type="text/javascript">
  (function (C, A, L) {
    let p = function (a, ar) { a.q.push(ar); };
    let d = C.document;
    C.Cal = C.Cal || function () {
      let cal = C.Cal;
      let ar = arguments;
      if (!cal.loaded) {
        cal.ns = {};
        cal.q = cal.q || [];
        d.head.appendChild(d.createElement("script")).src = A;
        cal.loaded = true;
      }
      if (ar[0] === L) {
        const api = function () { p(api, arguments); };
        const namespace = ar[1];
        api.q = api.q || [];
        if (typeof namespace === "string") {
          cal.ns[namespace] = cal.ns[namespace] || api;
          p(cal.ns[namespace], ar);
          p(cal, ["initNamespace", namespace]);
        } else p(cal, ar);
        return;
      }
      p(cal, ar);
    };
  })(window, "https://app.cal.com/embed/embed.js", "init");

  Cal("init", "30min", { origin: "https://cal.com" });
  Cal.ns["30min"]("inline", {
    elementOrSelector: "#my-cal-inline",
    config: { "layout": "month_view" },
    calLink: "your-username/your-cal-link" // Replace this
  });
  Cal.ns["30min"]("ui", {
    "hideEventTypeDetails": false,
    "layout": "month_view"
  });
</script>

<!-- Humblytics custom tracking begins -->
<script>
  Cal.ns["30min"]("on", {
    action: "bookingSuccessful",
    callback: (e) => {
      window.parent.postMessage({
        type: 'formSubmission',
        formName: 'cal-embed'
      }, '*');
    }
  });
</script>
<!-- Humblytics custom tracking ends -->
```

***

#### Viewing the Results

Once installed, successful bookings will appear under Forms or Conversions in your Humblytics dashboard, labeled as "cal-embed" by default.

To track different booking types, update the formName:

```
formName: 'demo-call'
```


# Hubspot Forms

**Tracking Hubspot Form Submissions with Humblytics**

Humblytics makes it easy to track form submissions from **Hubspot** across multiple platforms—**without cookies**, **without GTM**, and **with full privacy compliance**.

Tracking submissions helps you:

* Attribute leads to campaigns, sources, and experiments
* Visualize drop-off points in funnels
* Run A/B tests on forms or layouts
* Measure true conversion performance in Webflow, Framer, and beyond

***

#### 🧭 Platform-specific setup guides

Choose your implementation target:

* [Webflow – How to Track Hubspot Form Submissions](/how-to-track-custom-form-submissions/hubspot-forms/webflow-how-to-track-hubspot-form-submissions)
* [Framer – How to Track Hubspot Form Submissions](/how-to-track-custom-form-submissions/hubspot-forms/framer-how-to-track-hubspot-form-submissions)
* [Custom/Self-Hosted – How to Track Hubspot Form Submissions](/how-to-track-custom-click-events/how-to-track-click-events-on-custom-self-hosted-site)

***

#### 🛠️ Requirements

Before getting started, make sure:

* The [Humblytics tracking script](https://docs.humblytics.com/how-to-get-started/add-humblytics-analytics-to-a-custom-self-hosted-site) is installed on your site
* Your form is embedded and functional on the page you want to track


# Framer – How to Track HubSpot Form Submissions

### Why track HubSpot forms?

* Measure lead‑gen performance directly in Humblytics
* Attribute submissions to specific campaigns and traffic sources
* Set goals inside Funnels or A/B Experiments
* Keep tracking cookie‑free and privacy compliant

***

### Prerequisites

| Requirement                                      | Check |
| ------------------------------------------------ | ----- |
| A HubSpot form (portal + form IDs)               | ✔︎    |
| Framer project with the Humblytics tag installed | ✔︎    |

If the Humblytics script isn’t yet in your Framer site, follow the Framer installation guide first.

***

### Step‑by‑Step: Track HubSpot Submissions in Framer

#### 1 · Add the HubSpot embed

1. In your Framer canvas, select **Insert → Embed** (or drag an **Embed** block onto the page).
2. Paste your HubSpot embed code:

```
<!-- HubSpot Embed -->
<script src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
  region: "na1",             // update if needed
  portalId: "YOUR_PORTAL_ID", // replace with your portal ID
  formId: "YOUR_FORM_ID"      // replace with your form ID
});
</script>
```

3. Publish your site.

#### 2 · Hook into the submission callback

Edit the embed snippet to include `onFormSubmit` and call Humblytics:

```
<script>
hbspt.forms.create({
  region: "na1",
  portalId: "YOUR_PORTAL_ID",
  formId: "YOUR_FORM_ID",
  onFormSubmit: function($form) {
    window.parent.postMessage({
      type: 'formSubmission',
      formName: 'hubspot-lead',
      formId: formId,
      responseId: responseId
    }, '*');
  }
});
</script>
```

Choose any descriptive label (e.g., `demo-request`) for tracking.

#### 3 · Verify in Humblytics

1. Publish & open the live Framer URL.
2. Submit the form once.
3. In Humblytics, go to **Conversions → Forms** and look for **hubspot-lead**. Data appears within \~30 seconds.

***

### Troubleshooting

| Issue                  | Fix                                                                                      |
| ---------------------- | ---------------------------------------------------------------------------------------- |
| No event appears       | Ensure the Humblytics script is in **Site Settings → Custom Code → Head** and republish. |
| Event label is wrong   | Double‑check the string passed to `trackFormSubmission()`.                               |
| Multiple HubSpot forms | Use unique labels (`contact-lead`, `pricing-lead`, etc.) per embed.                      |

***

### Next steps

* **Funnels:** Add the form label as the final step to visualise drop‑off.
* **Experiments:** Use Humblytics A/B tests to compare form placements or CTA copy.

For advanced use cases—multi‑step HubSpot forms, hidden UTM fields, or offline events—email **<support@humblytics.com>** and we’ll guide you through.


# Custom/Self-Hosted – How to Track HubSpot Form Submissions

### **Why track HubSpot forms?**

* Measure lead-gen conversion rates directly inside Humblytics
* Attribute submissions to campaigns, traffic sources, A/B tests
* Preserve a cookie-free, privacy-compliant analytics stack—no banners required

***

### Prerequisites

* Your pages already load the global **`hmbl.min.js`** script (36 kb, async).
* You have the standard HubSpot embed snippet for your portal & form IDs.

***

### Step-by-Step Setup

#### 1 · Embed the HubSpot form

Paste the HubSpot embed wherever the form should render (HTML template, CMS block, component):

```html
htmlCopyEdit<!-- HubSpot form embed -->
<script src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
  region:  "na1",             // confirm your region
  portalId: "YOUR_PORTAL_ID",  // replace with your portal ID
  formId:   "YOUR_FORM_ID"     // replace with your form ID
});
</script>
```

Publish / deploy your site.

***

#### 2 · Hook into the submission event

Add the **`onFormSubmit`** callback inside the same snippet (or in a new `<script>` block directly after it):

```html
htmlCopyEdit<script>
hbspt.forms.create({
  region:  "na1",
  portalId:"YOUR_PORTAL_ID",
  formId:  "YOUR_FORM_ID",
  onFormSubmit: function ($form) {
    window.Humblytics.trackFormSubmission("hubspot-lead");  // rename as needed
  }
});
</script>
```

*Use a descriptive label*—e.g., `"pricing-demo-request"`—if you track multiple HubSpot forms.

***

#### 3 · Verify in Humblytics

1. Submit the form once on the live site.
2. Open **Dashboard → Conversions / Forms**.
3. Locate **`hubspot-lead`** (or your custom label). Data appears within \~30 s.

***

### Key Benefits

| Benefit             | Detail                                    |
| ------------------- | ----------------------------------------- |
| Cookie-free         | No consent banners or CMP required        |
| Real-time           | Submissions populate dashboards instantly |
| Works on every plan | Lite tier and up support custom events    |
| Zero extras         | No GTM, plugins, or additional libraries  |

***

#### Optional Enhancements

* **Funnels:** use the label as the final step to see pre-submit drop-off.
* **Experiments:** set the label as your success goal to A/B-test form placement, copy, or CTA design.

***

For advanced use cases—multi‑step HubSpot forms, hidden UTM fields, or offline events—email **<support@humblytics.com>** and we’ll guide you through.


# Webflow – How to Track HubSpot Form Submissions

### Why track HubSpot forms?

* Measure lead‑gen conversion rates directly in Humblytics
* Attribute submissions to campaigns, A/B tests, and traffic sources
* Maintain a cookie‑free, privacy‑compliant stack—no banners required

***

### Prerequisites

| Requirement                                     | Check |
| ----------------------------------------------- | ----- |
| HubSpot Marketing account with an existing form | ✔︎    |
| Webflow project with Humblytics tag installed   | ✔︎    |

If the Humblytics script isn’t on your site yet, follow the Webflow installation guide first.

***

### Step‑by‑Step: Track HubSpot Submissions in Webflow

#### 1 · Embed the HubSpot form

In Webflow Designer:

1. Drag an **Embed** element where you want the form.
2. Paste your HubSpot embed code. It typically looks like:

```
<!-- HubSpot Embed -->
<script src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
  region: "na1",             // confirm your region
  portalId: "YOUR_PORTAL_ID", // replace with your portal ID
  formId: "YOUR_FORM_ID"      // replace with your form ID
});
</script>
```

3. Publish the site.

#### 2 · Hook into the submission event

HubSpot’s Forms API supports an `onFormSubmit` callback. Add the callback just below the create block:

```
<script>
hbspt.forms.create({
  region: "na1",
  portalId: "YOUR_PORTAL_ID",
  formId: "YOUR_FORM_ID",
  onFormSubmit: function($form) {
    window.Humblytics.trackFormSubmission("hubspot-lead"); // choose any label
  }
});
</script>
```

`trackFormSubmission()` logs a custom event named **hubspot‑lead** in Humblytics.

> Tip: Use descriptive labels like `pricing‑demo‑request` if you embed multiple HubSpot forms on the same site.

#### 3 · Verify in Humblytics

1. Submit the form once on the published site.
2. Open **Dashboard → Conversions → Forms**.
3. Look for **hubspot‑lead** (or your chosen label). Data appears within \~30 seconds.

***

### Benefits of this setup

* Cookie‑free tracking—no consent banners required
* Works on every Humblytics plan, including Lite
* No additional JavaScript libraries or tag managers
* Real‑time visibility in dashboards, heatmaps, and funnels

***

### Optional enhancements

* **Funnels:** Add the form label as the final step to measure pre‑submit drop‑off.
* **A/B tests:** Use Humblytics Experiments to compare form placements, copy, or CTA buttons.

***

For advanced use cases—multi‑step HubSpot forms, hidden UTM fields, or offline events—email **<support@humblytics.com>** and we’ll guide you through.


# Hubspot Booking Links

**Tracking Hubspot Booking Links with Humblytics**

Humblytics makes it easy to track booking links from **Hubspot** across multiple platforms—**without cookies**, **without GTM**, and **with full privacy compliance**.

Tracking booking links helps you:

* Attribute leads to campaigns, sources, and experiments
* Visualize drop-off points in funnels
* Run A/B tests on forms or layouts
* Measure true conversion performance in Webflow, Framer, and beyond

***

#### 🧭 Platform-specific setup guides

Choose your implementation target:

* [Webflow – How to Track Hubspot Form Submissions](/how-to-track-custom-form-submissions/hubspot-forms/webflow-how-to-track-hubspot-form-submissions)
* [Framer – How to Track Hubspot Form Submissions](/how-to-track-custom-form-submissions/hubspot-forms/framer-how-to-track-hubspot-form-submissions)
* [Custom/Self-Hosted – How to Track Hubspot Form Submissions](/how-to-track-custom-click-events/how-to-track-click-events-on-custom-self-hosted-site)

***

#### 🛠️ Requirements

Before getting started, make sure:

* The [Humblytics tracking script](https://docs.humblytics.com/how-to-get-started/add-humblytics-analytics-to-a-custom-self-hosted-site) is installed on your site
* Your Hubspot booking link and embedded calendar is included and functional on the page you want to track


# Framer – How to Track HubSpot Booking Links

### Why track HubSpot booking links?

* Measure lead‑gen performance directly in Humblytics
* Attribute submissions to specific campaigns and traffic sources
* Set goals inside Funnels or A/B Experiments
* Keep tracking cookie‑free and privacy compliant

***

### Prerequisites

| Requirement                                      | Check |
| ------------------------------------------------ | ----- |
| A HubSpot booking link                           | ✔︎    |
| A HubSpot calendar embed                         | ✔︎    |
| Framer project with the Humblytics tag installed | ✔︎    |

If the Humblytics script isn’t yet in your Framer site, follow the Framer installation guide first.

***

### Step‑by‑Step: Track HubSpot Booking Links in Framer

#### 1 · Add the HubSpot embed

1. In your Framer canvas, select **Insert → Embed** (or drag an **Embed** block onto the page).
2. Paste your HubSpot calendar code:

```
<!-- Start of Meetings Embed Script -->
  <div class="meetings-iframe-container" data-src="https://meetings.hubspot.com/your-unique-link">
    <iframe src="https://meetings.hubspot.com/your-unique-link" width="100%" data-hs-ignore="true"></iframe>
  </div>
  <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>
<!-- End of Meetings Embed Script --></div>
```

3. Publish your site.

#### 2 · Hook into the submission callback

Edit the embed snippet to add the Humblytics hook:

```
<!-- Humblytics custom tracking begins -->
<script>
  window.addEventListener("message", function (event) {
    // Forward any Hubspot Booking events to the parent → Humblytics
    window.parent.postMessage(event.data, "*");
  });
</script>
<!-- Humblytics custom tracking ends -->
```

#### 3 · Verify in Humblytics

1. Publish & open the live Framer URL.
2. Submit a booking request once.
3. In Humblytics, go to **Conversions → Forms** and look for **Hubspot Meeting Booking**. Data appears within \~30 seconds.

***

### Troubleshooting

| Issue            | Fix                                                                                      |
| ---------------- | ---------------------------------------------------------------------------------------- |
| No event appears | Ensure the Humblytics script is in **Site Settings → Custom Code → Head** and republish. |

***

### Next steps

* **Funnels:** Add the form label as the final step to visualise drop‑off.
* **Experiments:** Use Humblytics A/B tests to compare form placements or CTA copy.

For advanced use cases—multi‑step HubSpot forms, hidden UTM fields, or offline events—email **<support@humblytics.com>** and we’ll guide you through.


# Webflow – How to Track HubSpot Booking Links

### Why track HubSpot booking links?

* Measure lead‑gen performance directly in Humblytics
* Attribute submissions to specific campaigns and traffic sources
* Set goals inside Funnels or A/B Experiments
* Keep tracking cookie‑free and privacy compliant

***

### Prerequisites

| Requirement                                       | Check |
| ------------------------------------------------- | ----- |
| A HubSpot booking link                            | ✔︎    |
| A HubSpot calendar embed                          | ✔︎    |
| Webflow project with the Humblytics tag installed | ✔︎    |

If the Humblytics script isn’t yet in your Webflow site, follow the Webflow installation guide first.

***

### Step‑by‑Step: Track HubSpot Booking Links in Webflow

#### 1 · Add the HubSpot embed

1. In your Webflow editor, select **Insert → Embed** (or drag an **Embed** block onto the page).
2. Paste your HubSpot calendar code:

```
<!-- Start of Meetings Embed Script -->
  <div class="meetings-iframe-container" data-src="https://meetings.hubspot.com/your-unique-link">
    <iframe src="https://meetings.hubspot.com/your-unique-link" width="100%" data-hs-ignore="true"></iframe>
  </div>
  <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>
<!-- End of Meetings Embed Script --></div>
```

3. Publish your site.

#### 2 · Verify in Humblytics

1. Publish & open the live Webflow URL.
2. Submit a booking request once.
3. In Humblytics, go to **Conversions → Forms** and look for **Hubspot Meeting Booking**. Data appears within \~30 seconds.

***

### Troubleshooting

| Issue            | Fix                                                                                      |
| ---------------- | ---------------------------------------------------------------------------------------- |
| No event appears | Ensure the Humblytics script is in **Site Settings → Custom Code → Head** and republish. |

***

### Next steps

* **Funnels:** Add the form label as the final step to visualise drop‑off.
* **Experiments:** Use Humblytics A/B tests to compare form placements or CTA copy.

For advanced use cases—multi‑step HubSpot forms, hidden UTM fields, or offline events—email **<support@humblytics.com>** and we’ll guide you through.


# Custom/Self-Hosted – How to Track HubSpot Booking Links

### Why track HubSpot booking links?

* Measure lead‑gen performance directly in Humblytics
* Attribute submissions to specific campaigns and traffic sources
* Set goals inside Funnels or A/B Experiments
* Keep tracking cookie‑free and privacy compliant

***

### Prerequisites

| Requirement                                   | Check |
| --------------------------------------------- | ----- |
| A HubSpot booking link                        | ✔︎    |
| A HubSpot calendar embed                      | ✔︎    |
| Custom site with the Humblytics tag installed | ✔︎    |

If the Humblytics script isn’t yet in your custom site, follow the custom site installation guide first.

***

### Step‑by‑Step: Track HubSpot Booking Links in Custom Sites

#### 1 · Add the HubSpot embed

1. In your site editor, add your HubSpot calendar code:

```
<!-- Start of Meetings Embed Script -->
  <div class="meetings-iframe-container" data-src="https://meetings.hubspot.com/your-unique-link">
    <iframe src="https://meetings.hubspot.com/your-unique-link" width="100%" data-hs-ignore="true"></iframe>
  </div>
  <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>
<!-- End of Meetings Embed Script --></div>
```

2. Publish your site.

#### 2 · Verify in Humblytics

1. Publish & open the live site URL.
2. Submit a booking request once.
3. In Humblytics, go to **Conversions → Forms** and look for **Hubspot Meeting Booking**. Data appears within \~30 seconds.

***

### Troubleshooting

| Issue            | Fix                                                                   |
| ---------------- | --------------------------------------------------------------------- |
| No event appears | Ensure the Humblytics script is installed on your site and republish. |

***

### Next steps

* **Funnels:** Add the form label as the final step to visualise drop‑off.
* **Experiments:** Use Humblytics A/B tests to compare form placements or CTA copy.

For advanced use cases—multi‑step HubSpot forms, hidden UTM fields, or offline events—email **<support@humblytics.com>** and we’ll guide you through.


# How to Track Custom Click Events

{% hint style="info" %}
Humblytics automatically tracks click events and form events—no setup required. In your dashboard you'll see **Site Traffic**, **Pages**, **Links**, and **Forms**. Add custom attributes only when you want to assign specific labels to click events (e.g., to distinguish a particular CTA button from other links).
{% endhint %}

**Automatic Tracking**

Click events and form events are tracked automatically once you install the Humblytics script. You can view:

* **Site Traffic** — overall visitor and session metrics
* **Pages** — page view data
* **Links** — click events on links and buttons
* **Forms** — form submission events

**When to Add Custom Attributes**

Add custom attributes when you want to label specific click events with meaningful names (e.g., `hero-cta`, `pricing-button`) so you can identify them in the **Links** section and use them in funnels or A/B tests. Without custom attributes, clicks are still tracked—you just won't have custom labels for specific elements.

**How to Add Custom Click Tracking**

Humblytics supports custom attributes for both Webflow and Framer sites:

1. **Access the Designer Tool**
   * For Webflow: Open your project in the Webflow Designer.
   * For Framer: Open your project in Framer.
2. **Select the Element**
   * Choose the element you want to track (e.g., a button or link).
3. **Add Tracking Attributes**
   * For Webflow: Add a custom attribute such as `humblytics="your-event-name"` in the element settings panel.
   * For Framer: Humblytics natively tracks layer names, so no additional attributes are needed. You can add custom attributes via code overrides for more precise naming.
4. **View in Humblytics**
   * Log in to your Humblytics dashboard.
   * Navigate to **Analytics → Links** to see your click events. Custom attribute events will appear once they have been triggered at least once.
5. **Monitor and Analyze**
   * Use Humblytics' real-time insights and reports to monitor clicks and optimize your site accordingly.

**Cross-Domain Click Tracking**

Track click events across multiple domains with unified reporting in your main dashboard. Use the `domain` parameter to attribute clicks from external domains:

```javascript
// Track clicks on external domains
window.Humblytics.trackClickEvent("purchase-button", {
  domain: "yourmainsite.com",
});
```

This is especially useful for:

* Ecommerce sites with separate checkout domains
* Multi-domain company websites
* Third-party integration tracking

For complete cross-domain setup instructions, see our [Cross-Domain Tracking & Whitelisting](/cross-domain-tracking-and-whitelisting) guide.

**Additional Features**

* **Track FAQ Click Events**
  * Specifically for Framer, track your most-clicked FAQs without any custom code or attributes. This feature helps you understand which questions your visitors find most engaging.

**Resources and Support**

* For detailed instructions and visual guidance, refer to the specific guides for Webflow and Framer:
  * [How to Add Custom Click Tracking for Webflow Sites](/how-to-track-custom-click-events/how-to-add-custom-event-tracking-for-webflow-sites)
  * [How to Add Custom Click Tracking for Framer Sites](/how-to-track-custom-click-events/how-to-add-custom-event-tracking-for-framer-sites)
  * [Video Tutorials](https://www.humblytics.com/video-tutorials)


# How to Track Click Events on Custom / Self‑Hosted Site

Tracking key user interactions—like CTA clicks or nav link taps—shouldn’t require a dev team or a tag manager. Humblytics makes it incredibly easy to track custom clicks on any website by using HTML attributes, just like you would in Webflow.

This works for:

* WordPress (via HTML blocks or page builders)
* Shopify (in Liquid templates)
* Static HTML sites
* Framer, Squarespace, Ghost, etc.

***

#### Step 1: Install the Humblytics Tracking Script

Add this to the \<head> of your site:

```
<script src="https://app.humblytics.com/optimize.min.js?id=YOURID"></script>
```

> Replace ID with your actual site ID from your Humblytics dashboard.

***

#### Step 2: Add a Custom Attribute to Any Clickable Element

To track a specific button or link, just add a custom attribute like this:

```
<a href="/signup" humblytics="hero-signup-btn">Sign up</a>
```

Or:

```
<button humblytics="pricing-cta">View Pricing</button>
```

No JavaScript. No configuration. Just pure, privacy-first tracking.

***

#### Step 3: See Results in Your Dashboard

1. Go to your Humblytics dashboard
2. Click on the Clicks tab
3. Look for your custom attribute value (e.g. hero-signup-btn)\\

You’ll see:

* Click counts
* Page breakdowns
* Traffic source filters
* Device segmentation

***

#### Best Practices

| What to Track         | Example Attribute           |
| --------------------- | --------------------------- |
| Hero CTA              | humblytics="hero-cta"       |
| Pricing button        | humblytics="pricing-btn"    |
| Navigation link       | humblytics="nav-about"      |
| Footer contact button | humblytics="footer-contact" |

Use clear and unique values to make reporting and filtering easy inside your dashboard.

***

#### Where to Add Attributes by Platform

| Platform   | How to Add the humblytics Attribute               |
| ---------- | ------------------------------------------------- |
| Webflow    | Use the “Custom Attributes” field in the Designer |
| WordPress  | In Gutenberg, use the HTML view or a Code block   |
| Shopify    | Add attributes in theme.liquid or section files   |
| Framer     | Use Embed blocks or custom components             |
| HTML sites | Add directly to your element’s tag                |


# How to Add Custom Click Tracking for Webflow Sites

Humblytics automatically tracks click events and form events on Webflow—no setup required. Add custom attributes when you want to label specific click events (e.g., to distinguish a particular CTA button from other links) so you can identify them in **Analytics → Links**.

**Adding Custom Attributes**

1. **Access Webflow Designer**
   * Open your Webflow project in the Webflow Designer.
2. **Select the Element**
   * Click on the element you want to add a custom attribute to.
3. **Add Custom Attribute**
   * In the element settings panel, scroll to the "Custom Attributes" section.
   * Click "Add Custom Attribute".
   * Enter the name and value for your custom attribute (e.g., `humblytics="hero-nav-btn"`).
4. **Save and Publish**

* Save your changes in Webflow.
* Publish your site to apply the new custom attributes.

<figure><img src="/files/uGAALnvs0fTfJVQbjX0J" alt=""><figcaption><p>You can add cusotm attributes in the settings section of the Webflow desginer</p></figcaption></figure>

**Using Custom Attributes in Humblytics**

1. **Log in to Humblytics**
   * Go to the Humblytics dashboard and log in with your credentials.
2. **Navigate to Links under Analytics**
   * Go to **Analytics → Links** in the sidebar.
   * Look for the custom attribute event name, assuming it has been triggered at lease once.
3. **Monitor Custom Attributes**
   * Use the real-time insights and reports in Humblytics to analyze data associated with your custom attributes.
   * Track specific interactions and gather detailed analytics based on the custom attributes added to your Webflow elements.

<figure><img src="/files/Y20744HSAop8ycTAYt6I" alt=""><figcaption><p>FAQ elements are automatically tracked with Humblytics</p></figcaption></figure>

**Resources and Guidelines**

For further assistance and visual guidance, refer to the following resources:

* [How to Track Custom Events and Clicks for Webflow Video Tutorial](https://www.youtube.com/watch?v=PHDrTqKqa5Y\&t=35s)


# How to Add Custom Click Tracking for Framer Sites

Humblytics automatically tracks click events and form events on Framer projects—no setup required. Add custom attributes to your Framer elements when you want to label specific click events (e.g., to distinguish a particular CTA from other links).

**Adding Custom Attributes in Framer**

1\. **Open Code Overrides**

• Click on the provided link in your project.

• Scroll down on the right toolbar.

• Click on **Code Overrides**.

2\. **Add a Code Override**

```javascript
import { type ComponentType } from "react"

export function withHumblyticsAttribute(Component): ComponentType {
    return (props) => {
        return <Component {...props} data-humblytics="your-event-name" />
    }
}
```

**Note:** Replace `withHumblyticsAttribute` with your own function name and `"your-event-name"` with a descriptive name for the event you want to track (e.g., `"nav-pricing"`, `"hero-cta"`, `"footer-signup"`).

‍**‍**Using Custom Attributes in Humblytics

1\. **Log in to Humblytics**

• Open your Humblytics dashboard and log in.

2\. **Navigate to Links under Analytics**

• Go to **Analytics → Links** to review click event data.

3\. **Monitor Custom Attributes**

• Look for the custom attribute event name (e.g., humblytics="hero-nav-btn") once it has been triggered.

• Use the real-time insights and reports to analyze data linked to your custom attributes.

• Track specific interactions and gather detailed analytics based on the custom attributes added to your Framer elements.

<figure><img src="/files/bmK4mOFqJJSo7VkaIucj" alt=""><figcaption></figcaption></figure>

**Track FAQ Click Events**

No more second guessing, track your most-clicked FAQs in Framer without any custom code or attributes. Install the script, and we’ll show you which questions your visitors are interacting with. This functionality is also available for Webflow using custom attributes.

<figure><img src="/files/7ZOOSwSDrl0PUkS0KnjY" alt=""><figcaption><p>FAQ elements are automatically tracked with Humblytics</p></figcaption></figure>


# Workflows

Workflows let you automate your analytics with AI-powered reports, analysis, and alerts. Access Workflows from the sidebar under **Automate**.

**Accessing Workflows**

1. Log in to your Humblytics account and select your site.
2. Click **Workflows** in the sidebar under **Automate**.

**Workflow Hub vs. My Workflows**

The Workflows page has two tabs:

* **Workflow Hub** — Browse all available workflow templates organized by category
* **My Workflows** — View workflows you've set up and their run history

## Available Workflows

### Reports

Automated reporting workflows that deliver insights on a schedule:

* **Weekly Growth Report** — Preview your latest weekly summary and manage automated email notifications. Generates a comprehensive overview of your site's performance including traffic trends, top pages, and conversion metrics.

### Analysis

AI-powered analysis workflows that surface insights from your data:

* **Landing Page Audit** — AI-powered analysis of your landing pages to identify conversion opportunities and UX issues. The audit examines page structure, content, calls-to-action, and user behavior patterns to provide actionable recommendations.
* **A/B Test Ideas Generator** — Generate prioritized experiment hypotheses based on your analytics data and industry best practices. The AI analyzes your traffic patterns, conversion funnels, and click data to suggest tests ranked by expected impact.
* **Competitor Benchmark** *(coming soon)* — Analyze competitor websites and benchmark your performance against industry standards.

### Automation

Event-driven workflows that respond to changes in your data:

* **Traffic Alerts** — Get notified by email when traffic spikes or drops unexpectedly. Configure thresholds and notification preferences to stay informed about significant changes without constantly monitoring your dashboard.

## Running a Workflow

1. Navigate to the **Workflow Hub** tab.
2. Find the workflow you want to run.
3. Click **Run workflow** on the workflow card.
4. Follow any configuration prompts (e.g., selecting a page for audit, setting alert thresholds).
5. View results directly in the app or check your email for report delivery.

## Workflow History

Switch to the **My Workflows** tab to see:

* Previously run workflows and their results
* Scheduled workflows and their next run time
* Workflow status (completed, running, failed)

Workflows use your AI insights quota. Check your plan's AI insights limit under your account settings.


# Connectors

Connectors let you integrate external tools with Humblytics to track revenue, form submissions, and marketing data in one unified dashboard. Access Connectors from the sidebar under **Automate**.

**Accessing Connectors**

1. Log in to your Humblytics account and select your site.
2. Click **Connectors** in the sidebar under **Automate**.

## Available Connectors

### Revenue

Connect your payment provider to track revenue attribution:

* **Stripe** — Track payment revenue and attribute it to traffic sources. Humblytics connects directly to your Stripe account to pull transaction data, enabling end-to-end revenue attribution from first visit to purchase. See [Stripe Revenue Attribution](/how-to-track-purchase-events/stripe) for setup details.
* **Foxy** — Connect your Foxy e-commerce store via webhooks to track purchase events. See [Foxy Integration](/how-to-track-purchase-events/foxy) for setup details.

### Forms

Connect form platforms to track submissions and attribute them to visitor sessions:

* **JotForm** — Track JotForm submissions and attribute them to traffic sources. Connect your JotForm account to automatically capture form submission events.
* **Tally** — Track form submissions from Tally via webhook. See [Tally.so Integration](/how-to-track-custom-form-submissions/tally.so) for platform-specific setup.
* **Cal.com** *(coming soon)* — Track booking submissions from Cal.com.

### Ads

Connect your ad platforms once and let agents query campaign data, daily insights, and full-funnel revenue attribution through the [Ads Attribution API](/ads-attribution-api) and [Ads Connections API](/ads-connections-api). Both endpoints accept the same property-scoped API key — no Meta App Review or Google Ads developer token required.

* **Meta Ads** — Import campaigns, ad creative, and daily insights from Facebook and Instagram ads. Read-only.
* **Google Ads** — Import campaigns and customer-account data from Google Ads. Read-only.

### Coming Soon

The following connectors are planned for future release:

* **Google Analytics 4** — Sync event data and user journey information from GA4
* **Google Search Console** — Import search performance, keyword rankings, and impressions
* **Typeform** — Direct form submission tracking integration
* **Webflow** — Enhanced Webflow form and interaction tracking
* **Shopify** — E-commerce event and revenue tracking
* **Mailchimp** — Email campaign performance data

## Connecting a Service

1. Navigate to **Connectors** in the sidebar.
2. Find the connector you want to set up.
3. Click **Connect** next to the service.
4. Follow the authorization flow (OAuth or webhook configuration).
5. Once connected, the connector will show a green **Connected** badge.

## Managing Connections

For connected services, click **Manage** to:

* View connection status and last sync time
* Disconnect the integration
* Reconfigure settings

## Stay Updated

Enter your email in the "Join Waitlist" section at the bottom of the Connectors page to be notified when new integrations become available.


# Marketing Tools

Humblytics provides free marketing and analytics utilities to help you plan campaigns and analyze test results. Access these tools from the sidebar under **Utilities**.

**Accessing Marketing Tools**

1. Log in to your Humblytics account and select your site.
2. Click **Marketing Tools** in the sidebar under **Utilities**.

## Campaign Tracking

### UTM Generator

Create trackable campaign URLs with UTM parameters for accurate attribution.

The UTM Generator helps you build URLs with the following parameters:

* **utm\_source** — Identifies the traffic source (e.g., google, newsletter, facebook)
* **utm\_medium** — Identifies the marketing medium (e.g., cpc, email, social)
* **utm\_campaign** — Identifies the specific campaign name (e.g., spring\_sale, product\_launch)
* **utm\_content** *(optional)* — Differentiates similar content or links within the same campaign
* **utm\_term** *(optional)* — Identifies paid search keywords

Enter your base URL and UTM parameters, then click **Copy** to get your trackable URL. Use these URLs in your marketing campaigns to see detailed traffic attribution in the **Channels** tab under Sources, Campaigns, and Mediums.

For more details on UTM tracking, see [Campaign Tracking with UTM Links](/campaign-tracking-with-utm-links).

## Testing & Analytics

### A/B Test Planner

Plan your split tests with sample size calculations, duration estimates, and goal-based guidance.

The A/B Test Planner helps you determine:

* **Required sample size** — How many visitors you need for statistically significant results
* **Estimated test duration** — How long the test needs to run based on your traffic
* **Goal configuration** — Set your baseline conversion rate and minimum detectable effect

Use this tool before launching an experiment to ensure your test will have enough traffic to produce reliable results.

### Significance Calculator

Check if your A/B test results are statistically significant.

Enter your control and variant data to determine whether the observed difference in conversion rates is statistically meaningful or could be due to random chance. The calculator shows:

* **Statistical significance** level (e.g., 95%, 99%)
* **Confidence interval** for the difference
* Whether you can confidently declare a winner

### Conversion Rate Calculator

Calculate your conversion rate and compare it against industry benchmarks.

Enter your visitor count and conversion count to calculate your conversion rate. The tool helps you understand how your performance compares to typical benchmarks in your industry.


# Export Data

Humblytics lets you download your analytics data as CSV files for use in spreadsheets, data warehouses, or external reporting tools. Access Export Data from the sidebar under **Utilities**.

**Accessing Export Data**

1. Log in to your Humblytics account and select your site.
2. Click **Export Data** in the sidebar under **Utilities**.

## Available Data Categories

Select the data you want to export by checking the categories on the left side of the page:

### Analytics

Core website analytics data:

* **Traffic Summary** — Visitors, page views, sessions, bounce rate, average duration. Exports as `traffic-summary.csv`.
* **Pages Breakdown** — Per-page metrics from the external API. Exports as `pages.csv`.
* **Devices** — Operating system breakdown. Exports as `devices.csv`.
* **Browsers** — Browser breakdown. Exports as `browsers.csv`.
* **Locations** — Country breakdown. Exports as `locations.csv`.
* **Channels** — Traffic channel breakdown. Exports as `channels.csv`.

### Marketing

Traffic sources and campaign data:

* **Referrals** — Referrer sources. Exports as `referrals.csv`.
* **UTM Data** — Sources, campaigns, and mediums as separate files. Exports as `utm-sources.csv`, `utm-campaigns.csv`, and `utm-mediums.csv`.
* **LLM Referrals** — AI traffic sources (ChatGPT, Claude, etc.). Exports as `llm-referrals.csv`.

### Events

User interaction events:

* **Clicks Breakdown** — Click events per page. Exports as `clicks.csv`.
* **Forms Breakdown** — Form submissions per page. Exports as `forms.csv`.

### Testing

A/B test experiment data:

* **A/B Test Results** — Experiment variants, conversions, and significance. Exports as `ab-tests.csv`.

## Export Summary

The right panel shows an Export Summary with:

* **Date range** — The time period for the exported data (matches your selected date range)
* **Files to export** — Total number of CSV files that will be generated
* **File list** — Each file name with its row count

## Exporting Your Data

1. Select the data categories you want to export by checking the boxes.
2. Use **Select All** to check every category, or **Deselect All** to clear your selection.
3. Review the Export Summary on the right to confirm the files and row counts.
4. Click **Export Selected Data** to download your CSV files.

The export respects your current date range selection (24 hours, 7 days, Month to date, or custom dates). Adjust the date range in the top bar before exporting to get data for your desired time period.


# AI Chat

Humblytics includes an AI-powered chat assistant that helps you understand your analytics data through natural language conversation. The AI Chat is available on every page of the dashboard via a sidebar on the right side of the screen.

**Accessing AI Chat**

The AI Chat sidebar is always visible on the right side of your dashboard. It has two tabs:

* **Chat** — Start a new conversation with the AI assistant
* **History** — View and resume previous conversations

## How It Works

The AI Chat is context-aware — it automatically knows which page you're viewing and has access to your current analytics data. For example:

* On the **Traffic Analytics** page, it understands your visitor metrics, traffic trends, and revenue data
* On the **Heatmaps** page, it can discuss click patterns and scroll behavior
* On the **Experiments** page, it can analyze your A/B test results

The context label at the top of the chat panel shows which data the AI is currently working with (e.g., "Traffic Analytics", "Heatmaps", "Funnel Analysis").

## Quick Actions

At the bottom of every page, three quick action buttons provide one-click prompts:

* **Traffic insights** — Ask the AI to analyze your traffic data and highlight key trends, top sources, and anomalies
* **Test ideas** — Get AI-generated A/B test hypotheses based on your current data
* **Help me get started** — Get guidance on setting up and using the current feature

Click any quick action button to automatically send that prompt to the AI.

## What You Can Ask

The AI assistant can help you with:

* **Data interpretation** — "What are my top traffic sources this week?" or "Why did my bounce rate increase?"
* **Trend analysis** — "How has my traffic changed compared to last week?" or "Are there any anomalies in my data?"
* **Optimization suggestions** — "What should I test next?" or "How can I improve my landing page conversion rate?"
* **Feature guidance** — "How do I set up a funnel?" or "How does revenue attribution work?"
* **Experiment analysis** — "Is my A/B test statistically significant?" or "Which variant is winning?"

## AI Insights Quota

AI Chat usage counts toward your plan's AI insights quota:

* **Plus** — 25 AI insights per month
* **Business** — 200 AI insights per month
* **Scale** — 1,000 AI insights per month
* **Enterprise** — Unlimited AI insights

You can check your remaining AI insights in your account dashboard.

## Tips for Best Results

* **Be specific** — Instead of "analyze my data", try "what are my top 3 traffic sources and how do they compare to last week?"
* **Reference metrics** — Mention specific metrics you're interested in, like bounce rate, conversion rate, or revenue
* **Ask follow-up questions** — The AI remembers your conversation context, so you can drill deeper into insights
* **Use on relevant pages** — Navigate to the relevant analytics page before asking questions so the AI has the right context


# Cross-Domain Tracking & Whitelisting

{% hint style="info" %}
Cross-domain tracking allows you to track page views, form submissions, and click events across multiple domains while having all data appear in your main website's dashboard. This is especially useful for ecommerce sites with separate checkout domains or multi-domain setups.
{% endhint %}

Track user interactions across multiple domains and subdomains while maintaining a unified view in your primary Humblytics dashboard. Whether you're running an ecommerce site with a separate checkout domain or managing multiple related websites, cross-domain tracking ensures complete visibility into your user journeys.

## When do you actually need this?

Most sites don't need cross-domain tracking at all. You need it in three common situations:

1. **www and non-www versions of the same site.** If visitors can land on both `example.com` and `www.example.com`, make sure the domain in Humblytics matches the final destination after any redirect. You don't need the `domain` parameter for this; just match the exact domain in your site settings.
2. **Checkout on a separate domain.** Your store is on `example.com` but payment happens on `checkout.example.com` or a provider's domain. Use cross-domain events so conversions attribute back to your main site.
3. **A booking or form tool on a third-party domain.** For example a Calendly page or a hosted signup flow. Use cross-domain events (or a Reach External Destination goal in split tests) to count those conversions.

If none of these apply to you, install the script normally and skip this guide.

***

## How Cross-Domain Tracking Works

Cross-domain tracking enables you to:

* **Track checkout processes** on separate domains (e.g., `yourdomain.com` → `checkout.yourdomain.com`)
* **Monitor multi-step funnels** that span different domains
* **Attribute conversions** from external domains back to your main site
* **Maintain unified analytics** across your entire digital ecosystem

**Key Benefits:**

| Benefit               | Detail                                                       |
| --------------------- | ------------------------------------------------------------ |
| **Unified Dashboard** | All cross-domain events appear in your main site's analytics |
| **Complete Funnels**  | Track user journeys across domain boundaries                 |
| **Cookie-Free**       | No cross-domain cookies or complex consent management        |
| **Privacy-Compliant** | Maintains GDPR compliance across all domains                 |

***

## Cross-Domain Event Tracking

You can track three types of events across domains using the `domain` parameter:

### Page Views

Track when users visit pages on external domains:

```javascript
window.Humblytics.trackPageView("/checkout", {
  domain: "yourdomain.com",
});
```

### Form Submissions

Track form completions on external domains:

```javascript
window.Humblytics.trackFormSubmission("checkout-form", {
  domain: "yourdomain.com",
});
```

### Click Events

Track button clicks and link interactions on external domains:

```javascript
window.Humblytics.trackClickEvent("purchase-button", {
  domain: "yourdomain.com",
});
```

> **Important:** The `domain` parameter should specify the main website domain where you want the event data to appear in your dashboard.

***

## Setup Instructions

### Step 1: Install Humblytics on Both Domains

Both your main domain and the external domain need the Humblytics tracking script:

```html
<!-- Add to <head> of both domains -->
<script
  async
  src="https://app.humblytics.com/hmbl.min.js?id=YOUR_HUMBLYTICS_ID"
></script>
```

### Step 2: Whitelist External Domains (If Required)

For some integrations, you may need to whitelist external domains in your Humblytics dashboard:

1. Navigate to **Settings → Domains**
2. Add the external domain to your whitelist
3. Save the changes

### Step 3: Implement Cross-Domain Tracking

On the external domain, use the tracking methods with the `domain` parameter:

**Example: Ecommerce Checkout Flow**

```javascript
// On checkout.yourdomain.com - track checkout page view
window.Humblytics.trackPageView("/checkout-start", {
  domain: "yourdomain.com",
});

// Track form submission on checkout completion
window.Humblytics.trackFormSubmission("checkout-complete", {
  domain: "yourdomain.com",
});

// Track purchase button clicks
window.Humblytics.trackClickEvent("purchase-cta", {
  domain: "yourdomain.com",
});
```

***

## Common Use Cases

### Ecommerce with Separate Checkout

**Scenario:** Main site on `store.com`, checkout on `checkout.store.com`

```javascript
// On checkout.store.com
window.Humblytics.trackPageView("/checkout", {
  domain: "store.com",
});

window.Humblytics.trackFormSubmission("purchase-form", {
  domain: "store.com",
});
```

### Multi-Domain Company Website

**Scenario:** Main site on `company.com`, blog on `blog.company.com`, support on `help.company.com`

```javascript
// On blog.company.com
window.Humblytics.trackPageView("/blog-post", {
  domain: "company.com",
});

// On help.company.com
window.Humblytics.trackFormSubmission("support-ticket", {
  domain: "company.com",
});
```

### Third-Party Integration Tracking

**Scenario:** Main site on `business.com`, booking system on `bookings.thirdparty.com`

```javascript
// On bookings.thirdparty.com
window.Humblytics.trackFormSubmission("appointment-booking", {
  domain: "business.com",
});
```

***

## Foxycart Integration Example

This cross-domain tracking functionality powers our Foxycart integration:

```html
<!-- In Foxycart custom footer -->
<script
  async
  src="https://app.humblytics.com/hmbl.min.js?id=YOUR_HUMBLYTICS_ID"
></script>

{% if context == 'checkout' %}
<script>
  window.Humblytics.trackPageView("/foxycart-checkout", {
    domain: "your-main-domain.com",
  });
</script>
{% endif %} {% if context == 'receipt' and first_receipt_display %}
<script>
  window.Humblytics.trackPageView("/foxycart-receipt", {
    domain: "your-main-domain.com",
  });
</script>
{% endif %}
```

***

## Best Practices

### Consistent Naming

Use clear, consistent naming for cross-domain events:

* **Page paths:** Use descriptive paths like `/checkout-start`, `/payment-complete`
* **Event labels:** Use descriptive names like `checkout-form`, `newsletter-signup`
* **Domain references:** Always use your primary domain in the `domain` parameter

### Event Organization

Structure your cross-domain events logically:

```javascript
// Good: Descriptive and organized
window.Humblytics.trackPageView("/ecommerce/checkout", { domain: "main.com" });
window.Humblytics.trackFormSubmission("ecommerce-purchase", {
  domain: "main.com",
});

// Avoid: Generic or unclear naming
window.Humblytics.trackPageView("/page1", { domain: "main.com" });
window.Humblytics.trackFormSubmission("form", { domain: "main.com" });
```

### Testing Your Implementation

1. **Install tracking** on both domains
2. **Trigger test events** on the external domain
3. **Verify in dashboard** that events appear under your main domain
4. **Check attribution** by following the complete user journey

***

## Viewing Cross-Domain Data

All cross-domain events appear in your main dashboard exactly like native events:

* **Page Views:** Dashboard → Pages
* **Form Submissions:** Dashboard → Conversions → Forms
* **Click Events:** Dashboard → Clicks
* **Funnels:** Include cross-domain steps in funnel analysis
* **Split Tests:** Use cross-domain events as conversion goals

***

## Using Cross-Domain Events in Split Tests

Beyond just tracking cross-domain interactions, you can use these events as **conversion goals in split tests**. This enables sophisticated A/B testing scenarios where the conversion happens on external domains.

### When to Use Cross-Domain Event Goals

**Instead of simple destination page tracking**, use cross-domain events when:

* **Complex conversion flows:** The conversion involves multiple steps or specific interactions on external sites
* **Precise tracking:** You need to track the actual conversion action, not just page arrival
* **External checkout processes:** Track completed purchases on separate checkout domains
* **Third-party integrations:** Monitor conversions through external booking systems, forms, or apps

### Setup Process

**Step 1: Implement Cross-Domain Event Tracking**

Set up the appropriate tracking on your external domain:

```javascript
// Example: Track checkout completion on external domain
window.Humblytics.trackFormSubmission("checkout-complete", {
  domain: "yourmainsite.com",
});

// Example: Track specific page interactions
window.Humblytics.trackClickEvent("external-signup-button", {
  domain: "yourmainsite.com",
});

// Example: Track custom page view events
window.Humblytics.trackPageView("/external-conversion-step", {
  domain: "yourmainsite.com",
});
```

**Step 2: Create Split Test with Event Goal**

1. Navigate to **Split Testing** → **Start New Experiment**
2. Choose the appropriate **event goal type**:
   * **Form Submission Event** for `trackFormSubmission()` calls
   * **Click Event** for `trackClickEvent()` calls
   * **Page View Event** for `trackPageView()` calls
3. **Enter the exact event name** from your tracking code (e.g., "checkout-complete", "external-signup-button")

**Step 3: Configure Variants and Launch**

Set up your page variants as normal and launch the test. The cross-domain events will be attributed to the correct split test variant based on the user's session.

### Real-World Examples

**Ecommerce Checkout Optimization**

```javascript
// Split test: Optimize product pages for checkout completion
// Goal: Track actual purchases, not just checkout page visits

// On external checkout domain
window.Humblytics.trackFormSubmission("purchase-complete", {
  domain: "store.com",
});

// Split test goal: Form Submission Event = "purchase-complete"
```

**Lead Generation with External Forms**

```javascript
// Split test: Optimize landing pages for form completions
// Goal: Track successful form submissions on third-party platform

// On external form platform
window.Humblytics.trackFormSubmission("lead-qualified", {
  domain: "business.com",
});

// Split test goal: Form Submission Event = "lead-qualified"
```

**SaaS Trial Activation**

```javascript
// Split test: Optimize signup flow for trial activation
// Goal: Track when users complete onboarding on external app

// On external app domain
window.Humblytics.trackPageView("/onboarding-complete", {
  domain: "marketing-site.com",
});

// Split test goal: Page View Event = "/onboarding-complete"
```

### Advanced Attribution

Cross-domain event goals maintain proper attribution throughout complex user journeys:

1. **User visits** your split test page variant
2. **User navigates** to external domain (checkout, booking, etc.)
3. **Cross-domain event** fires on external domain
4. **Attribution preserved** back to original split test variant
5. **Conversion counted** for the correct test group

This enables testing of complete conversion funnels that span multiple domains while maintaining accurate statistical analysis.

### Best Practices for Split Test Goals

**Event Naming:**

* Use descriptive, unique event names
* Maintain consistency across domains
* Document your event naming convention

**Timing:**

* Ensure events fire after the Humblytics script loads
* Place tracking calls at the actual conversion moment
* Test event firing across different user scenarios

**Validation:**

* Test the complete flow from split test variant to cross-domain conversion
* Verify events appear in your dashboard with correct attribution
* Monitor for any attribution delays or issues

***

## Hash Fragment Support

Multi-step forms using URL fragments (`#step-1`, `#step-2`) now track properly across domains. This ensures accurate funnel tracking for:

* **Multi-step checkout flows** with hash-based navigation
* **Progressive forms** that use URL fragments for step tracking
* **Single-page applications** with hash routing

Enable hash fragment tracking in your site settings to capture these interactions accurately.

## Troubleshooting

### Events Not Appearing

**Check the following:**

1. Humblytics script is installed on the external domain
2. The `domain` parameter matches your main domain exactly
3. External domain is whitelisted (if required)
4. Events are being triggered after the Humblytics script loads
5. Hash fragment tracking is enabled in site settings (for multi-step forms)

### Incorrect Attribution

**Verify:**

1. The `domain` parameter value is correct
2. Timing of event tracking (wait for script to load)
3. Network connectivity from external domain to Humblytics

### Seeing Your Own Domain as a Referrer (www vs non-www)

If your site has both a root domain and a www domain (for example `example.com` redirecting to `www.example.com`), older versions of Humblytics could log that redirect as an external referral, making your own domain appear as a top traffic source.

**A platform-wide fix shipped on June 19, 2026.** Sessions recorded after that date no longer log the redirect as a referral.

Two things to know:

1. **Historical data is not retroactively cleaned.** Sessions recorded before the fix will still show the self-referral in longer date ranges. That's expected; the numbers going forward are clean.
2. **Match the final domain.** In your Humblytics site settings, use the domain visitors actually end up on after the redirect (usually the www version).

If you still see new self-referral sessions after June 19, 2026, email **<support@humblytics.com>** with your domain setup.

***

## Advanced Implementation

### Dynamic Domain Detection

For complex setups, you can dynamically set the domain parameter:

```javascript
// Automatically detect main domain
const mainDomain = window.location.hostname.includes("checkout")
  ? "yourdomain.com"
  : window.location.hostname;

window.Humblytics.trackPageView("/current-page", {
  domain: mainDomain,
});
```

### Conditional Cross-Domain Tracking

Only track cross-domain when necessary:

```javascript
function trackEvent(eventType, eventName, options = {}) {
  const isExternalDomain = window.location.hostname !== "yourdomain.com";

  if (isExternalDomain) {
    options.domain = "yourdomain.com";
  }

  if (eventType === "pageView") {
    window.Humblytics.trackPageView(eventName, options);
  } else if (eventType === "formSubmission") {
    window.Humblytics.trackFormSubmission(eventName, options);
  }
}
```

***

**Questions or need help with complex cross-domain setups?** Email **<support@humblytics.com>** for guidance on advanced implementations and custom attribution models.


# Campaign Tracking with UTM Links

{% hint style="info" %}
Humblytics' campaign tracking feature allows you to monitor the performance of your marketing campaigns. By using UTM parameters, you can track the effectiveness of different campaigns and channels, helping you optimize your marketing strategies.
{% endhint %}

UTM (Urchin Tracking Module) tracking is a powerful tool for monitoring the performance of your digital marketing campaigns. By adding UTM parameters to your URLs, you can gain valuable insights into where your traffic is coming from and how users interact with your content. This guide explains what UTM parameters are, their benefits, and how to use the Humblytics UTM Link Generator Tool to create UTM-tagged URLs for your campaigns.

#### What are UTM Parameters?

UTM parameters are tags you append to the end of your URLs. They consist of key-value pairs that provide detailed information about your traffic sources. The most commonly used UTM parameters include:

* **utm\_source**: Identifies the source of your traffic (e.g., Google, Facebook).
* **utm\_medium**: Describes the medium through which the traffic arrived (e.g., email, CPC).
* **utm\_campaign**: Names the campaign you're tracking (e.g., spring\_sale, black\_friday).
* **utm\_term**: Identifies paid search keywords (useful for PPC campaigns).
* **utm\_content**: Differentiates similar content or links within the same ad (e.g., banner\_ad, text\_link).

#### Benefits of Using UTM Tracking

* **Enhanced Tracking**: Understand which channels and campaigns drive the most traffic.
* **Better Insights**: Analyze the performance of different marketing efforts in detail.
* **Informed Decisions**: Make data-driven decisions to optimize your marketing strategy.
* **ROI Measurement**: Measure the return on investment for each campaign accurately.

#### How to Use the Humblytics UTM Link Generator Tool

The Humblytics UTM Link Generator Tool simplifies the creation of UTM-tagged URLs. Follow these steps to use the tool:

1. **Access the Tool** Navigate to the Humblytics UTM Link Generator.
2. **Fill in the Required Fields**
   * **Website URL**\*: Enter the URL of the page you want to track.
   * **Campaign Name (utm\_campaign)**\*: Provide a unique name for your campaign.
   * **Campaign Medium (utm\_medium)**\*: Specify the medium (e.g., email, social).
   * **Campaign Source (utm\_source)**\*: Indicate the source (e.g., Facebook, newsletter).
3. **Optional Fields**
   * **Campaign Term (utm\_term)**: If running PPC ads, enter the keyword.
   * **Campaign Content (utm\_content)**: Differentiate between ads or links.
4. **Generate the URL** Click the "Generate" button to create a final URL with UTM parameters appended to it.
5. **Copy the Generated URL** Use the "Copy URL" button to copy the UTM-tagged link.
6. **Implement in Your Campaigns** Use the generated URL in your marketing campaigns. Paste it into your ads, email newsletters, social media posts, etc.
7. **Track and Analyze** Use analytics platforms (like Google Analytics) to monitor the performance of your UTM-tagged URLs. Look for insights on which sources and mediums are driving traffic and conversions.

#### Example of a UTM-Tagged URL

Suppose you are running a spring sale campaign and want to track traffic from Facebook ads. Here’s how you would fill out the fields in the tool:

* **Website URL**: <https://www.yoursite.com/spring-sale>
* **Campaign Name**: spring\_sale
* **Campaign Medium**: cpc
* **Campaign Source**: facebook

The generated URL might look like this:\
<https://www.yoursite.com/spring-sale?utm_source=facebook&utm_medium=cpc&utm_campaign=spring_sale>

#### Best Practices for UTM Tracking

* **Consistent Naming Conventions**: Use consistent and clear naming conventions for easy analysis.
* **Avoid Overcomplicating**: Only use necessary parameters to keep URLs manageable.
* **Document Your Parameters**: Maintain a record of your UTM parameters to ensure consistency.
* **Regularly Review Analytics**: Frequently check your analytics to adjust and optimize campaigns.

By following this guide and utilizing the Humblytics UTM Link Generator Tool, you can efficiently track your marketing campaigns and make data-driven decisions to enhance your marketing strategy.


# Agent Onboarding API

The Agent Onboarding API lets AI agents sign up users, handle plan selection and payment, and receive an API token — all without the user opening a dashboard. This is designed for Claude Code, Cursor, and any agent that wants to onboard users programmatically.

> **Base URL**: `https://app.humblytics.com`

***

## Overview

The signup flow has two parts:

1. **The agent** calls `/api/v1/auth/agent-initiate` to create a session and get a unique verification URL.
2. **The user** opens that URL in their browser to verify identity and complete payment.
3. **The agent** polls until the session is complete, then receives an `authToken` for all subsequent API calls.

***

## Step 1 · Initiate Signup

Create a signup session for a new user.

**Request**

```bash
curl -X POST https://app.humblytics.com/api/v1/auth/agent-initiate \
  -H "Content-Type: application/json" \
  -d '{ "email": "user@example.com", "name": "Jane Smith" }'
```

**Parameters**

| Name    | Type   | Required | Description          |
| ------- | ------ | -------- | -------------------- |
| `email` | string | Yes      | User's email address |
| `name`  | string | Yes      | User's full name     |

**Response (201)**

```json
{
  "token": "<session-token>",
  "verifyUrl": "https://app.humblytics.com/agent-verify?token=<session-token>",
  "expiresAt": 1234567890000
}
```

**Error Responses**

| Status | Body                           | Meaning                      |
| ------ | ------------------------------ | ---------------------------- |
| 409    | `{ "error": "user_exists" }`   | Email already has an account |
| 400    | `{ "error": "invalid_email" }` | Email format is invalid      |

{% hint style="info" %}
The session expires in **10 minutes** if the user doesn't open the verification link.
{% endhint %}

***

## Step 2 · User Verification

Tell the user to open the verification URL in their browser. The page will:

1. Silently verify the user is human
2. Create their Humblytics account and set a browser session
3. Ask them to choose **Business Monthly ($79/mo)** or **Business Annual ($65/mo, save $168/yr)**
4. Redirect to Stripe to complete payment
5. Show a confirmation page

{% hint style="warning" %}
The agent should present the URL clearly and wait for the user to complete the browser flow before proceeding.
{% endhint %}

***

## Step 3 · Poll for Completion

Poll every 3–5 seconds until `status` is `"complete"` or the session expires.

**Request**

```bash
curl https://app.humblytics.com/api/v1/auth/agent-signup-status?token=<session-token>
```

**While waiting**

```json
{ "status": "pending" }
```

**When complete**

```json
{
  "status": "complete",
  "authToken": "<jwt>"
}
```

**Error Responses**

| Status | Meaning                                      |
| ------ | -------------------------------------------- |
| 404    | Token not found                              |
| 410    | Session expired — ask the user to start over |

{% hint style="warning" %}
The `authToken` is delivered **once** — the session is deleted after this response. Store the token immediately.
{% endhint %}

***

## Step 4 · Use the Token

All subsequent API calls use the token as a Bearer header:

```http
Authorization: Bearer <authToken>
```

This token works with all Humblytics API endpoints including the [External Analytics API](/external-analytics-api) and [Split Testing API](/split-testing-api).

***

## Step 5 · Add a Website

With the token, the agent can immediately add a website to the account.

**Request**

```bash
curl -X POST https://app.humblytics.com/api/v1/add-custom-site \
  -H "Authorization: Bearer <authToken>" \
  -H "Content-Type: application/json" \
  -d '{ "domain": "example.com", "name": "My Site" }'
```

**Response**

```json
{
  "propertyId": "<property-id>",
  "scriptId": "<script-id>"
}
```

Install the tracking script on the user's site:

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

***

## Step 6 · Stripe Payment Links (Fallback)

If the user skipped payment during signup, send them directly to Stripe:

| Plan    | URL                                                                      |
| ------- | ------------------------------------------------------------------------ |
| Monthly | `https://buy.stripe.com/6oU9AS4TVdaQafZ9tS2Nq0k?prefilled_email=<email>` |
| Annual  | `https://buy.stripe.com/8x2cN40DF4EkafZ49y2Nq0j?prefilled_email=<email>` |

***

## Quick Reference

| Step                | Method | Endpoint                                         |
| ------------------- | ------ | ------------------------------------------------ |
| Initiate signup     | POST   | `/api/v1/auth/agent-initiate`                    |
| Poll for completion | GET    | `/api/v1/auth/agent-signup-status?token=<token>` |
| Add a website       | POST   | `/api/v1/add-custom-site`                        |
| List websites       | GET    | `/api/v1/property/all`                           |
| Billing status      | GET    | `/api/v1/billing/status`                         |

***

## Agent Spec File

The full onboarding spec is available as a standalone markdown file that agents can load as context:

[**https://app.humblytics.com/agent.md**](https://app.humblytics.com/agent.md)

You can also open it directly in your editor:

* **Cursor**: [Add to Cursor](cursor://anysphere.cursor-deeplink/prompt?text=Fetch%20the%20Humblytics%20agent%20API%20spec%20from%20https%3A%2F%2Fapp.humblytics.com%2Fagent.md%20and%20save%20it%20as%20a%20cursor%20rule%20in%20.cursor%2Frules%2Fhumblytics.mdc) — opens Cursor and creates a rule from the spec
* **Claude Code**: Run `curl -o HUMBLYTICS.md https://app.humblytics.com/agent.md` then include in your CLAUDE.md

Add it to your `CLAUDE.md`, `.cursorrules`, or system prompt and your agent will know how to onboard users automatically.

***

## Related

* [API Access & Agent Setup](/api-access-and-agents) — guided activation flow for API keys and marketing skills in the dashboard
* [External Analytics API](/external-analytics-api) — Query traffic, pages, clicks, forms, and funnels
* [Split Testing API](/split-testing-api) — Create and manage A/B tests programmatically


# API Access & Agent Setup

The **MCP & API Access** page connects your AI coding agents to live Humblytics data. Open it from the sidebar under **Data → API**.

> **MCP server URL**: `https://mcp.humblytics.com/v1` **REST base URL**: `https://app.humblytics.com/api/external/v1/`

***

## Humblytics MCP

The Humblytics MCP server is a [Model Context Protocol](https://modelcontextprotocol.io) server that gives any compatible AI agent live, read-write access to your analytics. It is live and available to all Plus accounts and above.

| What it covers        |                                    |
| --------------------- | ---------------------------------- |
| **Traffic & trends**  | Pageviews, sessions, bounce rate   |
| **Funnels**           | Step-by-step conversion analysis   |
| **A/B tests**         | Create, read, and stop experiments |
| **Heatmaps & clicks** | Friction and engagement data       |

Once connected, your agent can query live data, identify test opportunities, and launch experiments — without you having to copy-paste numbers. Works with Claude Code, Cursor, Codex CLI, and any agent that supports remote MCP servers (\~36 tools, no property lock-in).

***

## Connecting via OAuth (Recommended)

The easiest way to connect is to copy the setup prompt from the **API** page in your dashboard and paste it into your agent. Click **Setup Humblytics MCP** and select your agent type (Claude Code, Codex CLI, or Generic), then copy and paste.

The prompt instructs your agent to:

1. Call a Humblytics endpoint to start an authorization session — no credentials needed
2. Show you a URL to open in your browser
3. Wait while you sign in (if needed) and click **Approve access**
4. Receive an API key automatically once you approve
5. Register the MCP server with that key — using the right config format for your agent

You don't handle the key yourself at any point. Once connected, the agent uses it on every subsequent request automatically.

The authorization link expires after 5 minutes. If it times out, just paste the prompt again.

{% hint style="info" %}
You can revoke the generated key at any time from the **API** page in your Humblytics dashboard.
{% endhint %}

***

## Setting up MCP manually (Alternative)

If you'd rather supply a key yourself — for example in a CI environment or shared machine — you can create one explicitly and configure the MCP server with it directly.

### 1. Create an API key

Go to the **API** page in your dashboard and click **Create account key**. Give it a name (e.g. `Claude Agent`, `CI/CD`), and copy the key immediately — it is shown only once.

### 2. Register the MCP server with your agent

Select your agent type below and follow the one-time setup.

#### Claude Code

```
claude mcp add humblytics --transport http https://mcp.humblytics.com/v1 \
  --header "Authorization: Bearer YOUR_API_KEY"
```

For a property-scoped connection, add:

```
  --header "X-Humblytics-Property-Id: YOUR_PROPERTY_ID"
```

#### Codex CLI

The Codex prompt configures a `[mcp_servers.humblytics]` block in your Codex config with the MCP URL and the same authorization headers.

#### Generic

For any other agent that supports remote MCP servers:

```
URL: https://mcp.humblytics.com/v1
Authorization: Bearer YOUR_API_KEY
X-Humblytics-Property-Id: YOUR_PROPERTY_ID
```

{% hint style="warning" %}
The key is only shown once, during creation. Copy it before closing. If you lose it, revoke the key and create a new one.
{% endhint %}

***

## API keys

API access requires the **Plus** plan or higher. The page has two key types:

### Account keys

Account keys work across all your properties and are the recommended choice for MCP and agents. Create one with **Create account key**, give it a name (e.g., `Production`, `Claude Agent`, `CI/CD`), and copy it immediately — the full key is displayed once at creation and cannot be retrieved later.

### Property keys

Property keys are scoped to a single property. Switch to the correct property using the site selector before creating one. These are useful when you want to isolate a key to a specific site.

### Revoking keys

Click the revoke icon next to any active key. Agents using that key lose access immediately. Revocation cannot be undone, but you can always create a new key. Previously revoked keys appear in the collapsed **Revoked keys** section.

***

## Marketing skills & REST API

The **Skills, REST API & reference** section (collapsed by default) gives you two additional ways to work with Humblytics from an agent.

### Marketing skills

Install 12 Humblytics marketing skills from the open-source [humblytics-marketing-skills](https://github.com/Humblytics/humblytics-marketing-skills) repository. Click **Add 12 skills to your agent** to copy the natural-language setup prompt, then paste it into your coding agent.

| Skill                  | Description                                          | API |
| ---------------------- | ---------------------------------------------------- | --- |
| `cro-optimizer`        | Live funnel analysis + scored A/B test hypotheses    | Yes |
| `ab-test-generator`    | Generate & launch no-code split tests from analytics | Yes |
| `heatmap-analyst`      | Click, scroll & rage-click friction analysis         | Yes |
| `revenue-attributor`   | Ad spend to Stripe revenue, ROAS + reallocation      | Yes |
| `funnel-reporter`      | End-to-end SaaS funnel reporting                     | Yes |
| `page-cro`             | 10-point landing page conversion audit               | —   |
| `email-sequences`      | Onboarding, nurture & re-engagement drips            | —   |
| `seo-strategist`       | Keyword research, gaps, on-page + technical SEO      | —   |
| `marketing-strategist` | Funnels, GTM, positioning, growth strategy           | —   |
| `copywriting`          | Conversion copy for pages, emails & ads              | —   |
| `ad-expert`            | Paid ads: Meta, Google, TikTok, LinkedIn             | —   |
| `content-strategist`   | Articles, newsletters, social, video, SEO            | —   |

Skills chain together with natural-language prompts:

| Prompt                                        | Chain                                                      |
| --------------------------------------------- | ---------------------------------------------------------- |
| "Find my worst-performing page and fix it"    | CRO Optimizer → Page CRO → A/B Test Gen                    |
| "Weekly performance report + recommendations" | Funnel Reporter → CRO Optimizer                            |
| "Cut my worst ad & replace the landing page"  | Funnel Reporter → CRO Optimizer → A/B Test Gen → Ad Expert |

Browse the full directory at [humblytics.com/skills](https://humblytics.com/skills).

### REST API reference

The **REST API Reference** card shows an example `curl` request against `/traffic/summary` with an **Env var / Literal** toggle. Always use Env var mode for committed commands — Literal is for one-off testing only.

Click **Run test call** to fire a live request against your selected property and confirm the connection returns a 200 OK.

The endpoint reference is grouped by the CRO loop:

| Group       | Tagline                               |
| ----------- | ------------------------------------- |
| **Read**    | Analytics, recommendations & heatmaps |
| **Decide**  | Funnels & split-test results          |
| **Ship**    | Split-tests & variants                |
| **Onboard** | Properties & connectors               |

***

## Security

**OAuth flow**: the key is generated server-side and stored by your agent in its own MCP config. It never appears in conversation or version control — your agent handles it automatically after the one-time authorization.

**Manual key setup**: if you configure the key via `claude mcp add` or a config file, it is embedded in your agent's MCP server registration and handled automatically after that. If you call the API directly from scripts or CI, store your key in a `.env` file listed in `.gitignore`. Never commit the literal value.

Either way: never paste a key into chat, `CLAUDE.md`, `AGENTS.md`, or any committed file. Revoke keys you no longer need.

***

## Related

* [External Analytics API](/external-analytics-api) — full analytics endpoint reference
* [Split Testing API](/split-testing-api) — programmatic A/B testing
* [Agent Onboarding API](/agent-onboarding-api) — sign up users and add websites from an agent
* [Ads Attribution API](/ads-attribution-api) — per-campaign funnel attribution
* [humblytics-marketing-skills on GitHub](https://github.com/Humblytics/humblytics-marketing-skills) — open-source agent skills repo


# External Analytics API

Our External Analytics API lets you pull Humblytics data programmatically — traffic, pages, clicks, forms, and funnels — using the same property-scoped API keys that power the in-app dashboards. This guide covers authentication, required parameters, endpoints, and typical responses.

> **Base URL**: `https://app.humblytics.com/api/external/v1`

## In-App API Access Page

The Humblytics dashboard includes a dedicated **API Access** page (sidebar → **Utilities** → **API**) that serves as your activation console for the API and AI coding agents.

The page walks you through a four-step guided flow:

1. **Generate key** — create a property-scoped API key (shown once at creation)
2. **Pick your agent** — copy a secure install prompt for Claude Code, Cursor, or a generic agent
3. **Install the skills** — copy a setup prompt to install all 12 [humblytics-marketing-skills](https://github.com/Humblytics/humblytics-marketing-skills) from GitHub
4. **Verify it works** — run a live `GET /traffic/summary` test and confirm your connection

A sticky **Your setup** pane on the right keeps your Property ID, Base URL, and one-click copy actions (install prompt, skills setup, first test command) always visible. Below the steps you will find a reference curl example and a collapsible endpoint list grouped by the CRO loop (Read → Decide → Ship → Onboard).

See [API Access & Agent Setup](/api-access-and-agents) for the full walkthrough, skills catalog, security practices, and workflow examples.

***

## Authentication

* Generate an API key for your property in the Humblytics app (sidebar → **Utilities** → **API**).
* Include the key in every request using the `Authorization` header:

```http
Authorization: Bearer <your_api_key>
```

* Keys are property-scoped. The `propertyId` in the request path must match the property linked to the API key, otherwise the API returns `403`.
* Ensure the key has the `metrics` permission enabled.

## API Access by Plan

API key management is available on the **Plus** plan and above. Generate API keys from the API Access page under **Utilities** in the sidebar.

* **Plus, Business, Scale**: API access included
* **Enterprise**: Full API access with custom endpoints and priority support

## Versioning

All external endpoints live under `/api/external/v1`. Future versions will be published side-by-side (for example, `/api/external/v2`) so you can migrate when ready.

## Common Parameters

| Name       | Type   | Required              | Notes                                                                                                           |
| ---------- | ------ | --------------------- | --------------------------------------------------------------------------------------------------------------- |
| `start`    | string | Yes                   | ISO-8601 timestamp or date (e.g. `2024-05-01` or `2024-05-01T00:00:00Z`).                                       |
| `end`      | string | Yes                   | ISO-8601 timestamp or date that occurs after `start`.                                                           |
| `timezone` | string | No                    | IANA zone name (defaults to `UTC`). Determines bucket boundaries and how timestamps are formatted in responses. |
| `limit`    | number | No                    | Maximum results to return (default: 50).                                                                        |
| `page`     | string | For details endpoints | URL path to filter (e.g. `/pricing`). Required for detail endpoints.                                            |
| `source`   | string | No                    | Filter forms by source.                                                                                         |

Requests that cannot be parsed—invalid dates, unsupported timezones, `end` before `start`, ranges that are too large—return `400` with a descriptive error payload.

***

## Traffic Trends

```
GET /properties/{propertyId}/traffic/trends
```

Returns time-series metrics for page views and unique visitors within a specified range.

### Query Parameters

| Name          | Type | Required | Default | Notes                                            |
| ------------- | ---- | -------- | ------- | ------------------------------------------------ |
| `granularity` | enum | No       | `day`   | Accepted values: `hour`, `day`, `week`, `month`. |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/traffic/trends?start=2024-05-01&end=2024-05-07&granularity=day&timezone=America/New_York"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "start": "2024-05-01T04:00:00.000Z",
    "end": "2024-05-07T03:59:59.000Z",
    "granularity": "day",
    "timezone": "America/New_York",
    "bucket_count": 7
  },
  "data": [
    {
      "bucket_start": "2024-05-01T00:00:00-04:00",
      "bucket_end": "2024-05-01T23:59:59-04:00",
      "page_views": 1523,
      "unique_visitors": 682
    }
  ],
  "summary": {
    "page_views": 9056,
    "unique_visitors": 3142
  }
}
```

### Notes

* Buckets include zero-filled entries when no activity occurred so charting remains continuous.
* Maximum of 500 buckets per request. Very granular windows (for example, hourly over multiple months) return `400`.
* The API excludes known bots automatically to align with the dashboard totals.

***

## Traffic Summary

```
GET /properties/{propertyId}/traffic/summary
```

Returns aggregate traffic metrics for a specified range, including total page views, sessions, bounce rate, and average session duration.

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/traffic/summary?start=2024-05-01&end=2024-05-07&timezone=America/New_York"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "start": "2024-05-01T04:00:00.000Z",
    "end": "2024-05-07T03:59:59.000Z",
    "timezone": "America/New_York"
  },
  "data": {
    "page_views": 9056,
    "sessions": 3142,
    "unique_visitors": 2418,
    "bounce_rate": 0.423,
    "avg_session_duration": 184.5
  }
}
```

### Notes

* `bounce_rate` is expressed as a decimal (e.g. `0.423` = 42.3%).
* `avg_session_duration` is in seconds.
* Bot traffic is excluded automatically.

***

## Traffic Realtime

```
GET /properties/{propertyId}/traffic/realtime
```

Returns the current live visitor count and a feed of recent visitor activity. This endpoint does **not** require `start`, `end`, or `timezone` parameters.

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/traffic/realtime"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID"
  },
  "data": {
    "active_visitors": 23,
    "feed": [
      {
        "page": "/pricing",
        "referrer": "google",
        "device": "desktop",
        "country": "US",
        "timestamp": "2024-05-07T14:32:18.000Z"
      }
    ]
  }
}
```

### Notes

* This endpoint returns a snapshot of current activity — no date range parameters are needed.
* The `feed` array shows the most recent visitor events in reverse chronological order.
* `active_visitors` reflects sessions active within the last few minutes.

***

## Traffic Breakdown

```
GET /properties/{propertyId}/traffic/breakdown
```

Returns the top traffic segments (UTM attributes, countries, devices, landing pages, and referrers) for a specified range.

### Query Parameters

| Name    | Type   | Required | Default | Notes                                                      |
| ------- | ------ | -------- | ------- | ---------------------------------------------------------- |
| `limit` | number | No       | 10      | Maximum entries per segment (maximum supported value: 50). |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/traffic/breakdown?start=2024-05-01T00:00:00Z&end=2024-05-31T23:59:59Z&timezone=UTC&limit=20"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "start": "2024-05-01T00:00:00.000Z",
    "end": "2024-05-31T23:59:59.000Z",
    "timezone": "UTC",
    "limit": 20,
    "totals": {
      "sessions": 1982,
      "page_views": 5478
    }
  },
  "data": {
    "utm": [
      {
        "source": "google",
        "medium": "cpc",
        "campaign": "spring_launch",
        "sessions": 412,
        "page_views": 921,
        "share": 0.208
      }
    ],
    "countries": [
      {
        "country": "US",
        "sessions": 982,
        "page_views": 2015,
        "share": 0.495
      }
    ],
    "devices": [
      {
        "device": "desktop",
        "sessions": 1045,
        "page_views": 2684,
        "share": 0.527
      }
    ],
    "landing_pages": [
      {
        "path": "/pricing",
        "sessions": 213,
        "page_views": 425,
        "share": 0.107
      }
    ],
    "referrers": [
      {
        "referrer": "google",
        "sessions": 643,
        "page_views": 1580,
        "share": 0.324
      }
    ]
  }
}
```

### Notes

* `share` represents the fraction of total sessions contributed by each row.
* Null or missing values are returned as `"unknown"` so you do not need to special-case missing fields.
* Device values are normalized (`desktop`, `mobile`, `unknown`) using Humblytics’ device classification.

***

## Traffic Entry & Exit Pages

```
GET /properties/{propertyId}/traffic/entry-exit-pages
```

Returns the top entry pages (where sessions begin) and exit pages (where sessions end) for a specified range.

### Query Parameters

| Name    | Type   | Required | Default | Notes                                                   |
| ------- | ------ | -------- | ------- | ------------------------------------------------------- |
| `limit` | number | No       | 10      | Maximum entries per list (maximum supported value: 50). |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/traffic/entry-exit-pages?start=2024-05-01&end=2024-05-31&timezone=UTC&limit=10"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "start": "2024-05-01T00:00:00.000Z",
    "end": "2024-05-31T23:59:59.000Z",
    "timezone": "UTC",
    "limit": 10
  },
  "data": {
    "entry_pages": [
      {
        "path": "/",
        "sessions": 982,
        "share": 0.495
      },
      {
        "path": "/pricing",
        "sessions": 312,
        "share": 0.157
      }
    ],
    "exit_pages": [
      {
        "path": "/pricing",
        "sessions": 534,
        "share": 0.269
      },
      {
        "path": "/blog",
        "sessions": 289,
        "share": 0.146
      }
    ]
  }
}
```

### Notes

* `share` represents the fraction of total sessions for each entry or exit page.
* Entry pages indicate where visitors first land; exit pages indicate the last page viewed before leaving.

***

## Pages Breakdown

```
GET /properties/{propertyId}/pages/breakdown
```

Returns performance metrics for all pages, including views, unique visitors, average scroll depth, and bounce rate.

### Query Parameters

| Name    | Type   | Required | Default | Notes                                                    |
| ------- | ------ | -------- | ------- | -------------------------------------------------------- |
| `limit` | number | No       | 10      | Maximum entries to return (maximum supported value: 50). |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/pages/breakdown?start=2024-05-01&end=2024-05-31&timezone=UTC&limit=20"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "start": "2024-05-01T00:00:00.000Z",
    "end": "2024-05-31T23:59:59.000Z",
    "timezone": "UTC",
    "limit": 20
  },
  "data": [
    {
      "path": "/",
      "page_views": 3245,
      "unique_visitors": 2108,
      "avg_scroll_depth": 0.62,
      "bounce_rate": 0.38
    },
    {
      "path": "/pricing",
      "page_views": 1823,
      "unique_visitors": 1456,
      "avg_scroll_depth": 0.74,
      "bounce_rate": 0.29
    }
  ]
}
```

### Notes

* `avg_scroll_depth` is a decimal representing the average percentage of the page scrolled (e.g. `0.62` = 62%).
* `bounce_rate` is page-level, not site-level.
* Results are sorted by `page_views` in descending order by default.

***

## Pages Details

```
GET /properties/{propertyId}/pages/details
```

Returns a deep dive for a single page, including UTM attribution, device breakdown, and country breakdown.

### Query Parameters

| Name    | Type   | Required | Default | Notes                                           |
| ------- | ------ | -------- | ------- | ----------------------------------------------- |
| `page`  | string | Yes      | N/A     | The page path to get details for (URL-encoded). |
| `limit` | number | No       | 10      | Maximum entries per breakdown (maximum: 50).    |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/pages/details?page=%2Fpricing&start=2024-05-01&end=2024-05-31&timezone=UTC"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "page": "/pricing",
    "start": "2024-05-01T00:00:00.000Z",
    "end": "2024-05-31T23:59:59.000Z",
    "timezone": "UTC"
  },
  "data": {
    "page_views": 1823,
    "unique_visitors": 1456,
    "avg_scroll_depth": 0.74,
    "bounce_rate": 0.29,
    "utm": [
      {
        "source": "google",
        "medium": "cpc",
        "campaign": "spring_launch",
        "page_views": 412,
        "share": 0.226
      }
    ],
    "devices": [
      {
        "device": "desktop",
        "page_views": 1102,
        "share": 0.604
      }
    ],
    "countries": [
      {
        "country": "US",
        "page_views": 845,
        "share": 0.463
      }
    ]
  }
}
```

### Notes

* Use URL encoding for the `page` parameter (e.g. `/pricing page` becomes `%2Fpricing%20page`).
* Breakdowns (UTM, devices, countries) are specific to the requested page.
* Combines aggregate page metrics with dimensional breakdowns in a single response.

***

## Clicks Breakdown

```
GET /properties/{propertyId}/clicks/breakdown
```

Returns aggregated click event data grouped by page and click target, along with trend data over time.

### Query Parameters

| Name          | Type   | Required | Default | Notes                                                      |
| ------------- | ------ | -------- | ------- | ---------------------------------------------------------- |
| `granularity` | enum   | No       | `day`   | Accepted values: `hour`, `day`, `week`, `month`.           |
| `limit`       | number | No       | 10      | Maximum entries per segment (maximum supported value: 50). |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/clicks/breakdown?start=2024-05-01&end=2024-05-07&granularity=day&timezone=UTC&limit=20"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "start": "2024-05-01T00:00:00.000Z",
    "end": "2024-05-07T23:59:59.000Z",
    "timezone": "UTC",
    "granularity": "day",
    "limit": 20,
    "bucket_count": 7
  },
  "data": [
    {
      "page": "/pricing",
      "target": "Get Started Button",
      "clicks": 342,
      "unique_clicks": 289
    },
    {
      "page": "/home",
      "target": "Sign Up Link",
      "clicks": 128,
      "unique_clicks": 115
    }
  ],
  "trend": [
    {
      "bucket_start": "2024-05-01T00:00:00.000Z",
      "bucket_end": "2024-05-01T23:59:59.000Z",
      "clicks": 412,
      "unique_clicks": 352
    }
  ],
  "summary": {
    "total_clicks": 2849,
    "total_unique_clicks": 2341
  }
}
```

### Notes

* Returns both page-level click aggregations and time-series trend data in a single response.
* Click targets are automatically extracted from tracked click events.
* `unique_clicks` counts distinct sessions that performed the click action.

***

## Clicks Details

```
GET /properties/{propertyId}/clicks/details
```

Returns detailed click event breakdown for a specific page, showing which elements were clicked.

### Query Parameters

| Name          | Type   | Required | Default | Notes                                                |
| ------------- | ------ | -------- | ------- | ---------------------------------------------------- |
| `page`        | string | Yes      | N/A     | The page path to get click details for (URL-encoded) |
| `granularity` | enum   | No       | `day`   | Accepted values: `hour`, `day`, `week`, `month`.     |
| `limit`       | number | No       | 10      | Maximum entries to return (maximum: 50).             |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/clicks/details?page=%2Fpricing&start=2024-05-01&end=2024-05-07&granularity=day&timezone=UTC&limit=20"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "page": "/pricing",
    "start": "2024-05-01T00:00:00.000Z",
    "end": "2024-05-07T23:59:59.000Z",
    "timezone": "UTC",
    "granularity": "day",
    "limit": 20,
    "bucket_count": 7
  },
  "data": {
    "clicks": [
      {
        "target": "Get Started Button",
        "clicks": 342,
        "unique_clicks": 289,
        "share": 0.473
      },
      {
        "target": "Learn More Link",
        "clicks": 128,
        "unique_clicks": 115,
        "share": 0.177
      }
    ]
  },
  "summary": {
    "total_clicks": 723,
    "total_unique_clicks": 615
  }
}
```

### Notes

* Use URL encoding for the `page` parameter (e.g., `/pricing page` becomes `%2Fpricing%20page`).
* `share` represents the proportion of total clicks on that page attributed to each target.
* Returns only clicks that occurred on the specified page.

***

## Forms Breakdown

```
GET /properties/{propertyId}/forms/breakdown
```

Returns aggregated form submission data grouped by page and form target, along with trend data over time.

### Query Parameters

| Name          | Type   | Required | Default | Notes                                                      |
| ------------- | ------ | -------- | ------- | ---------------------------------------------------------- |
| `granularity` | enum   | No       | `day`   | Accepted values: `hour`, `day`, `week`, `month`.           |
| `limit`       | number | No       | 10      | Maximum entries per segment (maximum supported value: 50). |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/forms/breakdown?start=2024-05-01&end=2024-05-07&granularity=day&timezone=UTC&limit=20"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "start": "2024-05-01T00:00:00.000Z",
    "end": "2024-05-07T23:59:59.000Z",
    "timezone": "UTC",
    "granularity": "day",
    "limit": 20,
    "bucket_count": 7
  },
  "data": [
    {
      "page": "/contact",
      "target": "Contact Form",
      "submissions": 89,
      "unique_submissions": 82
    },
    {
      "page": "/signup",
      "target": "Registration Form",
      "submissions": 156,
      "unique_submissions": 147
    }
  ],
  "trend": [
    {
      "bucket_start": "2024-05-01T00:00:00.000Z",
      "bucket_end": "2024-05-01T23:59:59.000Z",
      "submissions": 34,
      "unique_submissions": 31
    }
  ],
  "summary": {
    "total_submissions": 245,
    "total_unique_submissions": 229
  }
}
```

### Notes

* Returns both page-level submission aggregations and time-series trend data in a single response.
* Form targets are automatically extracted from tracked form submission events.
* `unique_submissions` counts distinct sessions that submitted a form.

***

## Forms Details

```
GET /properties/{propertyId}/forms/details
```

Returns detailed form submission breakdown for a specific page, showing which forms were submitted.

### Query Parameters

| Name          | Type   | Required | Default | Notes                                               |
| ------------- | ------ | -------- | ------- | --------------------------------------------------- |
| `page`        | string | Yes      | N/A     | The page path to get form details for (URL-encoded) |
| `granularity` | enum   | No       | `day`   | Accepted values: `hour`, `day`, `week`, `month`.    |
| `limit`       | number | No       | 10      | Maximum entries to return (maximum: 50).            |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/forms/details?page=%2Fcontact&start=2024-05-01&end=2024-05-07&granularity=day&timezone=UTC&limit=20"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "page": "/contact",
    "start": "2024-05-01T00:00:00.000Z",
    "end": "2024-05-07T23:59:59.000Z",
    "timezone": "UTC",
    "granularity": "day",
    "limit": 20,
    "bucket_count": 7
  },
  "data": {
    "forms": [
      {
        "target": "Contact Form",
        "submissions": 89,
        "unique_submissions": 82,
        "share": 0.687
      },
      {
        "target": "Newsletter Signup",
        "submissions": 41,
        "unique_submissions": 39,
        "share": 0.313
      }
    ]
  },
  "summary": {
    "total_submissions": 130,
    "total_unique_submissions": 121
  }
}
```

### Notes

* Use URL encoding for the `page` parameter (e.g., `/contact us` becomes `%2Fcontact%20us`).
* `share` represents the proportion of total form submissions on that page attributed to each form.
* Returns only form submissions that occurred on the specified page.

***

## Funnels

```
GET /properties/{propertyId}/funnels
```

Runs a funnel query across a defined sequence of steps, returning conversion rates between each step.

### Query Parameters

| Name          | Type   | Required | Default     | Notes                                                                                 |
| ------------- | ------ | -------- | ----------- | ------------------------------------------------------------------------------------- |
| `steps`       | JSON   | Yes      | N/A         | JSON array of funnel step definitions (URL-encoded).                                  |
| `mode`        | enum   | No       | `unbounded` | `unbounded` (steps in any order) or `sequential` (steps must occur in defined order). |
| `breakdownBy` | string | No       | N/A         | Optional dimension to break results down by (e.g. `device`, `country`, `utm_source`). |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/funnels?start=2024-05-01&end=2024-05-31&timezone=UTC&steps=%5B%7B%22page%22%3A%22%2F%22%7D%2C%7B%22page%22%3A%22%2Fpricing%22%7D%2C%7B%22page%22%3A%22%2Fsignup%22%7D%5D&mode=sequential"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "start": "2024-05-01T00:00:00.000Z",
    "end": "2024-05-31T23:59:59.000Z",
    "timezone": "UTC",
    "mode": "sequential"
  },
  "data": {
    "steps": [
      {
        "step": 1,
        "page": "/",
        "sessions": 3142,
        "conversion_rate": 1.0
      },
      {
        "step": 2,
        "page": "/pricing",
        "sessions": 1256,
        "conversion_rate": 0.4
      },
      {
        "step": 3,
        "page": "/signup",
        "sessions": 314,
        "conversion_rate": 0.25
      }
    ],
    "overall_conversion_rate": 0.1
  }
}
```

### Notes

* The `steps` parameter must be a JSON-encoded array. URL-encode it when passing as a query parameter.
* `conversion_rate` at each step is relative to the previous step. `overall_conversion_rate` is step 1 → last step.
* Use `mode=sequential` when order matters (e.g. homepage → pricing → signup). Use `unbounded` for unordered funnels.

***

## Funnels Sankey

```
GET /properties/{propertyId}/funnels/sankey
```

Returns path flow data for a funnel in a Sankey diagram format, showing how sessions move between steps.

### Query Parameters

Accepts all the same parameters as the `/funnels` endpoint, plus:

| Name          | Type   | Required | Default | Notes                                        |
| ------------- | ------ | -------- | ------- | -------------------------------------------- |
| `maxPaths`    | number | No       | 20      | Maximum number of paths to return.           |
| `minSessions` | number | No       | 1       | Minimum sessions a path must have to appear. |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/funnels/sankey?start=2024-05-01&end=2024-05-31&timezone=UTC&steps=%5B%7B%22page%22%3A%22%2F%22%7D%2C%7B%22page%22%3A%22%2Fpricing%22%7D%2C%7B%22page%22%3A%22%2Fsignup%22%7D%5D&mode=sequential&maxPaths=10&minSessions=5"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "start": "2024-05-01T00:00:00.000Z",
    "end": "2024-05-31T23:59:59.000Z",
    "timezone": "UTC",
    "mode": "sequential",
    "maxPaths": 10,
    "minSessions": 5
  },
  "data": {
    "paths": [
      {
        "nodes": ["/", "/pricing", "/signup"],
        "sessions": 245
      },
      {
        "nodes": ["/", "/pricing", "(drop-off)"],
        "sessions": 892
      },
      {
        "nodes": ["/", "(drop-off)"],
        "sessions": 1024
      }
    ]
  }
}
```

### Notes

* `(drop-off)` nodes indicate where sessions exited the funnel.
* Use `maxPaths` and `minSessions` to control the granularity of the output.
* Useful for visualizing where users leave the funnel and which alternative paths they take.

***

## Funnels Suggestions

```
GET /properties/{propertyId}/funnels/suggestions
```

Returns AI-generated funnel suggestions for a specific page, based on traffic patterns and user behavior.

### Query Parameters

| Name   | Type   | Required | Default | Notes                                        |
| ------ | ------ | -------- | ------- | -------------------------------------------- |
| `page` | string | Yes      | N/A     | The page path to get funnel suggestions for. |

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/funnels/suggestions?page=/pricing"
```

### Sample Response

```json
{
  "meta": {
    "property_id": "PROPERTY_ID",
    "page": "/pricing"
  },
  "data": [
    {
      "name": "Pricing to Signup Flow",
      "steps": [
        { "page": "/pricing" },
        { "page": "/signup" },
        { "page": "/welcome" }
      ],
      "rationale": "62% of signups visit the pricing page first. This funnel tracks the primary conversion path."
    }
  ]
}
```

### Notes

* Suggestions are based on your actual traffic data, not generic templates.
* Each suggestion includes a human-readable `rationale` explaining why the funnel is recommended.
* Use these suggestions as a starting point — you can modify the steps before saving.

***

## Saved Funnels

### List Saved Funnels

```
GET /properties/{propertyId}/saved-funnels
```

Returns all saved funnel configurations for the property.

### Sample Request

```bash
curl \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/saved-funnels"
```

### Sample Response

```json
{
  "data": [
    {
      "id": "funnel_abc123",
      "name": "Homepage to Signup",
      "steps": [
        { "page": "/" },
        { "page": "/pricing" },
        { "page": "/signup" }
      ],
      "created_at": "2024-05-01T10:00:00.000Z"
    }
  ]
}
```

### Create or Update a Saved Funnel

```
POST /properties/{propertyId}/saved-funnels
```

Creates a new saved funnel configuration. Include `id` in the body to update an existing funnel.

### Request Body

| Field   | Type   | Required | Notes                                            |
| ------- | ------ | -------- | ------------------------------------------------ |
| `id`    | string | No       | Include to update an existing saved funnel.      |
| `name`  | string | Yes      | A descriptive name for the funnel.               |
| `steps` | array  | Yes      | Array of step objects, each with a `page` field. |

### Sample Request

```bash
curl -X POST \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Homepage to Signup",
    "steps": [
      { "page": "/" },
      { "page": "/pricing" },
      { "page": "/signup" }
    ]
  }' \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/saved-funnels"
```

### Sample Response (201 Created)

```json
{
  "id": "funnel_abc123",
  "name": "Homepage to Signup",
  "steps": [
    { "page": "/" },
    { "page": "/pricing" },
    { "page": "/signup" }
  ],
  "created_at": "2024-05-01T10:00:00.000Z"
}
```

### Delete a Saved Funnel

```
DELETE /properties/{propertyId}/saved-funnels/{funnelId}
```

Deletes a saved funnel configuration.

### Sample Request

```bash
curl -X DELETE \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  "https://app.humblytics.com/api/external/v1/properties/PROPERTY_ID/saved-funnels/funnel_abc123"
```

### Notes

* Deleting a saved funnel does not affect historical funnel query results.
* Saved funnels are property-scoped — they are visible to all API keys for the same property.

***

## Multi-Property Aggregate

These `POST` endpoints let you query data across multiple properties in a single request. Send a JSON body with `{ "propertyIds": [...] }` along with the same query parameters used by the corresponding single-property endpoints.

All aggregate endpoints require the API key to have access to every property listed in the request.

| Endpoint                                              | Description                                        |
| ----------------------------------------------------- | -------------------------------------------------- |
| `POST /properties/aggregate/traffic/trends`           | Aggregate traffic trends across properties.        |
| `POST /properties/aggregate/traffic/summary`          | Aggregate traffic summary across properties.       |
| `POST /properties/aggregate/traffic/breakdown`        | Aggregate traffic breakdowns across properties.    |
| `POST /properties/aggregate/traffic/realtime`         | Aggregate realtime visitor data across properties. |
| `POST /properties/aggregate/traffic/entry-exit-pages` | Aggregate entry/exit pages across properties.      |
| `POST /properties/aggregate/clicks/breakdown`         | Aggregate click data across properties.            |
| `POST /properties/aggregate/forms/breakdown`          | Aggregate form submission data across properties.  |

### Sample Request

```bash
curl -X POST \
  -H "Authorization: Bearer $HUMBLYTICS_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "propertyIds": ["prop_abc123", "prop_def456"]
  }' \
  "https://app.humblytics.com/api/external/v1/properties/aggregate/traffic/summary?start=2024-05-01&end=2024-05-31&timezone=UTC"
```

### Notes

* Response format matches the corresponding single-property endpoint, with data aggregated across all specified properties.
* The `meta` object will include a `property_ids` array instead of a single `property_id`.
* The realtime aggregate endpoint does not require date parameters, same as the single-property version.

***

## Errors

| Status | Code              | When it happens                                                                       |
| ------ | ----------------- | ------------------------------------------------------------------------------------- |
| `400`  | `invalid_request` | Bad dates, unsupported timezone or granularity, ranges that are too large.            |
| `401`  | `unauthorized`    | Missing or invalid API key header.                                                    |
| `403`  | `forbidden`       | Property ID does not match the API key or the key does not have `metrics` permission. |
| `429`  | `rate_limited`    | Too many requests in a short window (limits will evolve with usage).                  |
| `500`  | `internal_error`  | Unexpected server error. Retry later or contact support.                              |

Error payloads follow this structure:

```json
{
  "error": {
    "code": "invalid_request",
    "message": "Unsupported granularity: minute",
    "details": {
      "field": "granularity"
    }
  }
}
```

***

## Best Practices

* Store API keys securely (environment variables or a secret manager) and rotate them periodically.
* Use the `timezone` parameter to align data with the local reporting context you care about.
* Cache responses when possible—trend and breakdown data only changes when new traffic arrives.
* Start with coarser granularity (e.g. `day`) for large ranges, then request narrower windows for detailed analysis.
* Use the **Multi-Property Aggregate** endpoints to consolidate reporting across multiple sites without making separate requests per property.
* Save frequently-used funnel definitions with the **Saved Funnels** endpoints so they can be re-run without redefining steps each time.
* **Looking for A/B testing endpoints?** See the [Split Testing API](/split-testing-api) to get AI-powered test recommendations, create no-code experiments, and manage running tests programmatically.




---

[Next Page](/llms-full.txt/1)