On this page

Integrating Statsig with Framer

Integrate Statsig product analytics with Framer sites to autocapture events, track conversions, and run no-code A/B tests on Framer-built pages.

How Statsig integrates with Framer

Framer lets you create interactive prototypes and websites. By integrating Statsig, you can capture user behavior and log custom events directly within your Framer projects.

This guide covers integrating Statsig into your Framer project using the JavaScript SDK.

Installation

To start tracking user interactions in your Framer project, follow these steps:

  1. Copy your web snippet from Statsig, replacing YOUR_CLIENT_KEY with a Client API Key from your Statsig project. Find your key at console.statsig.com/api_keys.
html
<script src="https://cdn.jsdelivr.net/npm/@statsig/js-client@3/build/statsig-js-client+session-replay+web-analytics.min.js?apikey=[YOUR_CLIENT_KEY]"></script>
  1. In your Framer project, click the gear icon in the top right corner to open project settings. You need the "mini" site plan or above to enable custom code.
  2. In the General tab, scroll down to the Custom Code section and paste your Statsig snippet at the end of the <head> tag section.
  3. Save your changes and publish your site. Statsig tracks basic user interactions.

Capture custom events

To track custom events in your Framer project, use window.statsig.logEvent() inside a custom component.

  1. Go to the Assets tab in your Framer project.
  2. Click the plus icon next to Code and create a new code component.
  3. Name the file CaptureButton and select New Component.
  4. Replace the default code with the following:
js

export default function CaptureButton() {
    const handleClick = () => {
        window.statsig.logEvent("click", "button");
    };

    return (
        <button id="capture-button" onClick={handleClick}>
            Click me
        </button>
    );
}
  1. Save your changes (Cmd/Ctrl + S).
  2. Drag your new CaptureButton component from the Code tab onto your Framer page.
  3. Publish your site and click the button. After a couple of minutes, the event appears in your Statsig metrics.

Was this helpful?