# 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.) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.humblytics.com/how-to-get-started/framer.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.