MEETUP FRAMER
MEETUP FRAMER
어려우신가요? 혹은 어플리케이션 태깅이 필요하신가요?
charian@wisetracker.co.kr로 연락주세요.
혹은 프레이머 코리아 Slack 채널을 이용해주세요.
어려우신가요? 혹은 어플리케이션 태깅이 필요하신가요?
charian@wisetracker.co.kr로 연락주세요.
혹은 프레이머 코리아 Slack 채널을 이용해주세요.
Step 01
Step 01
Step 01
Tracker Integration
Tracker Integration
Tracker Integration
Site Setting > General > Custom Code에 웹사이트용 기초 스크립트를 삽입합니다.
본 문서는 GA4와 Amplitude를 대응합니다.
두 서비스 모두 웹사이트용 SDK를 준비해주세요.
Wisetracker를 이용해 어플리케이션과 웹사이트, 마케팅 오토메이션 통합 분석을 통합적으로 준비하고 계시다면 charian@wisetracker.co.kr로 문의해주세요.
Site Setting > General > Custom Code에 웹사이트용 기초 스크립트를 삽입합니다.
본 문서는 GA4와 Amplitude를 대응합니다.
두 서비스 모두 웹사이트용 SDK를 준비해주세요.
Wisetracker를 이용해 어플리케이션과 웹사이트, 마케팅 오토메이션 통합 분석을 통합적으로 준비하고 계시다면 charian@wisetracker.co.kr로 문의해주세요.
Step 02
Step 02
Step 02
Create Code Component
Create Code Component
Create Code Component
Code Component를 New override형식으로 생성합니다.
Code Component를 New override형식으로 생성합니다.
Click
Click
Type onClick
Select
Step 03
Step 03
Step 03
onClick Code overwrite
onClick Code overwrite
onClick Code overwrite
생성 한 파일을 다음의 코드로 교체합니다.
import { Override, Frame, addPropertyControls, ControlType } from "framer" import type { ComponentType } from "react" interface MyComponentProps { className: string } // 배포 환경에서만 코드가 작동할 수 있도록 방어코드를 준비합니다. const environmentName = typeof window !== "undefined" && window.location.href ? window.location.href : "" // 배포 환경에서 url 에 framer.app 이 포함될 경우로 한정합니다. const isWebsite = environmentName.includes("framer.app") // 버튼을 클릭할 경우 실행 될 함수 const clickEvt = (evt, id, placement, title) => { console.log(evt, id, placement, title) } // 오버라이드 되는 엘리먼트를 반환합니다. export function clickButton(Component): ComponentType { return (props) => { return ( <Component {...props} onMouseDown={() => clickEvt("button_click", "button_home", "home", "버튼이름") } /> ) } }
Step 04
Step 04
Step 04
Setup & Test overrides
Setup & Test overrides
Setup & Test overrides
생성 한 clickButton을 디자인 한 버튼에 override하고 테스트를 진행합니다.
디자인 한 엘리먼트에 clickButton을 Override 합니다.
배포를 진행합니다
url에서 결과를 확인합니다.
버튼 우 클릭 후 검사 항목을 클릭해 콘솔을 엽니다.
버튼 클릭 후 콘솔에 메시지가 표현되는지 확인합니다.
Step 05
Step 05
Step 05
Send Event
Send Event
Send Event
clickEvt 함수에 GA4와 Amplitude에 전달 될 함수를 추가합니다.
// 버튼을 클릭할 경우 실행 될 함수 const clickEvt = (evt, id, placement, title) => { console.log(evt, id, placement, title) if (isWebsite && typeof window !== "undefined") { gtag("event", evt, { id, placement, title }) amplitude.logEvent(evt, { id, placement, title }) } }
Step01 단계를 건너뛰면 에러가 발생할 수 있습니다.
Code는 배포 전 Site Setting의 Head에 접근하지 않으므로 코드상 밑줄이 생성될 수 있습니다.
GA4와 Amplitude의 SDK에 다음의 코드가 존재하는지 각 각 확인해주세요.
GA4 : gtag('config', 'G-***');
Amplitude : amplitude.init('***');
Step 06
Step 06
Step 06
Tracking
Tracking
GA4와 Amplitude를 활용해 데이터를 추적합니다.
추적이 필요한 버튼, 메뉴마다 아래의 Override를 추가해 사용해주세요.
본 문서는 click 이벤트만 다루고 있는 문서입니다.
// 오버라이드 되는 엘리먼트를 반환합니다. // 오버라이드 함수는 여러개가 추가될 수 있습니다. // 오버라이드마다 clickButton 대신 유의미한 함수 이름을 사용해주세요. ex) clickHome export function clickButton(Component): ComponentType { return (props) => { return ( <Component {...props} onMouseDown={() => clickEvt( "button_click", // 변경하지 않아도 됩니다. "button_home", // 버튼의 유니크 값을 사용하세요. "home", // 버튼의 위치를 입력해주세요. "버튼이름" // 버튼에 사용 된 텍스트를 입력해주세요. ) } /> ) } }