This document has been created to help Korean users learning Framer who struggle with a lack of Korean resources. We've translated content from the official blog into Korean and added practical information useful for work. We hope it provides a bit of help to those using Framer.

1. Adding Tracking to Links

If you're interested in knowing how often a specific button or link is clicked, simply add a Tracking ID when setting up the link. Assign a unique ID to each link to ensure you get accurate results for each ID and prevent data from mixing with other events.

2. Adding Tracking to Forms

You can also track form submission frequencies with Framer. Select the form you want to track, and in the Form properties panel on the right, enter the Tracking ID. Tracking occurs each time a visitor submits a form on your site, with events being logged accordingly.

3. Viewing Results in Analytics Overview

Once tracking is added to links or forms, where can you see the results? The outcomes of these tracking events are available in the Analytics Overview under the Tracking section. This section offers the following features:

• Displays the top 20 tracking events on your site.

• You can also analyze conversion rates by linking set tracking IDs with Funnels or A/B testing.

4. Integrating with External Analytics Tools

Framer provides Custom Events for tracking user behavior on your site, which can easily integrate with analytics platforms like Google Analytics and Segment. Make sure to take full advantage of these features.

Try adding the following script to the site's Custom Code section. For a guide on adding Custom Code, see this guide.

// 클릭 이벤트 수신하기
document.addEventListener("framer:click", (event) => {
    console.log("Click tracked:", event.detail.trackingId);
});

Available Event Types

(Example 1) Using gtag.js for Google Analytics

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

(Example 2) Using analytics.js for Universal Analytics

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

By combining Framer's event system with external tools, you can precisely analyze user behavior on your site and gather data directly applicable to improving your conversion rates.

What project's click events do you want to track first? We recommend analyzing user behavior data through this guide to help develop your site.

This article is an adapted translation of Framer's official blog post ‘How to track links and forms in Framer’.