Framer

Name: Rybbit
Author: Rybbit

Rybbit enables you to gather analytics on user behavior, capture custom events, record sessions, and more within your Framer site.

How to Add Rybbit to Framer

1. Retrieve Your Tracking Script

Navigate to your Rybbit dashboard to obtain your code snippet.


<script
  src="https://app.rybbit.io/api/script.js"
  data-site-id="YOUR_SITE_ID"
  async
  defer
></script>

2. Add the Snippet to Your Framer Project

Open your Framer project.
Go to Site Settings > General and scroll down to Custom Code.
Paste your snippet into the <head> tag section (start or end).
Publish your changes.

Page View Tracking in Framer: Framer sites often behave like Single Page Applications (SPAs). Rybbit’s tracking script is designed to automatically detect URL changes and track them as page views. If you use Framer’s navigation features (like links between pages or components that change the URL), Rybbit should capture these. If you notice page views are not tracked correctly after navigation, you might need to manually trigger window.rybbit.trackPageview() using a Framer code override or code component when a “virtual” page change occurs. Test the default behavior first.

Custom Event Tracking in Framer

You can track custom events in Framer using Code Overrides or by creating Code Components. This allows you to trigger Rybbit tracking calls in response to user interactions.

Example using a Code Override on a button:

Select the button or interactive element in Framer.
In the properties panel on the right, find “Overrides” and click ”+ File” to create a new override file (e.g., MyButtonOverrides.tsx) or select an existing one.
Add the following code to the override file:


// MyButtonOverrides.tsx
import type { ComponentType } from "react"
 
export function withRybbitTracking(Component: ComponentType): ComponentType {
    return (props) => {
        const handleClick = () => {
            if (typeof window !== "undefined" && window.rybbit) {
                window.rybbit.trackEvent('framer_button_click', {
                    buttonName: props.text || 'Unnamed Button',
                    page: props.currentPage?.name || 'Unknown Page'
                });
            }
            // Call original onClick if it exists
            props.onClick?.();
        };
 
        return <Component {...props} onClick={handleClick} />
    }
}

Apply this override to your button component in Framer:
- Select the button.
- In the Overrides section, choose the file (MyButtonOverrides).
- Choose the withRybbitTracking override for the onClick (or relevant interaction) property.

Example within a Code Component:


// MyInteractiveComponent.tsx
import React from "react"
 
export function MyInteractiveComponent(props) {
    const handleInteraction = () => {
        if (typeof window !== "undefined" && window.rybbit) {
            window.rybbit.trackEvent('framer_component_interaction', {
                componentName: 'MyInteractiveComponent',
                detail: 'User interacted'
            });
        }
    }
 
    return (
        <div onClick={handleInteraction} style={{ padding: 20, background: "lightblue", cursor: "pointer" }}>
            Click me to track event
        </div>
    )
}

Remember to always check for window.rybbit before calling its methods. Publish your Framer site to see the tracking in action.