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.

Example 1: Code Override

import { useTracking } from "framer"

// Override that tracks when a layer is clicked
export function TrackClick() {
  const track = useTracking()

  return {
    onClick: () => {
      track("clicked-layer")  // Replace with your own tracking ID
    }
  }
}

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.