Integration Guides
Framer
Add OnyxMetric 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.
Copy your tracking snippet
In OnyxMetric, open your site's Site Settings and copy the tracking script. It looks like this:
<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>YOUR_SITE_ID is the numeric ID of your site.
Add the snippet to Framer
- Open your Framer project and go to Site Settings → General.
- Scroll to Custom Code.
- Paste the snippet into Start of
<head>tag. The end of<head>works too. - Click Save, then Publish. Custom code reaches the live site only on publish.
Check that it works
Load your live site and click through a few pages. Pageviews show up in the OnyxMetric dashboard within seconds.
If nothing arrives:
- View the page source and search for
script.js?siteId=to confirm the tag is present. - In the browser's Network tab, check that
script.jsreturns200and that requests go to/api/track. - Turn off ad blockers, or proxy the script through your own domain.
- Read script troubleshooting for other causes.
Track custom events
A Code Override sends events from any element on the canvas.
- Select the element, open Overrides in the properties panel, and click + File to create an override file such as
OnyxOverrides.tsx. - Add an override that wraps the element's click handler:
// OnyxOverrides.tsx
import type { ComponentType } from "react";
export function withOnyxClick(Component: ComponentType): ComponentType {
return (props) => {
const handleClick = () => {
window.onyx?.event("cta_click", { label: props.text ?? "cta" });
props.onClick?.();
};
return <Component {...props} onClick={handleClick} />;
};
}- In the properties panel, pick the file and apply
withOnyxClickto the element.
The same window.onyx.event() call works inside a Code Component.
Troubleshooting
- Page-to-page navigation: Framer navigates client-side, and the script detects URL changes. If a view changes without the URL changing, call
window.onyx.pageview()from an override when it appears.
Next steps
- Track custom events such as signups, purchases, and clicks.
- Identify users to tie sessions to accounts.
- Proxy the script through your own domain to get past ad blockers.
- Script attributes let you skip or mask URLs and tag events.