Search

How to track custom events in Framer

You can track custom events on your Framer site using code, giving you full flexibility to measure any type of interaction.

To track custom events on your site, use Framer’s useTracking() hook to obtain a track() function. You can pass in a tracking ID, which will appear in your analytics dashboard and can be used in Funnels and A/B testing. This is useful for tracking custom interactions beyond link clicks and form submissions.

Important: The tracking ID must be in lowercase and use hyphens to separate words (e.g., my-tracking-id). If it is not in this format, it will not be tracked.

Example 1: Code Override

import { useTracking } from "framer"
import { ComponentType, forwardRef } from "react"

export function withClickTracking(Component): ComponentType {
    return forwardRef((props, ref) => {
        const track = useTracking()

        const onClick = () => {
            track("track-with-override")
        }

        return <Component ref={ref} {...props} onClick={onClick} />
    })
}

Example 2: Code Component

import * as React from "react"
import { ControlType, addPropertyControls, useTracking } from "framer"

export function TrackingButton({ trackingId, text }) {
    const track = useTracking()

    return (
        <button
            style={{
                padding: "12px 20px",
                fontSize: "16px",
                cursor: "pointer",
                borderRadius: "6px",
                border: "1px solid #ccc",
            }}
            onClick={() => {
                if (trackingId) {
                    track(trackingId)
                }
            }}
        >
            {text}
        </button>
    )
}

addPropertyControls(TrackingButton, {
    text: {
        title: "Title",
        type: ControlType.String,
        defaultValue: "Button Title",
    },
    trackingId: {
        title: "Tracking",
        type: ControlType.TrackingId,
        placeholder: "ID",
    },
})

Viewing results for custom events

To view analytics for custom events, add a step in your funnel with the type custom, then enter the tracking ID of the custom event.