본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

1. 링크에 추적 기능 추가하기

특정 버튼이나 링크가 얼마나 클릭되고 있는지에 대해 알고 싶다면, 링크를 설정할 때 Tracking ID를 추가하면 됩니다. 이때 각 링크마다 고유 ID를 지정하여 사용하면 ID마다의 정확한 결과를 얻을 수 있으며, 다른 이벤트의 데이터와 섞이는 것을 방지할 수 있습니다.

2. 폼에 추적 기능 추가하기

폼 제출 빈도 또한 Framer에서 추적이 가능한데요. 추적할 폼을 선택한 후, 오른쪽 Form의 속성 패널에서 Tracking ID를 입력하면, 방문자가 여러분의 사이트에 폼을 제출할 때마다 이벤트가 기록되는 방식으로 추적이 진행됩니다.

3. Analytics Overview에서 결과 확인하기

링크나 폼에 추적 기능을 추가한 후, 결과는 어디에서 확인할 수 있을까요? 해당 추적 이벤트에 대한 결과는 Analytics Overview의 Tracking 섹션에서 확인할 수 있습니다. 해당 섹션은 아래와 같은 기능을 가지고 있습니다.

• 사이트의 상위 20개의 추적 이벤트들이 표시돼요.

• 설정한 추적 ID들을 Funnels이나 A/B 테스트와 연동하여 전환율(Conversion Rate)을 분석할 수도 있어요.

4. 외부 분석 도구와 연동하기

Framer는 사이트에서 사용자의 행동을 추적하는 데에 사용할 수 있는 Custom Events를 제공하고 있습니다. 해당 이벤트는 Google Analytics, Segment와 같은 분석 플랫폼과 쉽게 통합도 가능하니 잘 활용하여 사용해보시길 바랍니다.

아래의 스크립트를 사이트의 Custom Code 섹션에 추가해보세요. 또한 Custom Code를 추가하는 방법은 이 가이드에서 도움을 받아보실 수 있습니다.

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

사용 가능한 이벤트 종류

(예시1) gtag.js를 사용한 Google Analytics 예시

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

(예시2) analytics.js를 사용한 Universal Analytics 예시

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

이처럼 Framer의 이벤트 시스템을 외부 도구와 결합하면 사이트 내 사용자 행동을 정밀하게 분석하고, 전환율 개선에 직접적으로 활용할 수 있는 데이터를 모을 수 있습니다.

어떤 프로젝트의 클릭 이벤트를 가장 먼저 추적해보고 싶으신가요? 해당 가이드를 통해 사용자의 행동 데이터를 분석하여, 여러분의 사이트를 디벨롭 시켜보시길 추천드립니다.

본 글은 Framer 공식 블로그의 ‘How to track links and forms in Framer’를 번역·각색한 콘텐츠입니다.