[TECH] Framer 에서 클릭 이벤트 분석하기 / Event Tracking

2023. 9. 8.

지난 게시물 Framer에서 화면 분석하기에서 보셨듯,
Framer라는 프로덕트 디자인툴은 ReactJS 기반인 덕분에 React 코드를 적용할 수 있었습니다.

Contact Form을 만들어 넣는다든지, 로직이 포함된 디자인 컴포넌트를 만든다든지 등의 것입니다.

구글 스프레드에서 작성한 데이터를 이용해 자동으로 테이블 디자인이 되도록 만들 수도 있죠. (요건 나중에 공유해 드릴게요.)

오늘은 Framer에서 분석 툴의 클릭 이벤트를 수집하는 방법을 소개합니다.

어떤 메뉴를 클릭했는지, 어떤 버튼을 클릭했는지.

혹은 어떤 배너를 클릭했는지 궁금하지 않으셨나요? 지난번과 마찬가지로 샘플 코드를 통해 알려드리도록 하겠습니다.

기본 개념은 제법 간단합니다.

지난 게시물에서 보셨듯, Framer 는 캔버스에서 엘리먼트를 디자인하고 코드를 오버라이드 할 수 있는데요.

이번에도 마찬가지 방법을 사용할 겁니다.

일반적으로 jQuery 등을 사용하면 공통 header 에 특정 class를 가진 녀석이 .on(click)이 되면 정도의 함수를 작성하게 되는데요.

React와 같은 SPA 들은 그런 방식을 지양하고 있죠.

물론 ref 등을 통해 외부 함수에서 엘리먼트 클릭을 잡아낼 순 있지만 그리 권장하는 방법은 아닐 것입니다.

결국 엘리먼트 자체에 onClick을 사용해야 하는데 이는 Framer의 오버라이드를 통해 해결할 수 있습니다.

와이즈트래커 홈 화면의 hero 영역인데요.

시작하기 버튼을 선택한 상태입니다.

우측 패널의 하단에 있는 Code Overrides를 보면 OnClick이라는 파일이 선택돼 있고, homeHero라는 함수가 Override 되어있는 모습을 볼 수 있습니다.

export function homeHero(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                onMouseDown={() =>
                    clickEvt("w_click_start", "홈", "시작하기", "btn")
                }
            />
        )
    }
}

선택 한 homeHero 함수를 보면 다음과 같이 생긴 코드로 이루어져있습니다.

각종 디자인 속성을 props 로 전달 받고, 그걸 다시 <Component />로 반환합니다.

앞서 말씀 드렸듯, 엘리먼트 자체에 onClick 을 걸어야 하는데요. 코드를 보시면 아시다시피 <Component />에 onMouseDown이 추가되어있는걸 볼 수 있습니다.

onMouseDown={() =>
    clickEvt("w_click_start", "홈", "시작하기", "btn")
}

마우스로 누르고 떼었을때가 아닌 눌림이 발생 하면 clickEvt() 함수를 실행한다는 의미입니다.

clickEvt 함수에 w_click_start 이벤트 이름과 홈, 시작하기, btn 등 4개의 인자를 전달하고 있네요.

그럼 clickEvt 함수를 살펴보시죠.

const clickEvt = (evt, placement, title, type) => {
    let event = {}
    let noWt = {}

    event["event"] = evt
    event["placement"] = placement
    noWt["placement"] = placement
    if (type === "btn") { 
        event["button_name"] = title
        noWt["button_name"] = title
    } else if (type === "menu") {
        console.log("onMouseDown Menu")
        event["menu_name"] = title
        noWt["menu_name"] = title
    } else if (type === "contents") {
        event["content_name"] = title.content_name
        event["category_name_b"] = title.category_name_b
        noWt["content_name"] = title.content_name
        noWt["category_name"] = title.category_name_b
    }
    WDOT.logEvent(event)
    gtag("event", evt, noWt)
    amplitude.logEvent(evt, noWt)
    fbq("track", evt, noWt)
}

와이즈트래커와 GA4, Amplitude, Facebook 을 동시에 대응하기 위해 조금 복잡합니다.

const clickEvt = (evt, placement, title, type)

첫 번째 인자는 이벤트 명, 두 번째 인자는 클릭 위치, 세 번째 인자는 이름, 마지막 인자는 이벤트 타입으로 정의하고 있습니다.

타입에 따라 전달해야 하는 값이 조금씩 달라서 범용적으로 사용하기 위해 저렇게 작성 된 것인데요.

타입이 btn이 아닌 menu일 경우는 다음과 같이 이용하기 위함입니다.

export function gnbHome(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                onMouseDown={() =>
                    clickEvt("w_click_menu", "GNB", "홈", "menu")
                }
            />
        )
    }
}