Fluxner DocsIntegration Guides
Framer
Add Fluxner analytics to your Framer site
Framer has a Custom Code section in the site settings that injects HTML into the <head> of every published page.
Get your tracking snippet
In your Fluxner dashboard, open Site Settings → Tracking Script and copy your snippet. It looks like this:
<script src="https://fluxner.com/api/script.js?siteId=YOUR_SITE_ID" defer></script>YOUR_SITE_ID is the numeric ID of your site. If you self-host Fluxner on another domain, replace fluxner.com with your instance's domain.
Add the snippet to Framer
- Open your Framer project and go to Site Settings → General.
- Scroll to Custom Code.
- Paste the snippet into the Start of
<head>tag field (End of<head>works too). - Click Save, then Publish. Custom code only reaches the live site on publish.
Verify installation
Open your live site in a new tab and click through a few pages. Within a few seconds the pageviews appear in the Fluxner dashboard.
If nothing shows up:
- View the page source and search for
script.js?siteId=to confirm the snippet is on the page. - Open the browser Network tab and check that
script.jsreturns200and thatPOSTrequests go to/api/track. - Disable ad blockers, or set up a proxy so the script loads from your own domain.
- See the script troubleshooting guide for other common causes.
Track custom events
Use a Code Override to send events from any element in the canvas.
- Select the element, open Overrides in the properties panel, and click + File to create an override file such as
FluxnerOverrides.tsx. - Add an override that wraps the element's click handler:
// FluxnerOverrides.tsx
import type { ComponentType } from "react";
export function withFluxnerClick(Component: ComponentType): ComponentType {
return (props) => {
const handleClick = () => {
window.fluxner?.event("cta_click", { label: props.text ?? "cta" });
props.onClick?.();
};
return <Component {...props} onClick={handleClick} />;
};
}- Back in the properties panel, pick the file and apply
withFluxnerClickto the element.
The same window.fluxner.event() call works inside a Code Component.
Troubleshooting
- Navigation between pages is not tracked: Framer sites navigate client-side and the script detects those URL changes. If a view changes without the URL changing, call
window.fluxner.pageview()from an override when it appears.
Next steps
- Track custom events such as signups, purchases and button clicks.
- Identify users to connect sessions to accounts.
- Proxy the script through your own domain to bypass ad blockers.
- Script attributes let you skip or mask URLs and tag events.