# Framer ## Add Humblytics Analytics to Framer ### 1 · Sign up (or log in) 1. Go to humblytics.com → **Start Free Trial** (14-day free trial, no credit card required) 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 ``` 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 `` tag**, paste your Humblytics script: html ```html ``` 7. The changes save automatically **Why Start of ``?** 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 `` 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 `` tag**, not End of `` 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.)