How to track links and forms in Framer

Add tracking to a link

When adding a link, you can include a tracking ID during setup. Use a unique ID to ensure your results are accurate and not mixed with other events.

Add tracking to a form

When selecting a form on the canvas, you can add a tracking ID during setup. Whenever someone submits the form on your site, the event will be tracked.

Viewing results

Once you’ve added tracking to a link or form, you can view the results in your Analytics Overview. There will be a section called “Tracking”, where you can see the top 20 tracking events on your site. You can also use these tracking IDs in Funnels and A/B tests to measure conversion rates.

Record tracking events in an external system (Segment, GA, etc.)

Framer provides custom events that you can use to track user interactions on your site. These events can be easily integrated with analytics platforms like Google Analytics or Segment.

Add the following script to the Custom Code section of your site:

// Listen for click events
document.addEventListener("framer:click", (event) => {
    console.log("Click tracked:", event.detail.trackingId);
});

Available events

{
  trackingId: string;
  href: string;
}

{
  trackingId: string;
}

{
  framerLocale: string;
}

Example: Google Analytics using gtag.js

document.addEventListener("framer:click", (event) => {
    gtag('event', 'click', {
        'event_category': 'engagement',
        'event_label': event.detail.trackingId,
        'value': event.detail.href
    });
});

Example: Universal Analytics using analytics.js

document.addEventListener("framer:click", (event) => {
    ga('send', 'event', {
        eventCategory: 'engagement',
        eventAction: 'click',
        eventLabel: event.detail.trackingId,
        eventValue: event.detail.href
    });
});