동작 구조
고객사 상품 페이지
펄핏 사이즈 추천
펄핏 버튼 (iframe)
1
- viewPerfittProduct
- perfittOpened
- measureCompleted
- viewRecommendation
고객사 페이지 스크립트
PerfittSize.onEvent(…)2로그인 회원 ID와 합침
분석 도구 · 자체 서버
GA4, Power BI, Airbridge, 자체 DB
사용자가 펄핏 버튼을 쓰는 동안 iframe 안에서 생긴 일이
viewPerfittProduct,perfittOpened같은 이벤트로 고객사 페이지(바깥)에 전달됩니다.고객사는 그 이벤트를 자기 페이지가 아는 로그인 회원 ID와 묶어, 쓰던 분석 도구나 자체 서버로 보냅니다. 이벤트에는 회원 정보가 들어 있지 않습니다.
이벤트와 발생 시점
재방문 고객은 측정 없이 바로 추천을 봅니다
- 상품 조회viewPerfittProduct
- 버튼 클릭perfittOpened
- 발 측정measureCompleted
- 추천 보기viewRecommendation
- 닫기 · 계속 쇼핑closeResultkeepShopping
| 이벤트 | 언제 | 횟수 | payload |
|---|---|---|---|
| viewPerfittProduct | 추천 가능 상품 페이지에서 펄핏 버튼이 보일 때 | 페이지마다 1번 | {} |
| perfittOpened | 버튼을 눌러 펄핏 화면이 열릴 때 | 열 때마다 | {} |
| measureCompleted | 발 측정이 끝났을 때 | 측정할 때마다. 한 사람이 여러 번 측정할 수 있고, 재방문 고객은 없을 수 있음 | {} |
| viewRecommendation | 추천 사이즈가 화면에 보일 때 | 보일 때마다 | {} |
| closeResult / keepShopping | 결과 화면을 닫거나 '계속 쇼핑'을 눌렀을 때 | 누를 때마다 | { feetId } |
네 이벤트의 payload는 비어 있습니다. 이벤트 이름만으로 판단하고, 상품 코드는 PerfittSize.productId에서 읽습니다. 상품 없이 측정만 하는 MEASURE 페이지 타입에서는 viewPerfittProduct가 오지 않습니다. checkPerfittProduct는 viewPerfittProduct의 옛 이름으로, 같은 이벤트를 받습니다.
이벤트 받기
PerfittSize.onEvent에 이벤트 이름 하나(문자열) 또는 여러 개(배열)와 콜백을 넘깁니다. 콜백에는 { eventName, payload }가 옵니다. 펄핏 스크립트가 로드된 뒤에 불러야 하므로 펄핏 스크립트보다 아래에 두세요.
기본
const eventNames = ['viewPerfittProduct', 'perfittOpened', 'measureCompleted', 'viewRecommendation'];
PerfittSize.onEvent(eventNames, ({ eventName }) => {
console.log('[PerfittSize]', eventName);
});회원과 묶으려면 고객사 페이지가 아는 로그인 회원 ID를 함께 보냅니다. GA4 예시입니다.
GA4
// 고객사 로그인 회원 ID. 비로그인이면 빈 값으로 둡니다
const memberId = MEMBER_ID;
PerfittSize.onEvent(['viewPerfittProduct', 'perfittOpened', 'measureCompleted', 'viewRecommendation'], ({ eventName }) => {
gtag('event', 'perfitt_' + eventName, {
user_id: memberId,
product_id: PerfittSize.productId,
});
});Google Tag Manager를 쓰면 dataLayer에 넣습니다.
Google Tag Manager
PerfittSize.onEvent('viewRecommendation', ({ eventName }) => {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ event: 'perfitt_' + eventName, member_id: MEMBER_ID, product_id: PerfittSize.productId });
});비로그인 고객은 회원 ID가 없어 주문과 묶이지 않습니다. 로그인을 강제할 필요는 없고, 묶이는 범위가 로그인 고객까지라는 점만 알아 두세요.
확인 방법
위 기본 코드를 넣은 뒤 브라우저 콘솔에서 순서대로 확인합니다.
- 휴대폰(또는 PC 시크릿 창)에서 추천 가능 상품 페이지를 엽니다. 콘솔에
[PerfittSize] viewPerfittProduct가 찍혀야 합니다. - 펄핏 버튼을 누르면
perfittOpened, 발 측정을 마치면measureCompleted, 추천 사이즈가 보이면viewRecommendation이 차례로 찍힙니다. - 같은 기기에서 다시 열면 측정을 건너뛰므로
measureCompleted없이viewRecommendation만 찍힙니다.
이벤트가 하나도 안 찍히면 버튼이 뜨는지부터 확인하세요. 문제 해결
서버 간 연동 (Webhook)
브라우저를 거치지 않고, 측정이나 추천이 일어날 때 펄핏 서버가 고객사 서버로 바로 알리는 방식도 있습니다(FOOT_MEASURE_COMPLETED, SIZE_RECOMMENDED 등). 고객사 서버의 수신 주소와 customerId 연동이 필요합니다.
자세한 규격은 펄핏 담당자가 안내합니다. 도입 문의